Como Adicionar Rótulos Flutuantes a Campos de Formulários em Divi

Adicionar rótulos flutuantes a campos de formulário no Divi pode impulsionar o design e a UX de qualquer formulário Divi de uma forma sutil, mas poderosa. Qualquer formulário de site (não apenas Divi) geralmente inclui algum tipo de campo de entrada e um rótulo para esse campo de entrada. Por exemplo, um formulário pode ter um campo de entrada de texto para um nome onde você pode inserir o texto (ou nome) e um rótulo para a caixa de entrada desse campo (ou seja, “Nome”). Este rótulo pode estar visível ou oculto dependendo do estilo do formulário. Além de um rótulo, os campos de entrada também podem conter um pseudoelemento de espaço reservado que serve como uma espécie de rótulo temporário dentro do campo de entrada que permanece visível até que o usuário insira um valor de entrada. No Divi, o design padrão oculta o elemento do rótulo e mostra apenas o texto do espaço reservado. Adicionar um rótulo flutuante a um formulário Divi permitirá que os designers mantenham a sensação elegante do estilo de formulário “apenas espaço reservado” e também revelem (ou flutuem) o rótulo acima do campo sempre que o usuário adicionar um valor.

Neste tutorial, mostraremos como adicionar rótulos flutuantes a um formulário de opção de e-mail Divi. Para fazer isso, usaremos o construtor Divi para projetar o formulário de opção de e-mail. Em seguida, adicionaremos CSS e JQuery personalizados para exibir esses rótulos ocultos quando um usuário focar no campo.

Vamos começar!

Espiada

Aqui está uma rápida olhada no design que construiremos neste tutorial.

Baixe o Layout GRATUITAMENTE

Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

https://youtu.be/j1m14XFztdc

Inscreva-se no nosso canal no Youtube

Para importar o layout da seção para sua biblioteca Divi, navegue até a biblioteca Divi.

Clique no botão Importar.

No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.

Em seguida, clique no botão importar.

Feito isso, o layout da seção estará disponível no Divi Builder.

Vamos para o tutorial, vamos?

O que você precisa para começar

Para começar, você precisará fazer o seguinte:

1. Se ainda não o fez, instale e ative o Divi Theme.
2. Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
3. Escolha a opção “Build From Scratch”.

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Adicionando Rótulos Flutuantes a Campos de Formulários em Divi

Criação do formulário de inscrição por e-mail

Adicione uma linha de uma coluna à seção padrão no Divi Builder.

Adicione um formulário de optin por email à coluna.

Abra o modal Configurações de aceitação de e-mail. Na guia de conteúdo, atualize o texto do título e exclua o texto do corpo.

Certifique-se de vincular seu provedor de serviços de conta de e-mail. Caso contrário, o email optin não aparecerá em uma página ativa.

Em seguida, adicione a seguinte cor de fundo à opção de e-mail:

• Cor de fundo: # 1f4b74

Na guia de design, atualize o layout do formulário:

• Layout: corpo na parte superior, formulário na parte inferior

Em seguida, atualize os estilos de campo da seguinte maneira:

• Cor de fundo dos campos: transparente
• Cor do texto dos campos: #ffffff
• Margem dos Campos: 1.5em topo
• Preenchimento dos campos: 0,5em superior, 0,5em inferior, 1em à esquerda, 1em à direita
• Tamanho do texto dos campos: 1,2em
• Altura da linha dos campos: 2em

Em seguida, atualize os estilos de borda do campo:

• Campos arredondados: 0px
• Largura da borda inferior dos campos: 2 px
• Cor da borda inferior dos campos: #ffffff

Vamos também atualizar os estilos de fonte do título:

• Peso da fonte do título: negrito
• Estilo da fonte do título: TT
• Alinhamento do Texto do Título: Centro

E agora vamos definir o estilo do botão.

• Use estilos personalizados para botão: SIM
• Cor do texto do botão: # 1f4b74
• Cor de fundo do botão: #ffffff
• Espaçamento das letras dos botões: 0,1em
• Peso da fonte do botão: negrito
• Estilo da fonte do botão: TT

Para nossa última personalização de design, vamos adicionar max-width e padding ao formulário da seguinte maneira:

• Largura máxima: 500px
• Preenchimento: 5% superior, 5% inferior, 3% esquerdo 3% direito

