Formulário Html Css Vintage

Formulário Html Css Vintage

Este tutorial mostra como criar um Formulário estilo Retro com HTML e Css.

Nesta seção, projetaremos uma estrutura simples na tag <div class=”box-form”>. 

temos dentro da tag <div> a tag <h1>, <i>, <span>, <label>, <input>, <select> e  o <button>. Essas tags usaremos para criar o nosso formulário Retro.

Vamos Adicionar o HTML

    <div id="box-form">

      <h1 class="title-form"> <span>&#9671;</span> Contato <span>&#9671;</span></h1>
      <i class="icon icon-telephone-1"></i>

      <div class="icone-retro">

        <span class="telefone-retro">
            <img src="img/telefone-retro.png" alt="telefone-retro">
        </span>
      
      </div>
      
      <form action="#" method="post" id="contact_form">
      
        <div class="nome">
          <label for="name"></label>
          <input type="text" placeholder="Nome" name="nome" id="name_input" required>
        </div>
      
        <div class="email">
          <label for="email"></label>
          <input type="email" placeholder="E-mail" name="email" id="email_input" required>
        </div>

        <div class="whatsapp">
          <label for="name"></label>
          <input type="text" placeholder="Whatsapp" name="whatsapp" id="telephone_input" required>
        </div>
        
        <div class="assunto">
        
          <label for="subject"></label>
          <select placeholder="Subject line" name="assunto" id="subject_input" required>
            <option disabled hidden selected>Assunto</option>
            <option>Html5</option>
            <option>Css3</option>
            <option>jQuery</option>
            <option>WordPress</option>
          </select>
        
        </div>
        
        <div class="mensagem">
          <label for="mensagem"></label>
          <textarea name="mensagem" placeholder="mensagem" id="message_input" cols="20" rows="2" required></textarea>
        </div>

        <div class="submit">
          <input type="submit" value="Enviar" id="btn-form" />
        </div>

      </form><!--Fim Form-->

    </div><!--Fim Box Form-->

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para projetar o nosso formulário estilo Retro.

NOTA: usamos uma imagem de fundo com textura de papel antigo para deixar o formulario com estilo bem retro.

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, input, select, textarea {
  color: #5A5A5A;
  font: inherit;
  margin: 0;
}

input {
  line-height: normal;
}

textarea {
  overflow: auto;
}

#box-form {

background: url('../img/bg-retro.jpg');
background-position: center center;
border: solid 3px #a29a87;
max-width: 600px;
margin: 60px auto;
position: relative;

}

form {
   
   width: 100%;
   padding: 1.5em;

}

.title-form {

    color: #474544;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    float: left;
    margin-top: 30px;
    margin-bottom: 30px;

}

.title-form:after {
 
    content: "";
    position: absolute;
    left: 45%;
    top: 85px;
    width: 10%;
    height: 3px;
    background-color: #474544;
    z-index: 1;

}

.title-form span { font-size:18px; }

.icone-retro {
   margin: 20px auto;
   width: 100%;
}

.telefone-retro {
  
    width: 80px;
    height: 80px;
    margin: auto;
    display: flex;

}

.telefone-retro img { width:100%; height:100%; }

input[type='text'], [type='email'], select, textarea {
   
    background: none;
    border: none;
    border-bottom: solid 2px #474544;
    color: #474544;
    font-size: 1.000em;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0em 0 1.875em 0;
    padding: 0 0 0.875em 0;
    text-transform: uppercase;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

input[type='text']:focus, [type='email']:focus, textarea:focus {
    
    outline: none;
    padding: 0 0 0.875em 0;

}

.nome     { float:left; width:100%; }
.email    { float:left; width:100%; }
.assunto  { float:left; width:100%; }
.whatsapp { float:left; width:100%; }
.mensagem { float:left; width:100%; }

select {
  background: url('../img/arrow-down.png') no-repeat right;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}


textarea {
    
    line-height: 100%;
    height: 90px;
    resize: none;
    width: 100%;
}

::-webkit-input-placeholder {
    color: #474544;
}

:-moz-placeholder { 
    color: #474544;
    opacity: 1;
}

::-moz-placeholder {
    color: #474544;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #474544;
}

#btn-form {
  
  background: none;
  border: solid 2px #474544;
  color: #474544;
  cursor: pointer;
  display: inline-block;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 0.875em;
  font-weight: bold;
  outline: none;
  padding: 20px 35px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#btn-form:hover {
  background: #474544;
  color: #F2F3EB;
}

/*Responsivo*/
/*960PX BREAKPOINT*/
@media (min-width:60em){

.title-form { font-size:33px; letter-spacing:8px; }

}

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

Veja o Resultado baixo

Formulário Html Css Vintage

Baixar Código Veja Funcionando