Formulário de contato HTML pronto grátis
Postado: 22 de março de 2023
Tempo de Leitura: 3 Minutos
- Página Inicial
- Códigos CSS Prontos
- Formulário de contato HTML pronto grátis
- Voltar
Formulário de contato HTML pronto grátis
Neste tutorial vamos criar um Formulário de contato com os inputs html animado com efeito UP LEFET.
Um formulário é um elemento essencial em qualquer site. Ele permite que os visitantes enviem informações sobre si mesmos ou sobre seus negócios.
Como estilizar CSS no HTML?
Podemos estilizar são input , textarea e select mas esteja ciente de que ao estilizar um campo de input não só o campo será estilizado como também os outros inputs como radio boxes, check boxes e os botões Submit (Enviar) e Clear (Limpar). É seguro estilizar font-family e font-size .
O que são formulários HTML?
Formulários HTML são um dos principais pontos de interação entre um usuário e um web site ou aplicativo. Eles permitem que os usuários enviem dados para o web site. Na maior parte do tempo, os dados são enviados para o servidor da web, mas a página da web também pode interceptar para usá-los por conta própria.
Nesta seção, projetaremos uma estrutura simples na tag <div>, <form>, <h1>, <p> , <span>, <input> <label> e a tag <type submit> para inserir o Botão de envio.
Essas são as tags que usaremos para criar o nosso Formulário.
Vamos Adicionar o HTML
<div class="box-formulario">
<div class="formulario">
<h1 class="title-form">Contato
<span class="subtitle-form">Fale conosco agora.</span>
</h1>
<form action="#" method="post">
<span>
<input type="text" class="input" id="nome" name="nome" placeholder="Nome" autocomplete="off" required=""/>
<label for="nome"> <i class="icon icon-user-1"></i> </label>
</span>
<span>
<input type="text" class="input" id="email" name="email" placeholder="E-mail" autocomplete="off" required=""/>
<label for="email"> <i class="icon icon-mail-1"></i> </label>
</span>
<span>
<input type="text" class="input" id="assunto" name="assunto" placeholder="Assunto" autocomplete="off" required=""/>
<label for="assunto"> <i class="icon icon-info"></i> </label>
</span>
<span>
<textarea type="text" class="textarea" id="mensagem" name="mensagem" rows="3" placeholder="Mensagem" autocomplete="off" required=""></textarea>
<label for="mensagem"> <i class="icon icon-comment"></i> </label>
</span>
<span>
<input type="submit" value="Enviar" class="botao rotacao">
</span>
</form>
</div>
</div><!--Box Formulario-->
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Formulário.
.title-form {
position: relative;
padding: 0;
margin: 0;
font-family: "Raleway", sans-serif;
font-weight: 300;
font-size: 45px;
letter-spacing: 6px;
color: #ffffff;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.title-form .subtitle-form {
display: block;
font-size: 0.5em;
line-height: 1.3;
}
.title-form em {
font-style: normal;
font-weight: 600;
}
.title-form {
text-transform: capitalize;
}
.title-form:before {
position: absolute;
left: 42%;
bottom: 0;
width: 60px;
height: 2px;
content: "";
background-color: #ffcb00;
}
.title-form .subtitle-form {
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 10px;
color: #ffffff;
padding-bottom: 25px;
margin: 25px 0;
}
.box-formulario {
width: 100%;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
background-color: #312d2d;
padding:60px 0;
}
.formulario {
width: 700px;
background: #312d2d;
padding: 60px 5%;
text-align: center;
}
.formulario span {
position: relative;
display: flex;
margin: 35px 10px;
}
/*input Animado*/
.input {
display: inline-block;
width: 100%;
padding: 10px 0 13px 95px;
font-family: "Open Sans", sans;
font-weight: 400;
color: #4C4C4C;
background: #ffffff;
border: 0;
border-radius: 3px;
outline: 0;
transition: all .3s ease-in-out;
}
.input::-webkit-input-placeholder {
color: #4C4C4C;
font-weight: 300;
}
.input + label {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 80px;
padding: 10px 15px;
text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
background: #ffcb00;
color: #ffffff;
transition: all .4s ease-in-out;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
transform-origin: left bottom;
z-index: 1;
}
.input + label:before, .input + label:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 3px;
background: #ffcb00;
transform-origin: left bottom;
transition: all .4s ease-in-out;
pointer-events: none;
z-index: -1;
}
.input + label:before {
background: rgba(0, 0, 0, 0.5);
z-index: -2;
right: 20%;
}
.input:focus,
.input:active {
color: #333333;
padding: 10px 0 13px 60px;
background: #fff;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.input:focus::-webkit-input-placeholder,
.input:active::-webkit-input-placeholder {
color: #4C4C4C;
}
.input:focus + label,
.input:active + label {
transform: rotate(-45deg);
border-radius: 3px;
}
.input:focus + label:before,
.input:active + label:before {
transform: rotate(10deg);
}
/*TextArea*/
.textarea {
display: inline-block;
width: 100%;
height: 100px;
padding: 10px 0 12px 95px;
font-family: "Open Sans", sans;
font-weight: 400;
color: #4C4C4C;
background: #ffffff;
border: 0;
border-radius: 3px;
outline: 0;
transition: all .3s ease-in-out;
}
.textarea::-webkit-input-placeholder {
color: #4C4C4C;
text-indent: 0;
font-weight: 300;
}
.textarea + label {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 100px;
padding: 33px 15px;
text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
background: #ffcb00;
color: #ffffff;
transition: all .4s ease-in-out;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
transform-origin: left bottom;
z-index: 1;
}
.textarea + label:before, .textarea + label:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 3px;
background: #ffcb00;
transform-origin: left bottom;
transition: all .4s ease-in-out;
pointer-events: none;
z-index: -1;
}
.textarea + label:before {
background: rgba(0, 0, 0, 0.5);
z-index: -2;
right: 20%;
}
.textarea:focus,
.textarea:active {
color: #333333;
padding: 10px 0 12px 60px;
background: #fff;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.textarea:focus::-webkit-input-placeholder,
.gate:active::-webkit-input-placeholder {
color: #4C4C4C;
}
.textarea:focus + label,
.gate:active + label {
transform: rotate(-45deg);
border-radius: 3px;
}
.textarea:focus + label:before,
.textarea:active + label:before {
transform: rotate(10deg);
}
/*Botão*/
.botao {
width: 160px;
border: none;
float: left;
padding: 0.5em 0;
background-color: #ffcb00;
text-decoration: none;
color: #ffffff;
cursor: pointer;
font-family: 'open_sansregular';
font-size: 1.5em;
border-radius: 3px;
}
.rotacao {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.rotacao:hover, .rotacao:focus, .rotacao:active {
-webkit-transform: scale(1.2) rotate(-3deg);
transform: scale(1.1) rotate(-3deg);
background:#535c6a;
transition:0.3s;
box-shadow: 0px 6px 3px -1px rgba(0, 0, 0, 0.5);
}
Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Formulário de contato HTML pronto grátis
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
872 Visualizações
Excellent post. I definitely appreciate this website.
Continue the good work!
Hi! Someone in my Facebook group shared this site with us so I came to check it out.
I’m definitely loving the information. I’m bookmarking and will
be tweeting this to my followers! Excellent blog and superb design.
Great article! This is the kind of information that should be shared across the internet.
Shame on Google for not positioning this publish upper! Come on over and talk over with my site
. Thanks =)
Useful info. Fortunate me I found your site accidentally, and I’m shocked why this
twist of fate didn’t took place earlier! I bookmarked it.
Pretty portion of content. I just stumbled upon your site and in accession capital to say that I get in fact loved account your
weblog posts. Anyway I’ll be subscribing to your augment or even I fulfillment you access consistently fast.
Thank you a lot for sharing this with all folks you
really know what you are talking about! Bookmarked.
Please additionally discuss with my site =). We will have a link change contract between us
Simply desire to say your article is as astonishing. The clarity for your post is just cool
and i can suppose you are a professional on this subject.
Fine along with your permission allow me to take hold of your
RSS feed to keep updated with impending post.
Thanks a million and please keep up the gratifying work.
I constantly spent my half an hour to read this web site’s
articles everyday along with a cup of coffee.
It’s not my first time to go to see this site, i am visiting this website dailly and get nice
data from here all the time.
What’s up Dear, are you truly visiting this web site regularly, if so after that you will without doubt get pleasant experience.
Nice post. I was checking continuously this blog and I’m impressed!
Very useful info specifically the last part 🙂 I care for such info a lot.
I was seeking this particular info for a very long
time. Thank you and best of luck.
I read this paragraph completely on the topic of the difference of most up-to-date and preceding technologies, it’s amazing article.