Como fazer formulário de contato simples usando html e css 

Como fazer formulário de contato simples usando html e css

Este tutorial mostra como criar um formulario de contato simples com HTML e Css.

Nesta seção, projetaremos uma estrutura simples na tag <form>. 

temos dentro da tag <form>  as tags <input>, <textarea> e <button>. Essas tags usaremos para criar o nosso formulário de contato simples.

Vamos Adicionar o HTML

    <form class="formulario" method="post" action="#">

         <input type="text" name="nome" class="campo" placeholder="Nome" required=""/>   
         <input type="text" name="email" class="campo" placeholder="E-mail" required=""/>
         <textarea name="mensagem" class="campo" placeholder="Mensagem" required=""></textarea>
         <button type="submit" class="botao"> Enviar </button>
                
    </form>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para projetar o nosso Formulario.

.formulario { 

    max-width:480px; 
    margin:50px auto; 

}

.campo {

  color: #aca4a4;
  font-family: 'open_sansregular';
  font-size: 16px;
  border-radius: 3px;
  line-height: 20px;
  background-color: transparent;
  border: 2px solid #D2D2D2;
  transition: all 0.3s;
  padding: 11px;
  margin-bottom: 15px;
  width: 100%;
  box-sizing: border-box;
  outline: 0;

}

.campo:focus { 

    border: 2px solid #10ADDD; 
    color: #10ADDD;
}

textarea {
  
  height: 150px;
  line-height: 150%;
  resize:vertical;

}

.botao {

  font-family: 'open_sansregular';
  width: 100%;
  background:#10ADDD;
  color: #ffffff;
  border-radius:5px;
  border:0;
  cursor:pointer;
  font-size:22px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;

}

.botao:hover { background:#414141; }

Combinando as Duas seções acima Html e Css temos o seguinte Resultado !

Veja o Resultado baixo

Baixar Código Veja Funcionando