Voltar para o site

Estilizando um formulário de contato

Publicado em: 11/12/2003

Objetivo

Mostrar como personalizar um formulário de contato com uso de CSS.

Nota de esclarecimento sobre atualização deste tutorial

Escrevi este tutorial em dezembro de 2003 atendendo a pedidos de meus visitantes. Àquela época todos os pedidos citavam um formulário construido com tabela e por isso o tutorial foi assim escrito.
Felizmente, decorridos um pouco mais de dois anos, as técnicas CSS ganharam força junto aos desenvolvedores brasileiros, crescendo a cada dia os que aderem às Web Standards.
Assim, mais uma vez atendendo vários pedidos dos meus leitores, desenvolvi uma página web contendo este mesmo formulário, sem uso de tabela, o que vale frisar é o semanticamente correto.
Este link levará você a uma página com o formulário posicionado com CSS<. (abre em outra janela)

Um formulário padrão

Um formulário de contato típico consta de: três campos de input para texto: nome, e-mail e assunto; um campo textarea para o texto da mensagem; um input tipo botão para envio da mensagem.

Vamos admitir nosso formulário "dentro" de uma tabela, com duas colunas e seis linhas, tudo conforme mostrado abaixo:

Formulário de contato
* Campos de preenchimento obrigatório

O HTML do formulário

<form name="nomedoform" action="xxxx" 
method="xxxx" >
<table>
<tr> 
<th colspan="2">Formul&aacute;rio 
de contato</th>
</tr>
<tr> 
<td><label>Nome</label></td>
<td><input name="nome" type="text" size="33" 
maxlength="1000"></td>
</tr>
<tr> 
<td><label>*e-mail</label></td>
<td><input name="email" type="text" size="33" 
maxlength="1000"></td>
</tr>
<tr> 
<td><label>Assunto</label></td>
<td><input name="subject" type="text" size="33" 
maxlength="1000"></td>
</tr>
<tr> 
<td><label>*Coment&aacute;rios</label>
</td>
<td><textarea name="comentario" cols="25" 
rows="7" >
</textarea>
</td>
</tr>
<tr> 
<td><input name="submit" type="submit" 
value="Enviar" 
class="botao">
</td>
<td>*Campos de preenchimento obrigat&oacute;rio</td>
</tr>
</table>
</form>

Nota: Este é o HTML da tabela mostrada acima. Para efeito de clareza coloquei um cellpadding e uma borda na tabela mostrada e que não constam do HTML. Em consequência se você copiar-colar o HTML acima, não verá as bordas da tabela e elas não interessam para nosso tutorial.

O formulário estilizado

Abaixo o formulário pronto, com as regras CSS aplicadas. Mostro o formulário desde já, para que você tenha uma noção antecipada do final e com isto facilitar o entendimento do tutorial a medida que for lendo.

Formulário de contato
* Campos de preenchimento obrigatório

Estilizando a "caixa" que contém o formulário

A "caixa" que contém o formulário é a Tabela.

Para estilizar a tabela vamos atribuir-lhe uma id e escrever regras CSS para esta id. Escolhi o nome da id todoform

Acresento no HTML: <table id="todoform">

E escrevo a seguinte regra CSS:

#todoform {
background:#4f4f4f; 
/* cor escura para o fundo do formulário */

font:12px arial, verdana, helvetica, sans-serif; 
/* o tamanho e o tipo da fonte no formulário */

border-top:8px solid #cfcfcf;
/* borda superior de 8px solida na cor cinza clara 
no formulário */

border-left:8px solid #cfcfcf;
/* a borda esquerda do formulário */

border-right:8px solid #696969; 
/* a borda direita do formulário */

border-bottom:8px solid #696969; 
* a borda inferior do formulário */

border-collapse:collapse; 
/* retira as bordas duplas nas células da tabela */

color:#ff9900; /* a cor laranja para as letras */
      }

Estilizando o título

O título: "Formulário de contato" está contido dentro da tag th da Tabela.

