Formulário de contato html css efeito slide Up

Formulário de contato HTML pronto grátis

Formulário html com inputs Animado com css Efeito Card

Postado: 23 de março de 2023 Tempo de Leitura: 4 Minutos

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

com efeito SLIDE UP e no final vamos adicionar um Botão Pulse com Css.

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">
              <h1>Contato</h1>
            </div>

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

                <div class="box-pulse">
                    <button type="submit" class="botao-pulse"><i class="icon icon-heart-3"></i> Enviar</button>
                </div>

            </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 {

  font-size: 1.7em;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
  width: 280px;
  color: #fff;
  text-align: left;
  margin: auto;
  padding-bottom: 13px;


}
.title-form h1:before {

  background-color: #ff0083;
  content: '';
  display: block;
  height: 3px;
  width: 60%;
  margin-bottom: 5px;

}

.title-form h1:after {

  background-color: #ff0083;
  content: '';
  display: block;
  position: relative;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 20px;
  margin-top: 5px;

}

.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: 45px 10px;

}

/*input Animado*/

.input {

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

}

.input::-webkit-input-placeholder {

  color: #312d2d;
  font-weight: 300;

}
.input + label {
  
  display: inline-block;
  position: absolute;
  transform: translateX(0);
  top: 0;
  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: 3px;
  border-bottom-left-radius: 3px;
  overflow: hidden;
  color: #fff;

}
.input + label:before, .input + label:after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: -1;
  transition: all .3s ease-in-out;
}
.input + label:before {
  top: 6px;
  left: 5px;
  right: 5px;
  bottom: 6px;
  background: #FF0083;
}
.input + label:after {
  top: 0;
  bottom: 0;
  background: #FF0083;
}

.input:focus,
.input:active {
  
  color: #FF0083;
  padding: 10px 0 13px 10px;
  background: #fff;

}

.input:focus::-webkit-input-placeholder,
.input:active::-webkit-input-placeholder {
  color: #312d2d;
}
.input:focus + label,
.input:active + label {
  
  transform: translateY(-100%);
  padding: 10px 15px;

}
.input:focus + label:before,
.input:active + label:before {
  border-radius: 5px;
}
.input:focus + label:after,
.input:active + label:after {
  transform: translateY(100%);
}


/*TextArea*/
.textarea {

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

}

.textarea::-webkit-input-placeholder {

  color: #312d2d;
  font-weight: 300;

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

}
.textarea + label:before, .textarea + label:after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: -1;
  transition: all .3s ease-in-out;
}
.textarea + label:before {
  top: 6px;
  left: 5px;
  right: 5px;
  bottom: 6px;
  background: #FF0083;
}
.textarea + label:after {
  top: 0;
  bottom: 0;
  background: #FF0083;
}

.textarea:focus,
.textarea:active {
  color: #FF0083;
  padding: 10px 0 13px 10px;
  background: #fff;
}
.textarea:focus::-webkit-input-placeholder,
.textarea:active::-webkit-input-placeholder {
  color: #312d2d;
}
.textarea:focus + label,
.textarea:active + label {
  
  transform: translateY(-100%);
  padding: 10px 15px;

}

.textarea:focus + label:before,
.textarea:active + label:before {
  border-radius: 5px;
}
.textarea:focus + label:after,
.textarea:active + label:after {
  transform: translateY(100%);
}

/*Botão*/
.box-pulse { 
    width:100%; 
    width:250px; 
    margin:0 auto; padding:0 30px;
}
.box-pulse {
  

  text-decoration:none;
  display: inline-block;
  font-family:Verdana, Geneva, sans-serif;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;

}
.botao-pulse {
  
  border: none;
  cursor: pointer;
  padding: 0.8em 2.2em;
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
  background-color: #ff0083;
  border-radius:3px; 
  -webkit-animation: pulse 1s ease infinite;
  -moz-animation: pulse 1s ease infinite;
  -ms-animation: pulse 1s ease infinite;
  -o-animation: pulse 1s ease infinite;
  animation: pulse 1s ease infinite;
}
.botao-pulse:hover {
  color: #fff;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.1);
  }
  50% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1);
  }
  25% {
    -moz-transform: scale(1.1);
  }
  50% {
    -moz-transform: scale(1);
  }
  100% {
    -moz-transform: scale(1);
  }
}
@-ms-keyframes pulse {
  0% {
    -ms-transform: scale(1);
  }
  25% {
    -ms-transform: scale(1.1);
  }
  50% {
    -ms-transform: scale(1);
  }
  100% {
    -ms-transform: scale(1);
  }
}
@-o-keyframes pulse {
  
  0% { -o-transform: scale(1); }
  25% { -o-transform: scale(1.1); }
  50% { -o-transform: scale(1); }
  100% { -o-transform: scale(1); } 
}
@keyframes pulse { 
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}

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

Formulário de contato html css efeito slide Up, e o botão de envio com a Função de Pulsar

Veja o Resultado baixo!

Baixar Código Veja Funcionando

Publicado por: Loop Nerd

532 Visualizações

CSS Exemplos,Formulários HTML e CSS Prontos,Html e css,Inputs Html

Formulário de contato html css efeito slide Up

Formulário de contato HTML pronto grátis

Formulário html com inputs Animado com css Efeito Card

Deixe um comentário Cancelar resposta

Artigos Relacionados

Botão Html Css Background Animado

Menu Full Screen CSS

Menu

Newsletter

Perfil

Contato

E-mail