- Página Inicial
- Códigos CSS Prontos
- Formulário de Contato Html Pronto
- Voltar
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
Publicado por: Loop Nerd
5.090 Visualizações
Deixe um comentário