Formulário de contato HTML estilizado com CSS



Olá pessoal!
Neste tutorial mostrarei um formulário simples de contato em HTML feito pelo blogueiro Diego Alex, que pode ser muito útil para vocês colocarem em seus sites.

Um formulário de boa aparência, onde você pode mudar de acordo com seu gosto:


Aí vai o código:

Crie um arquivo "contato.html" e cole o código:

<!– Div principal do site –>
<div id=“principal”>
  
    <hr />
  
 <!– titulo da página –>
    <h1>Formulário Estilizado</h1>
  
    <form action=“enviar.php”>
     <fieldset>
         <legend>
Fale Conosco</legend>
            <ol>
             <li>
                 <label for=“nome”>Nome</label>
                    <input type=“text” id=“nome” />
                </li>
                <li>
                 <label for=“email”>E-mail</label>
                    <input type=“text” id=“email” />
                </li>
                <li>
                 <label for=“mensagem”>Mensagem</label>
                    <textarea id=“mensagem” rows=“7″ cols=“30></textarea>
                </li>
            </ol>
            <button type=“submit” id=“enviar”><img src=“imgs/enviar.gif” /><br>Enviar</button>
        </fieldset>
    </form>

</div>

Depois disso crie um novo documento CSS com o nome de "estilo.css" ou o nome que você preferir:

@charset “utf-8″;
/* CSS Document */
form { width: 20em; font-size: 1.6em; }
form fieldset { border: 1px solid #666; padding: 0 0.5em; }
form legend { padding: 0 0.5em; border: 1px solid #333; }
form fieldset ol { list-style: none; margin: 0; padding: 0; }
form label { display: block; }
form ol li { margin: 0.8em 0; }
form input { width: 20em; }
form input#enviar { margin-bottom: 1em; width: auto; }
form textarea { width: 20em; }

Esse é o código de formatação de nosso formulário.

Até a próxima!!

Siga-me no Twitter: @junim_ramos

9 comentários:

  1. ola amigo, tenho um blog no blogspot.com, gostaria de saber se tem como eu add esse form nele, mais nao sei como faria também, tem como fazer um tutorial para gente ?
    obrigado!

    ResponderExcluir
  2. Flávio, mandei um link de um tutorial para fazer isso, aqui você vê um exemplo aqui no blog mesmo...

    http://blogaododesign.blogspot.com/p/contato.html

    ResponderExcluir
  3. como faço pra receber estes formularios no meu email??

    cortuba@hotmail.com

    ResponderExcluir
  4. @CORTUBA:

    Dê uma olhada neste tutorial passo a passo de como fazer isso!!

    http://www.revistaphp.com.br/artigo.php?id=78

    Dúvidas estamos aí...abraço

    ResponderExcluir
  5. Junior, gostaria que me enviasse o mesmo link de tutorial que você mandou para o Flávio (formulário de contato para blogspot). Obrigada :)

    ResponderExcluir
  6. 1-como faço pra receber estes formularios no meu email?
    2-gostaria que me enviasse o mesmo link de tutorial (formulário de contato para blogspot
    e-mail:darnans@yahoo.com.br
    www.darnans.blogspot.com.br
    Dartagnan

    ResponderExcluir
  7. Fiz meu blogger, com uma pagina estática, quando mando enviar para o e-mail, vai para outro local diferente, Como concluir a pagina contato
    me ajude, não consigo fazer.
    atenciamente
    Dartagnan

    ResponderExcluir
  8. Boa tarde, amigo. Como sou novato em html, pergunto pq vc colocou o s campos do form dentro de uma lista ordenada? é realmente necessário? Obrigado !

    ResponderExcluir