Formulário de Contato Html Pronto

Formulário de Contato Html Pronto

Este tutorial mostra como criar um formulário de contato HTML pronto.

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

temos dentro da tag <form> as tags <label><span>, <input>, <textarea> e <button>.

Essas tags usaremos para criar o nosso formulário.

Vamos Adicionar o HTML

    <div class="formularioContato">
        
        <form action="#" method="post" enctype="multipart/form-data">

            <label>
                <span><i class="icon icon-user-1"></i> Nome</span>
                <input type="text" name="nome" required="">
            </label>
            
            <label>
                <span><i class="icon icon-email"></i> E-mail</span>
                <input type="text" name="email" class="fade_8S">
            </label>

            <label>
                <span><i class="icon icon-flag"></i> Assunto</span>
                <input type="text" name="assunto" required="">
            </label>
            
            <label>
                <span><i class="icon icon-comment"></i> Mensagem</span>
                 <textarea name="mensagem" rows="3" required=""></textarea> 
            </label>
           
            <input type="hidden" name="acao" value="enviar" />
            <button class="btn-envia" title="Enviar"><b class="icon icon-paper-plane-o"> Enviar</b></button>

        
        </form>

    </div><!--Formulario Contato-->

Vamos Adicionar o CSS

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

.formularioContato { 

    max-width:600px; 
    height:auto; 
    float:none; 
    margin:auto; 
    padding:1em; 
    margin-bottom:1em; 
    border-radius:6px; 
    background:#fff; 
    box-shadow: 1px 0px 1.2px 0px #ccc; 
    position:relative; 
}

.formularioContato:before { 

    width:0; 
    height:0; 
    border:15px solid transparent; 
    border-bottom-color:#fff; 
    content:""; 
    position:absolute; 
    left:6%; 
    top:-4.5%; 
    margin-top:-4px; 
    margin-left:6px; 
    z-index:2;

}

.formularioContato label  { 

    float:left; 
    width:100%; 
    margin-bottom:1.2em; 

}

.formularioContato label span {

    width: 100%;
    float: left;
    color: #999;
    margin-bottom: 6px;
    font-family:'open_sansregular'; 

}

.formularioContato label input  { 

    font-size:1em; 
    color:#555; 
    font-family:'open_sansregular'; 
    outline:none; 
    border:1px #dee5ed solid; 
    border-radius:4px; 
    padding:0.6em; 
    transition: 0.3s;  

}

.formularioContato label select { 

    font-size:1em; 
    color:#555; 
    border:1px #dee5ed solid; 
    border-radius:4px; 
    padding:0.6em; 
    outline:none; 
    transition: 0.3s;  

}

.formularioContato label textarea { 

    font-size:1em; 
    color:#555; 
    border:1px #dee5ed solid; 
    border-radius:4px; 
    padding:0.6em; 
    outline:none;
    transition: 0.3s;   

}

.formularioContato label input:focus    { box-shadow:0 0 5px 0px rgb(178,216,231); border:1px rgb(37,174,230) solid; color:rgb(37,174,230);}
.formularioContato label select:focus   { box-shadow:0 0 5px 0px rgb(178,216,231); border:1px rgb(37,174,230) solid; }
.formularioContato label textarea:focus { box-shadow:0 0 5px 0px rgb(178,216,231); border:1px rgb(37,174,230) solid; color:rgb(37,174,230);}

.formularioContato button.btn-envia { 

    background-color:rgb(37,174,230); 
    width:100%; display:block; 
    margin:auto; cursor:pointer; 
    border-radius:4px;  
    border:0; 
    padding:0.8em 0em; 
    color:#fff; 
    font-size:1.3em; 
    font-family:'open_sansbold'; 
    text-align: center;
    transition: 0.3s;   

}

.formularioContato button.btn-envia:hover { 

    background-color:#333; 

}

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

Veja o Resultado baixo

Baixar Código Veja Funcionando