Um formulário de contato padrão
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.
Muito bom mesmo!!!
ResponderExcluirExcelente formulário!!!
ResponderExcluirParabéns!!!
Cara, como coloco o email que irá receber as mensagens?
ResponderExcluirAE CARA RESPONDE A PERGUNTA DO ( SEJA SELADO ) PORQUE TAMBÉM TO COM DÚVIDAS;OBRIGADO.
ResponderExcluirMuito obrigado por disponibilizar o código, fiz algumas alterações e se encaixou perfeitamente em meu projeto
ResponderExcluirmas depois do visitante enviar o formulario, pra onde é enviado o formulario? pra que mail?
ResponderExcluirComo faço para mudar a cor do butão?
ResponderExcluirMe ajudou Muito, vc nem faz idéia. Cara Muito Obrigado e q deus de abençoe
ResponderExcluir