Formulário de Contato – Template Nuvem

Formulário de Contato – Template Nuvem

Adicionar esses modelos às suas páginas será incrivelmente fácil .

Tão fácil quanto ter que criar alguns arquivos HTML e CSS e depois especificar sua localização.

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.
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.

Neste tutorial, vamos criar um formulário de contato com formato de Nuvem com HTML e CSS.

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

temos dentro da tag <div> as tags <form>, <h2>, <input>, <textarea>, e <button>.

Essas tags usaremos para criar o nosso formulário de contato.

Vamos Adicionar o HTML

    <form class="formulario" method="post" action="#">
        
        <h2 class="title-form"><i class="icon icon-mail-read"></i> Fale Conosco </h2>

        <input type="text" name="nome" class="campo" placeholder="Nome" required="">
        <input type="text" name="email" class="campo" placeholder="E-mail" required="">
        <input type="text" name="assunto" class="campo" placeholder="Assunto" required="">
        <textarea name="mensagem" class="campo" rows="2" placeholder="Mensagem" required=""></textarea>
        
        <button class="btn floating">Enviar</button> 

    </form>

</div><!--Nuvem-->

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso formulário com css.

.formulario {

  display: block;
  width: 100%;
  height: auto;
  padding: 10px;
  z-index: 2;

}

.formulario .title-form { 

    font-family: 'Dancing Script', cursive;
    font-size: 2.2em;
    border-bottom: 1px #eaeaea solid;
    padding-bottom: 10px;
    text-align: left;
    color: #4bc2d9;

}

.formulario .campo { 

    border-top:1px transparent solid; 
    border-left:1px transparent solid; 
    border-bottom:1px #eaeaea solid; 
    border-right:1px transparent solid; 
    color:#414141; 
    font-family: 'Dancing Script', cursive;
    font-size:1.3em; 
    outline:none; 
    padding: 0.5em 0em;
    transition:0.4s;
    resize: none; 

}

.formulario .campo:focus { 

    border-top:1px transparent solid; 
    border-left:1px transparent solid; 
    border-bottom:1px #bfe2e8 solid; 
    border-right:1px transparent solid; 
    color:#29a0b5; 

}

.formulario textarea { height:80px; }

.formulario .btn {

    display: block;
    background-color: #4bc2d9;
    color: #fff;
    font-family: 'Dancing Script', cursive;
    font-size: 2em;
    cursor: pointer;
    border: none;
    padding: 10px;
    border-radius: 25px;
    width: 180px;
    height: 58px;
    position: relative;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: bold;

}

.formulario .btn:before,
.formulario .btn:after {
  
  content:"";
  background-color:#4bc2d9;
  border-radius:50%;
  display:block;
  position:absolute;
  z-index:-1;

}

.formulario .btn:before {

  width:44px;
  height:44px;
  top:-12px;
  left:28px;
  box-shadow:-50px 30px 0 -12px #4bc2d9;

}

.formulario .btn:after {
  
  bottom:-10px;
  right:26px;
  width:30px;
  height:30px;
  box-shadow:40px -34px 0 0 #4bc2d9, -28px -6px 0 -2px #4bc2d9, -24px 17px 0 -6px #4bc2d9, -5px 25px 0 -10px #4bc2d9; 

}

.floating { 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left:0px;
    margin-top: 0px;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    100%   { transform: translate(0, -0px); }   
}

.nuvem {

  display:flex;
  background-color:#fff;
  padding:20px;
  border-radius:30px;
  max-width:450px;
  height:auto;
  margin:auto;
  position:relative;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow: 3px 2px 8px 1px rgba(110, 161, 170, 0.8);

}

.nuvem:before,
.nuvem:after {
  content:"";
  background-color:#fff;
  border-radius:50%;
  display:block;
  position:absolute;
  z-index:1;
}
.nuvem:before {
  
  width: 60px;
  height: 60px;
  top: -27px;
  left: 20px;
  box-shadow: -50px 30px 0 -12px #fff, -60px -10px 0 -18px #fff;

}

.nuvem:after {

  bottom: -15px;
  right: 27px;
  width: 45px;
  height: 45px;
  box-shadow: 50px -40px 0 0 #fff, -30px -1px 0 -3px #fff, -20px 35px 0 -15px #fff;
  
}

/*Responsivo*/
/*768PX BREAKPOINT*/
@media (min-width:48em){

    .formulario .title-form {  font-size: 2.6em; }
    .formulario .campo      { font-size: 2em; }
    
} 

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

Veja o Resultado baixo!

Formulário de Contato – Template Nuvem

Baixar Código Veja Funcionando