Formulário de contato totalmente responsivo

Um formulário de contato 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.

Primeiramente segue o código Html do formulário, que já tem as classes certas para utilizarmos para estilizá-lo depois com Css.

 <div class="pgContato">  
    <div class="contato">  
       <div class="formContato">  
          <form action="contato" class="" id="formContato" method="post" tabindex="1">  
             <input autofocus="" id="nome" name="nome" placeholder="Nome *" required=""    title="Digite o seu nome" type="text" value="" />  
             <input id="email" name="email" placeholder="Email *" required="" title="Digite seu e-mail" type="text" value="" />  
             <input id="site" name="site" placeholder="Telefone (Opcional)" title="Digite seu telefone, site, pode ser facebook, twitter, youtube, algo para o localizarmos" type="text" value="" />  
             <textarea id="conteudo" name="conteudo" placeholder="Deixe uma mensagem *" required="" title="Deixe uma mensagem *"></textarea>  
             <button class="botaoContato" name="botaoContato" title="Clique para enviar seu contato" type="submit">Enviar</button>  
          </form>  
       </div>  
    </div>  
 </div>  

Agora vamos utilizar o Css para estilizarmos o nosso formulário de contato, lembrando que o formulário será responsivo, ou seja, irá se ajustar a qualquer dispositivo, seja desktop, tablet ou celular. O visual que fiz é apenas um exemplo, você pode alterá-lo facilmente, basta apenas mudar o Css, seja a cor, a altura e etc.

Segue o código Css abaixo.

.formContato {
      width: 100%;
  }

  .formContato input {
      width: 90%;
      margin-left: 10px;
      margin-right: 10px;
  }

  .formContato textarea {
      width: 90%;
      margin-left: 10px;
      margin-right: 10px;
  }

  .botaoContato {
      margin-left: 10px;
      margin-right: 10px;
      margin-top: 1px;
  }

  .pgContato input {
      padding-left: 20px;
      color: #292929;
      font-size: 18px;
      background-color: #E9E9E9;
      border: 1px solid #E9E9E9;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      height: 40px;
      width: 100%;
      float: left;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
      border-left: 1px solid #ccc;
  }

  .pgContato textarea {
      padding-left: 20px;
      color: #292929;
      font-size: 18px;
      background-color: #E9E9E9;
      border: 1px solid #E9E9E9;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      height: 200px;
      width: 100%;
      float: left;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
      border-left: 1px solid #ccc; 
  }

  .botaoContato {
      border-radius: 4px;
      color: #fff;
      padding: 2px 40px;
      height: 40px;
      margin-top: 18px;
      opacity: 0.9;
      margin-bottom: 20px;
      cursor: pointer;
      background: rgb(162,27,27);
      background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
      background: -moz-linear-gradient(top, rgb(162,27,27) 0%, rgb(162,27,27) 20%, rgb(162,27,27) 93%, rgb(162,27,27) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(162,27,27)), color-stop(20%,rgb(162,27,27)), color-stop(93%,rgb(162,27,27)), color-stop(100%,rgb(162,27,27)));
      background: -webkit-linear-gradient(top, rgb(162,27,27) 0%,rgb(162,27,27) 20%,rgb(162,27,27) 93%,rgb(162,27,27) 100%);
      background: -o-linear-gradient(top, rgb(162,27,27) 0%,rgb(162,27,27) 20%,rgb(162,27,27) 93%,rgb(162,27,27) 100%);
      background: -ms-linear-gradient(top, rgb(162,27,27) 0%,rgb(162,27,27) 20%,rgb(162,27,27) 93%,rgb(162,27,27) 100%);
      background: linear-gradient(to bottom, rgb(162,27,27) 0%,rgb(162,27,27) 20%,rgb(162,27,27) 93%,rgb(162,27,27) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a21b1b', endColorstr='#a21b1b',GradientType=0 );
      display: inline-block;
      border: none;
      border-bottom: 1px solid #500707;
      border-right: 1px solid #500707;
  }

  .botaoContato:hover {
      opacity: 1.0;
      transition: 1s;
  }

E está ai seu formulário de contato, simples, bonito e responsivo.