Formulário html com inputs Animado com css Efeito Card

Formulário html com inputs Animado com css Efeito Card

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

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">
              <h2 class="title">Contato
                <p class="subtitle">Fale conosco agora</p>
              </h2>
            </div>

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

                <span>
                    <input type="text" class="input-card" 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-card" 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-card" 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-card" 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-pulse">
                     <input type="submit" value="Enviar mensagem" 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;
  color:#222; 
  font-size:35px; 
  font-weight:bold;
  text-transform: uppercase;
  letter-spacing:15px; 
  color:#ffa4b5;

}

.box-title .title .subtitle {

  line-height:2em; 
  padding-bottom:15px;
  text-transform: none;
  font-size:18px;
  font-weight: normal;
  font-family: 'open_sanslight';
  color:#f4f4f4; 
  letter-spacing:10px; 
  letter-spacing:none;

}

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

  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 4px;
  content: "";
  right: 45px; 
  margin:auto;
  background-color: #ffffff;

}

.box-title .title:before { 

  background-color:#d78b8b;
  left:45px; width:90px;

}

.box-formulario {

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

}

.formulario {

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

}


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

}

/*input Animado*/

.input-card {

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

}

.input-card::-webkit-input-placeholder {

  color: #242424;
  font-weight: 300;

}

.input-card + label {

  display: block;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 15px;
  text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
  background: #ffa4b5;
  color: #ffffff;
  transition: all .3s ease-in-out;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  transform-origin: right center;
  transform: perspective(300px) scaleX(1) rotateY(0deg);

}


.input-card:focus,
.input-card:active {
  
  color: #ffa4b5;
  padding: 10px 0 13px 10px;
  background: #fff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

}

.input-card:focus::-webkit-input-placeholder,
.input-card:active::-webkit-input-placeholder {
  color: #aaa;
}

.input-card:focus + label,
.input-card:active + label {
  transform: perspective(600px) translateX(-100%) rotateY(75deg);
}


/*TextArea*/
.textarea-card {

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

}

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

  color: #242424;
  font-weight: 300;

}

.textarea-card + label {
  
  height: 87px;
  line-height: 66px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 15px;
  text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
  background: #ffa4b5;
  color: #ffffff;
  transition: all .3s ease-in-out;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  transform-origin: right center;
  transform: perspective(300px) scaleX(1) rotateY(0deg);

}


.textarea-card:focus,
.textarea-card:active {
  
  color: #ffa4b5;
  padding: 10px 0 13px 10px;
  background: #fff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

}

.textarea-card:focus::-webkit-input-placeholder,
.textarea-card:active::-webkit-input-placeholder {
  color: #aaa;
}

.textarea-card:focus + label,
.textarea-card:active + label {
  transform: perspective(600px) translateX(-100%) rotateY(75deg);
}

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

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

}

.btn-submit:hover {
 
  background-color:#cd4962;

}

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

Formulário html com inputs Animado com css Efeito Card

Veja o Resultado baixo!

Baixar Código Veja Funcionando