Um formulário bonito para cativar Clientes

Um formulário de contacto ou inscrição numa dada campanha é daquelas coisas que dá trabalho a fazer e onde a criatividade e o design nem sempre estão presentes. Os formulários em regra não são bonitos e limtam-se a cumprir a tarefa para que foram criados. No entanto não tem de ser assim e se é importante cativarmos os clientes para que falem connosco um formulário agradável pode ajudar neste processo, tornando-se num peça de “marketing”, contribuindo para dar personalidade ao site.

Neste artigo vou descrever como se pode fazer para transformar o “monstro” na “bela”, através de uma simples operação de cosmética que mais não usa do que folhas de estilo (CSS), para embelezar o motor de PHP por detrás do processo. Como vou explicar nem é preciso recorrer ao JavaScript, nem trabalhar com tabelas dentro do HTML. Poder-se-ia sofisticar mais o processo, mas como sou adepto de um “design” clean e minimalista creio que o efeito estético conseguido é mais do que suficiente e, o que é mais importante, claro, prático e acessível para o visitante.

Uma palavra sobre a navegação no formulário de contacto recorrendo aos diferentes “browsers”: infelizmente, como é sabido, nem todos se comportam da mesma maneira – já não falo na qualidade com que renderizam fontes e imagens¹ – pelo que foi necessário criar folhas de estilo com ligeiras variações adaptadas às diferentes situações, a saber:

► Internet Explorer 8 [e onde o resultado é pior; ver nota no fim]
► Opera 10
► Konqueror (Linux)
► Firefox (Linux, porque na verdade as coisas nãos e portam igual que em Windows ou OSX)
► Firefox, Safari, Chrome e restantes (o desenho foi primariamente desenvolvido para estes)

Assim teve-se que se recorrer ao “User Agent” e introduzir a seguinte tipo de rotina no header.php²:

<?php
if (strstr($_SERVER['HTTP_USER_AGENT'], 'Opera'))
{
echo "<link rel='stylesheet' type='text/css' href='./opera-estilos.css' />";
}
elseif (strstr($_SERVER['HTTP_USER_AGENT'], 'MSIE'))
{
echo "<link rel='stylesheet' type='text/css' href='./ie-estilos.css' />";
}
else
{
echo "<link rel='stylesheet' type='text/css' href='./estilos.css' />";
}
?>
 

Um pormenor aborrecido mas que é preciso ter em atenção…

1. Sem estilo, com estilo e sem tabelas

O formulário “em bruto”, funcional, mas sem qualquer preocupação estética teria este aspecto:

Formulário em PHP e HTML antes da formatação

Note que, para além de outras rotinas de protecção anti-spam que estão incluídas no código e não são visíveis no formulário, este exibe um número (em cima à esquerda) que é gerado aleatoriamente e que é preciso que o utilizador digite de cada vez que visita a página. A solução estética que se encontrou para esta situação creio que é visualmente agradável, e resulta de se disfarçar esse número, aumentando a sua transparência, no fundo da página.

Depois de umas horas de trabalho com as “Style Sheets”, e sem se recorrer a qualquer tabela, o aspecto do mesmo formulário passou então a ser este (ver neste link a página da ficha de contacto a funcionar):

Página de Contactos depois de formatada com CSS

O formulário foi dividido em três secções para maior usabilidade; parte das questões pertinentes que é importante obter da pessoa que preenche o formulário não é preciso preencher, bastando clicar nos botões respectivos ou escolher de um menu, o que torna a sua execução fácil e rápida. O botão de submissão é grande e de uma cor chamativa para “provocar” o envio do mensagem. O formulário desenvolve-se sobre a horizontal, ocupando todo o ecrã de modo a que não hajam outros elementos que desviem a atenção. O conteúdos das mensagem é simples e “sem ruído”.

Como se pode ver pelo excerto do código abaixo foram usadas sobreposições de camadas (‘layers’), níveis de transparência e mesmo máscaras de imagens para desfazer a uniformização no tamanho dos campos, tornando o seu aspecto mais agradável.

#aleacx
{
 position:absolute;
 top:42px;
 left: 350px;
 z-index:0;
}
#mascara
{
 position:absolute;
 left: 396px;
 top: 52px;
 background-image:url(./img_h/fdbranco.png);
 width:225px;
 height: 34px;
 z-index:1;
}
#rand
{
 float:left;
 margin-left:740px;
 margin-top:30px;
 font-size: 6em;
 color: grey;
 opacity: 0.15;
 filter:alpha(opacity=15);
 font-family: serif;
 letter-spacing: 20px;
 font-weight: bold;
}

Isto para além das hipóteses de formatação que as CSS dão directamente para os campos “label”, input e submit, por exemplo:

#formul input
{
 font-size:13px;
 color:black;
 background:white;
 width: 255px;
 height: 27px;
 padding: 5px 0 2px 4px;
}
#formul input[type="checkbox"]
{
 width:20px;
 height:20px;
 padding:0px;
}
#formul input[type="radio"]
{
 width:20px;
 height:20px;
 padding:0px;
}

2. Boas Práticas na elaboração de Formulários

Noutro artigo vou falar sobre os aspecto mais técnicos da feitura deste formulário, pelo que não vou agora entrar em pormenores sobre esta matéria. O que queria aqui evidenciar é que é preciso seguir uma série de boas práticas nesta matéria, já que os formulários, elementos que se encontram, por exemplo, na “ponta” de uma campanha de captura de “leads”, ou que são um elemento central nas “landing pages”, não podem ser descartados como um elemento menor no processo de criação de páginas e do marketing digital.

Portanto aqui é também muito importante acentuar o aspecto estético do design e usabilidade da página. Se o HTML e o PHP são imprescindíveis para pôr o formulário a funcionar de uma maneira correcta e a comunicar com o mail do Webmaster”, um uso cuidado das folhas de estilo é imprescindível para o “vestir” com as roupas adequadas.

A continuar…

Ver também os artigos:

________________

1 – Neste “campeonato” o Internet Explorer fica claramente em último lugar: quer as fontes, quer as imagens renderizadas em fundo e as transparências apresentam uma nítida menor qualidade;

2 – A criação de um “header” independente comum a todas as páginas e que estas carregam torna mais fácil o posterior trabalho de manutenção do site.