Uma das seções mais importantes de qualquer site é o formulário de contato, que pode ser tão simples quanto adicionar alguns campos simples e um botão para enviar essas informações inseridas, mas sempre podemos ir um pouco mais longe e se formos criativos, implementar um formulário de contato que não só cumpre sua funcionalidade inerente, mas também fornece um efeito visual e amigável.
Vejamos os passos então a seguir para a implementação deste formulário que simulará um envelope que ao passar o cursor do mouse permitirá ao usuário preencher os dados dentro do que será uma carta, e tudo isso com o uso de HTML Y CSS3.
Ativos ou recursos
Primeiramente precisamos ter nosso envelope onde nossa carta irá, para isso usaremos duas imagens diferentes, uma de cima do envelope e outra de baixo, que combinadas com as transições nos darão o efeito que desejamos.
Como podemos ver, elas não são nada complicadas, no entanto, essas imagens estão no repositório criado para este exemplo que você encontrará no final do tutorial no link correspondente para download.
Construção de formulário
Vamos primeiro criar um arquivo HTML que será chamado contact_form.html que conterá nosso formulário como tal e a inclusão do arquivo .css que se encarregará de tratar seus estilos assim como as transições, vamos ver como fica:
Formulário de contatoAgora só precisamos criar nosso .css chamado styles.css e aí colocar estilos para nossa forma e usar as transições para gerar o efeito desejado, primeiro vamos mudar um pouco a aparência do nosso corpo para dar a ele a aparência de uma letra:Olá!
Mensagem:Insira seus detalhes
Nome: Email:
body {background: #ccc url ('img / bg_carta_fuera.png.webp'); cor: # 7c7873; família da fonte: 'helvetica';} p {sombra do texto: 0 1px 0 #fff; font-size: 24px;} # wrap {width: 530px; margem: 20px auto 0; altura: 1000px;} h1 {margin-bottom: 20px; alinhamento do texto: centro; tamanho da fonte: 48px; sombra do texto: 0 1px 0 # ede8d9; }Uma vez feito isso, vamos implementar as transições no div que contém o formulário que usaremos transição em suas diferentes variantes para cada navegador e com o valor facilidade de entrada Daremos a você o efeito de um início lento e um fim:
#form_wrap {overflow: hidden; altura: 446 px; posição: relativa; topo: 0px; -webkit-transição: todos os 1s .3s com facilidade de entrada; -moz-transição: todos os 1s facilitam a entrada .3s; -o-transição: todos os 1s facilitam a entrada .3s; transição: todos os 1s facilitam a entrada .3s;}Agora com os pseudo elementos antes da Y depois de vamos completar o efeito da carta saindo do envelope, vejamos:
#form_wrap: antes de {content: ""; posição: absoluta; inferior: 128px; esquerda: 0px; background: url ('img / before.png.webp'); largura: 530px; altura: 316px;} #form_wrap: após {conteúdo: ""; posição: absoluta; inferior: 0px; esquerda: 0; plano de fundo: url ('img / after.png.webp'); largura: 530 px; altura: 260 px; }Por último, adicionamos alguns estilos ao botão de envio para controlar a exibição e os efeitos nele:
#form_wrap input [type = submit] {position: relative; font-family: 'helvetica'; tamanho da fonte: 24px; cor: # 7c7873; sombra do texto: 0 1px 0 #fff; largura: 100%; alinhamento de texto: centro; opacidade: 0; fundo: nenhum; cursor: ponteiro; -moz-border-radius: 3px; -webkit-border-radius: 3px; raio da borda: 3px; -webkit-transit: opacity .6s easy-in-out 0s; -moz-transição: opacidade .6s easy-in-out 0s; -o-transição: opacidade .6s facilidade-in-out 0s; transição: opacidade .6s fácil de entrar 0s; } #form_wrap: passe o mouse sobre a entrada [type = submit] {z-index: 1; opacity: 1; -webkit-transição: opacidade .5s Easy-in-out 1.3s; -moz-transição: opacidade .5s easy-in-out 1.3s; -o-transição: opacidade .5s Easy-in-out 1.3s; transição: opacidade 0,5s facilidade de entrada 1,3s;}Então, vamos ver como fica nosso formulário de contato inicial quando o executamos no navegador:
PROLONGAR
Se passarmos o cursor do mouse sobre ele, veremos a funcionalidade que o formulário é exibido para poder inserir os dados e enviar:
PROLONGAR
Como podemos ver, a construção deste formulário foi bastante simples e o melhor de tudo é que não estamos presos a nenhuma biblioteca externa pelo que a sua implementação é bastante simples em qualquer site, só resta a todos estender o exemplo e realizar o funcionalidade do envio usando alguma linguagem de programação, como PHP, Rubi, Pitão o incluso Node.js.
