Personalização Avançada de Formulário Incorporado (com HTML e CSS)

A Ferramenta de Auditoria Incorporável foi projetada para ser simples e facilmente editável. Nós propositalmente não comprimimos ou ofuscamos o código incorporado como outras ferramentas de terceiros fazem, o que impede explicitamente que você personalize o código.

Em vez disso, expomos todo o CSS em um bloco de código simples acima do código incorporado HTML para que você possa estilizar objetos de "formulário" desde que tenha algum conhecimento básico de CSS.

Tudo o que é necessário é adicionar algumas linhas de CSS nas seções relevantes para personalizar completamente a aparência e a sensação. Se você tiver conhecimento intermediário de HTML, poderá modificar a estrutura do formulário em si.

Você também pode adicionar suas próprias funções JavaScript (ex: [validação] extra de formulário) ou você pode chamar outras funções / sistemas no onSubmit ou onClick dentro do formulário.

A única recomendação de personalização que temos é não fazer nenhuma alteração no bloco de código JavaScript, pois isso pode causar erros. Relacionado a isso, sugerimos que você não mova os elementos do "formulário" muito longe de sua ordem original, já que algumas referências de JavaScript dependem do posicionamento relativo dos objetos no "formulário".

Além disso, recomendamos fortemente e incentivamos que você personalize o formulário para que ele corresponda à aparência e ao estilo do seu site. Deve parecer uma parte natural da experiência do seu site e não parecer um widget "adicionado".

Como este formulário incorporado da Digital Butter:

Nós sugerimos isso porque vemos as agências alcançarem níveis mais altos de geração de leads quando elas personalizam o formulário adequadamente para combinar com o estilo do [site] delas.

Neste guia, vamos examinar as 3 personalizações avançadas mais comuns para o "Embed Form":

1. 1. Validação avançada de formulários
   2. Disparo de um evento do Google Analytics ou Facebook durante o envio do formulário
   3. Personalização dos estilos do campo do formulário ou do botão de envio

Mas primeiro, vamos dar uma olhada em como o código de incorporação está estruturado:

Explorando o Código HTML Base de Incorporação

Para gerar o código de incorporação, vá para a aba Embedding Settings e clique no botão "Save Settings & Generate Embed Code". Abaixo está um exemplo do código base.

Você vai perceber que a primeira seção é CSS, seguida por HTML e, finalmente, JavaScript. Você deve personalizar as duas primeiras seções e deixar o JavaScript como está. Como é sugerido no comentário da segunda linha, você pode mover a seção CSS para o seu arquivo CSS para que tudo seja gerenciado em um único lugar centralmente.

1. Validação Avançada de Formulário

O Formulário de Incorporação do SEOptimer possui validação de formulário simples integrada por padrão. Ao [enviar], o JavaScript verifica todos os campos do formulário em busca de [entrada] válida e, caso haja [entrada] inválida, ele aciona uma mensagem de alerta do JavaScript no navegador como a seguinte:

As duas alternativas mais populares para adicionar uma validação robusta ao Formulário de Incorporação são a "validação de restrição" e a "validação em tempo real":

Validação de "constraint"

Confira o guia do CSS-Tricks sobre validação de restrições, que utiliza mensagens contextuais no ou ao redor do campo do formulário à medida que ele entra em foco. Este método antecipa o usuário e o orienta a seguir o formato de entrada esperado ou, no exemplo abaixo, pelo menos inserir algo no campo:

Validação em "tempo real"

CSS-Tricks também tem um ótimo guia sobre validação em tempo real, que fornece validação no campo para o usuário enquanto ele digita. Isso pode ser tão simples quanto iconografia para indicar a entrada correta no formulário:

2. Disparando um evento do Google Analytics ou Facebook durante o envio de formulário