A regra CSS para o título é esta:

#todoform th {
background:#000000;
/* a cor preta para o fundo do título */

padding:3px; 
/* um afastamento de 3px */

font: bold 15px arial, verdana, helvetica, sans-serif; 
/* letras em negrito com 15px e familia arial, verd....*/

border-bottom:1px solid #ff9900; 
/* uma borda inferior solida de 1px na cor laranja */
}

Estilizando os tres campos input

A regra CSS para os campos é esta:

#todoform input {
background:#b5b5b5; 
/* a cor do fundo dos três campos */

border:1px dashed #ff9900;
/* uma borda de 1px tracejada e na cor laranja para 
o campo */
}

Estilizando a textarea

A regra CSS para o campo da mensagem é esta:

#todoform textarea {
 background:#b5b5b5; 
 /* a cor do fundo do campo */

border:1px dashed #ff9900; 
/* uma borda de 1px tracejada e na cor 
laranja para o campo */
}

Estilizando o botão enviar

A regra CSS para o botão é esta:

 #todoform input.botao {
background:#000000; 
/* a cor do fundo do botão */

color:#ffffff; /* a cor das letras Enviar */
border:2px solid #ffffff;
/* uma borda de 2px solida branca no botão*/
}

Um toque final

E, para que os campos não fiquem tão colados nos nomes dos campos acresentamos um espaçamento de 3px nas células

A regra CSS para o espaçamento é esta:

#todoform td {
padding:3px;
}

O código pronto

E, a seguir o código completo de uma página com o formulário estilizado, para você copiar-colar, ESTUDAR e adaptar para suas necessidades.. 

<html>
<head>
<title>Formul&aacute;rio estilizado</title>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1"><style type="text/css">
#todoform {	
background:#4f4f4f;	
font:12px arial, verdana, helvetica, sans-serif;	
border-top:8px solid #cfcfcf;
border-left:8px solid #cfcfcf;	
border-right:8px solid #696969;
border-bottom:8px solid #696969;
border-collapse:collapse;
color:#ff9900;	
}
#todoform th {
background:#000000;
padding:3px;
font: bold 15px arial, verdana, helvetica, sans-serif;	
border-bottom:1px solid #ff9900;	
}
#todoform td {	
padding:3px;	
}
#todoform input {	
background:#b5b5b5;	
border:1px dashed #ff9900;	
}
#todoform textarea {
border:1px dashed #ff9900;
background:#b5b5b5;	
}
#todoform input.botao {	
background:#000000;	
color:#ffffff;
border:2px solid #ffffff;
}	
</style>
</head>
<body>
<form name="nomedoform" action="" method="" >  
<table id="todoform">    
<tr>       
<th colspan="2">Formul&aacute;rio de contato</th>    
</tr>    
<tr>       
<td><label>Nome</label>
</td>
<td><input name="nome" type="text"  size="33" 
maxlength="1000"></td>    
</tr>    
<tr>       
<td><label>*e-mail</label> </td>
<td><input name="email" type="text" size="33" 
maxlength="1000"></td>    
</tr>    
<tr>       
<td><label>Assunto</label></td>
<td><input name="subject" type="text" size="33" 
maxlength="1000"></td>    
</tr>    
<tr>       
<td><label>
*Coment&aacute;rios</label></td>
<td><textarea name="comentario" cols="25" 
rows="7" ></textarea></td>    
</tr>    
<tr> 
<td><input name="submit" type="submit" 
value="Enviar" class="botao"> 
</td>      
<td>* Campos de preenchimento obrigat&oacute;rio</td>    
</tr>  
</table>
</form>
</body>
</html>

Tutoriais de apoio

Se você encontrar dificuldade em entender algum assunto de estilização mostrado neste tutorial, indico abaixo tutoriais de apoio por assunto:

Tutorial - estilizar fundo

Tutorial - estilizar bordas

Tutorial - estilizar fontes

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo