Formulário html css pronto com input animado efeito width left

Formulário html css pronto com input animado efeito width left

Neste tutorial vamos criar um  Formulário com os inputs html animado.

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="title-form alt">
              <h1>Contato
                <p class="subtitle">Preencha o formulário.</p>
              </h1>
            </div>

            <form action="#" method="post">
                                            
                <span>
                    <input class="width-slide" id="nome" type="text" placeholder="Nome" autocomplete="off" required="" />
                    <label for="nome"> <i class="icon icon-user-1"></i> </label>
                </span>

                <span>
                    <input class="width-slide" id="email" type="text" placeholder="E-mail" autocomplete="off" required="" />
                    <label for="email"> <i class="icon icon-mail-1"></i> </label>
                </span>

                <span>
                    <input class="width-slide" id="assunto" type="text" placeholder="Assunto" autocomplete="off" required="" />
                    <label for="assunto"> <i class="icon icon-info"></i> </label>
                </span>

                <span>
                    <textarea class="width-slide" id="mensagem" name="mensagem" type="text" 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="btn-submit">
                </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 h1 {
  
  text-transform: capitalize;
  font-size:48px;
  color: #ffffff;
  margin-bottom: 50px;

}

.title-form h1:after {

    position: absolute;
    left: 0;
    bottom: 10;
    width: 65px;
    height: 3px;
    content: "";
    background-color: #009fff;

}

.title-form h1 .subtitle {

  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 6px;
  line-height: 3em;
  padding-left: 0.25em;
  color: #fff;
  padding-bottom: 10px;

}

.alt h1 {
  text-align:center;
}

.alt h1:after {
  left:50%; margin-left:-30px;
}

.box-formulario {

    width: 100%; /*ou*/
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #2b2424;
    padding:60px 0;

}

.formulario {

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

}


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

.width-slide {

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

}


.width-slide::-webkit-input-placeholder {
  
  color: #4c4c4c;
  font-weight: 300;

}

.width-slide + label {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 50px;
  height: 100%;
  padding: 10px 15px;
  text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
  background: #009FFF;
  color: #ffffff;
  transition: all .3s ease-in-out;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

.width-slide:focus,
.width-slide:active {

  color: #009FFF;
  padding: 10px 0 10px 35px;
  background: #fff;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;

}

.width-slide:focus::-webkit-input-placeholder,
.width-slide:active::-webkit-input-placeholder {

  color: #4c4c4c;

}


.width-slide:focus + label,
.width-slide:active + label {
  transform: translateX(-42%);
}

.btn-submit {

    color: #fff;
    background: #009fff;
    cursor: pointer;
    transition: 0.3s;
    border: none;
    padding: 10px 0;
    font-size: 23px;
    font-weight: bold;
    border-radius: 50px;
    width: 100%;

}

.btn-submit:hover {
 
    background-color: #535c6a;
    color: #fff;

}

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

Veja o Resultado baixo!

Formulário html css pronto com input animado efeito width left

Baixar Código Veja Funcionando