Banner propaganda da DevMedia - Cursos de desenvolvimento web

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®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo