Formulário html com inputs Animado com css Efeito Slide Hidden

Formulário html com inputs Animado com css Efeito Slide Hidden

Neste tutorial vamos criar um  Formulário de contato com os inputs html animado com css com efeito Slide Hidden

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">
            
            <div class="box-title">
              <h1 class="title">Contato<span class="subtitle">Fale conosco agora.</span></h1>
            </div>

            <form action="#" method="post">
                     

                <span>
                    <input type="text" class="input-hidden" id="nome" name="nome" placeholder="Nome" autocomplete="off" required=""/>
                    <label for="nome"> <i class="icon icon-user-outline"></i> </label>
                </span>

                <span>
                    <input type="text" class="input-hidden" id="email" name="email" placeholder="E-mail" autocomplete="off" required=""/>
                    <label for="email"> <i class="icon icon-mail-3"></i> </label>
                </span>

                <span>
                    <input type="text" class="input-hidden" 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-hidden" id="mensagem" name="mensagem" rows="3" placeholder="Mensagem" autocomplete="off" required=""></textarea>
                    <label for="mensagem"> <i class="icon icon-bubble-4"></i> </label>
                </span>

                <div class="box-btn">
                     <input type="submit" value="Enviar" class="btn-submit">
                </div>

            </form>

        </div>

    </div><!--Box Formulario--> 

Vamos Adicionar o CSS

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

.box-title .title {
   
  position: relative; 
  text-align:center; 
  font-size:35px; 
  text-transform:uppercase; 
  color:#358941; 
  letter-spacing:1px;
  font-family:'open_sansregular'; 

}

.box-title .title .subtitle {
  
  margin-top: 5px;
  font-size:15px; 
  color:#4c4c4c; 
  word-spacing:1px; 
  font-weight:bold; 
  letter-spacing: 7px;
  text-transform: uppercase; 
  font-family:'open_sansregular'; 
  font-weight:500;
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  grid-template-rows: 27px 0;
  grid-gap: 20px;
  align-items: center;

}

.box-title .title .subtitle:after,.box-title .title .subtitle:before {

  content: " ";
  display: block;
  border-bottom: 1px solid #7aa680;
  border-top: 1px solid #7aa680;
  height: 6px;
  background-color: transparent;

}

.box-formulario {

    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #bad5be;
    padding:60px 0;

}

.formulario {

    width: 700px;
    background: #bad5be;
    padding: 60px 5%;
    text-align: center;

}


.formulario span {
  position: relative;
  display: flex;
  margin: 45px 10px;

}

/*input Animado*/

.input-hidden {

  display: inline-block;
  width: 100%;
  padding: 10px 10px 13px 60px;
  font-family: "Open Sans", sans;
  font-weight: 400;
  color: #232323;
  background: #ffffff;
  border: 0;
  border-radius: 50px;
  outline: 0;
  transition: all .3s ease-in-out;

}

.input-hidden::-webkit-input-placeholder {

  color: #232323;
  font-weight: 300;

}

.input-hidden + label {
  
  display: inline-block;
  position: absolute;
  transform: translateX(-2px);
  top: 0px;
  left: 0;
  padding: 10px 15px;
  text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
  transition: all .3s ease-in-out;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  overflow: hidden;
  width: 50px;
  color: #9bdba4;

}

.input-hidden + label:before, .input-hidden + label:after {
  
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: -1;
  transition: all .3s ease-in-out;

}

.input-hidden + label:before {
  
  top: 5px;
  bottom: 5px;
  background: #43a351;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;

}

.input-hidden + label:after {
  top: 0;
  bottom: 0;
  background: #358941;
}

.input-hidden:focus,
.input-hidden:active {

  padding: 10px 10px 13px 42px;
  color: #358941;
  background: #fff;

}

.input-hidden:focus::-webkit-input-placeholder,
.input-hidden:active::-webkit-input-placeholder {

  color: #358941;

}

.input-hidden:focus + label,
.input-hidden:active + label {

  transform: translateX(-35%);
  color: #fff;

}

.input-hidden:focus + label:after,
.input-hidden:active + label:after {

  transform: translateX(101%);

}


/*TextArea*/

.textarea-hidden {

  display: inline-block;
  width: 100%;
  height: 78px;
  padding: 10px 10px 13px 60px;
  font-family: "Open Sans", sans;
  font-weight: 400;
  color: #232323;
  background: #ffffff;
  border: 0;
  border-radius: 50px;
  outline: 0;
  transition: all .3s ease-in-out;
  resize: none;

}

.textarea-hidden::-webkit-input-placeholder {

  color: #232323;
  font-weight: 300;

}

.textarea-hidden + label {
  
  display: inline-block;
  position: absolute;
  transform: translateX(-2px);
  top: 0px;
  left: 0;
  padding: 0px 0px;
  text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
  transition: all .3s ease-in-out;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  overflow: hidden;
  width: 50px;
  height: 79px;
  line-height: 89px;
  color: #9bdba4;

}

.textarea-hidden + label:before, .textarea-hidden + label:after {
  
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: -1;
  transition: all .3s ease-in-out;

}

.textarea-hidden + label:before {
  
  top: 5px;
  bottom: 5px;
  background: #43a351;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;

}

.textarea-hidden + label:after {
  top: 0;
  bottom: 0;
  background: #358941;
}

.textarea-hidden:focus,
.textarea-hidden:active {
  
  padding: 10px 10px 13px 42px;
  color: #377D6A;
  background: #fff;

}

.textarea-hidden:focus::-webkit-input-placeholder,
.textarea-hidden:active::-webkit-input-placeholder {

  color: #358941;

}

.textarea-hidden:focus + label,
.textarea-hidden:active + label {
  
  top:18px;
  width: 60px;
  height: 50px;
  line-height: 55px;
  transform: translateX(-35%);
  color: #fff;

}

.textarea-hidden:focus + label:after,
.textarea-hidden:active + label:after {

  transform: translateX(101%);

}

/*Botão*/
.box-btn { 

 width: 100%;
 padding: 0 10px;
 float: left;

}

.btn-submit {

  color: #fff;
  background: #43a351;
  cursor: pointer;
  border: none;
  border-radius: 50px;
  transition: 0.5s;
  width: 100%;
  padding: 0.5em 1em;
  font-size: 1.3em;
  font-weight: bold;
  float: left;

}

.btn-submit:hover {
 
  background-color:#4c4c4c;

}

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

Formulário html com inputs Animado com css Efeito Slide Hidden

Veja o Resultado baixo!

Baixar Código Veja Funcionando