Finalmente, precisamos adicionar uma classe CSS ao módulo para que possamos direcioná-la com nosso código CSS e JQuery na próxima etapa.

Adicionando o Código Personalizado

Para adicionar CSS e JQuery personalizados, adicione um módulo de código no módulo de formulário de aceitação de e-mail.

O CSS

Na caixa de conteúdo do código, cole o seguinte CSS, certificando-se de envolver o CSS nas tags de estilo necessárias:

.et-float-labels p {
  position: relative !important;
}

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

O JQuery

Sob a tag de estilo final, cole o seguinte JQuery e envolva-o com as tags de script necessárias.

jQuery(document).ready(function ($) {
  var $floatLabelInput = $(".et-float-labels .input");
  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });
  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });
});

Quebrando o Código

Sobre o CSS

Primeiro, direcionamos os campos e damos a eles uma posição relativa para que possamos dar ao elemento label uma posição absoluta dentro do campo (ou elemento p).

.et-float-labels p {
  position: relative !important;
}

Em seguida, fornecemos o elemento de rótulo no formulário e a posição absoluta com outro estilo que posiciona o texto do rótulo de forma que ele se sobreponha ao texto de posicionamento. O display: block substitui a propriedade default display: hidden para que o rótulo esteja pronto para ser mostrado. Então, nós o ocultamos com a visibilidade oculta.

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

Em seguida, mostramos, dimensionamos e traduzimos (movemos) o rótulo com uma animação de slide para cima, uma vez que ele recebe a classe “ativa” controlada pelo JQeury.

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

O resto do CSS trata de ocultar o espaço reservado com uma transição. Existem muitas linhas para fazer isso porque cada navegador requer diferentes prefixos para direcionar o pseudoelemento de espaço reservado. Mas a ideia é simples - mude a cor do espaço reservado para transparente.

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

Sobre o JQuery

Primeiro, definimos a variável $ floatLabelInput como o elemento de entrada em cada campo do formulário.

  var $floatLabelInput = $(".et-float-labels .input");

Em seguida, usamos o manipulador de eventos de foco com uma função para adicionar uma classe (“ativa”) ao elemento de rótulo (o irmão anterior do elemento de entrada) sempre que o elemento de entrada está em foco. Depois que a classe “ativa” é adicionada ao rótulo, o rótulo é mostrado, dimensionado e movido para o lugar acima da entrada com o CSS correspondente.

  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });

Por último, usamos o manipulador de eventos blur com uma função que determina quando manter a classe “ativa” no rótulo. Se a entrada não tiver um valor, ela permanecerá ativa mesmo quando o campo de entrada não estiver em foco. Se não tiver um valor, a classe é removida e o estado padrão do campo retorna.

  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });

Adicionar e remover a classe usando os manipuladores de eventos “focus” e “blur” (em vez de “click”) permite que o usuário veja o efeito mesmo quando estiver navegando usando apenas um teclado (ou seja, pressionando tab para percorrer os campos).

Resultado final

Aqui está o resultado final de nossos rótulos flutuantes em campos de formulário em um formulário de opção de e-mail Divi.

Pensamentos finais

Adicionar rótulos flutuantes a um formulário Divi não é tão difícil. Projetar o formulário de opção de e-mail (ou qualquer formulário Divi) é surpreendentemente fácil. No entanto, ao adicionar rótulos flutuantes, lembre-se de personalizar o tamanho e o espaçamento dos campos do formulário para deixar a quantidade certa de espaço para o rótulo flutuante. Depois disso, usamos CSS customizado para ocultar ou mostrar efetivamente o espaço reservado quando o usuário foca no campo. Como cada navegador requer prefixos diferentes para direcionar o pseudoelemento de espaço reservado, é importante acertar. O JQuery que adicionamos adiciona e remove uma classe no elemento de rótulo que o exibirá quando necessário. Em suma, é uma microinteração sólida que aumenta a experiência do usuário.

Sinta-se à vontade para usar esse mesmo processo em outros formulários Divi (como um login ou formulário de contato) também. Apenas não se esqueça de adicionar a classe personalizada no formulário antes de adicionar o código personalizado. Depois disso, você pode precisar ajustar as configurações de design dos campos do formulário para garantir que haja espaço suficiente para os rótulos flutuantes.

Estou ansioso para ouvir de você nos comentários.

Saúde!