Disparar eventos de rastreamento como GA ou Facebook para medição de metas ou retargeting é uma ótima maneira de aproveitar o tráfego usando seu Formulário Incorporado. A melhor maneira de fazer isso é com uma ferramenta de Gerenciador de Tags como o próprio Gerenciador de Tags (GTM) do Google.

Dessa forma, você pode instalar o GTM como um contêiner vazio em seu site e, em seguida, gerenciar todas as tags e pixels do próprio GTM sem a necessidade de mexer no código toda vez.

Existem duas maneiras que o GTM pode disparar eventos no envio de um formulário em seu site:

• Usando o disparador de formulário embutido quando o evento submit do formulário ocorre
• Dependendo de um Evento customizado (linha de JavaScript) que precisa ser adicionado à camada de dados do GTM

Para a maioria dos usuários, a primeira opção é a melhor, pois é mais fácil de implementar e funciona bem. O Formulário Incorporado do SEOptimer usa uma ação padrão de submit em HTML quando o usuário o completa, então, contanto que você não mude a forma como o formulário envia os dados, o acionador embutido do GTM é o caminho a seguir.

Você precisará criar um novo Trigger no GTM baseado em "Envio de Formulário":

Além disso, certifique-se de ativar a variável interna "Form ID" do GTM. Esta variável identificará o ID do formulário incorporado a partir da tag de formulário no HTML.

Se você acabar removendo a ação de envio do "Embed Form" e substituí-la por JavaScript personalizado, isso fará com que o acionador embutido do GTM não funcione com o formulário.

É aí que você precisará adicionar uma chamada JavaScript para notificar a camada de dados do GTM que um evento ocorreu. Esta abordagem é direta, pois só precisa ser feita uma vez, então quaisquer eventos futuros que você queira adicionar podem ser facilmente feitos no próprio GTM. O JavaScript será algo assim:

dataLayer.push({'event' : 'formSubmitted', 'formName' : '[Auditoria] do [Site]'});

Para instruções passo a passo sobre como implementar ambos os métodos no GTM, consulte o guia da Click Insight.

3. Personalizando os Estilos do Campo de Formulário ou do Botão de Enviar

Elementos de formulário "arredondados"

Este exemplo da agência digital canadense Reach First é um ótimo exemplo de como algumas linhas de CSS podem ser usadas para modificar a "Audit Tool" para combinar com a aparência e sensação do site. Neste caso, eles usam arredondamento em todos os outros campos de entrada e botões ao longo do site:

Aqui podemos ver que o atributo "border-radius: 50px;" é usado para alcançar o efeito de arredondamento no campo de entrada de texto da [Audit Tool]. Note que o atributo de preenchimento do lado direito está definido para 160px para fornecer preenchimento suficiente entre a área de entrada e o botão "[Check]". Isso evita que o texto inserido sobreponha-se ao botão.

Para o próprio botão, apenas os atributos "border-top-right-radius" e "border-bottom-right-radius" foram definidos como 50px para alcançar o efeito coeso entre o campo de entrada e o botão:

Dimensionamento e Posicionamento de Elementos do Formulário

A consultoria australiana de marketing digital, Stepps integrou a "Ferramenta de Auditoria" muito bem em uma página de destino separada "Analisador de Sites", usando larguras variáveis nos 3 campos do formulário e movendo o botão para sua própria linha de largura total:

As larguras dos elementos do formulário são relativas com base no contêiner div em que estão contidos. Para conseguir isso, a largura é definida como uma porcentagem no CSS. Para o campo "Digite seu site", podemos ver que este campo tem uma largura de 25%:

Enquanto os campos de "Primeiro Nome" e "Email" são menores com uma largura de 15% cada:

Finalmente o botão "Gerar Meu Relatório" tem uma largura 1px maior que a soma dos campos de entrada: 25 + 15 + 15 = 56%

Esses exemplos mostram como é flexível e fácil atualizar o CSS da "Audit Tool" para combinar com a aparência do site de sua agência. Se você encontrar algum problema ao instalar a "Audit Tool", confira também nosso guia completo!