Como Estilizar Um Formulário De Contato

[fsg 230]

Oii XTibianos, quer aprender como Estilizar Um Formulário De Contato? Neste tutorial vocês vão aprender certinho! Então vamos logo, sem enrolar...

 

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.

 

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.

 

 

O HTML do formulário

<form name="nomedoform" action="xxxx" 
method="xxxx" >
<table>
<tr> 
<th colspan="2">Formulá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á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ó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.

 

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á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á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á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ó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
  

 

Fonte:

Clique aqui

 

Espero que gostem, o tutorial é bem legal! :smile_positivo:

Abraços.

Editado Dezembro 23, 2010 por FezZinN

[tonohom 0]

Poderia fazer um tutorial passo-a-passo de como coloca-lo no site?

[milbradt 19]

Isso serve para o que na verdade? para mandar assuntos? correto? pode ser para qualquer site?

Se for isso eh bem Interessante :smile_positivo: