Deseja incorporar trechos de código HTML personalizados nos seus formulários de contato do WordPress? Adicionar HTML personalizado ao seu formulário é uma ótima maneira de ser criativo e aprimorar seus formulários.
Os melhores plug-ins de formulário do WordPress permitem que você crie formulários sem código, além de permitir que você adicione seu próprio HTML personalizado aos formulários para torná-los ainda mais avançados.
Portanto, neste tutorial, mostraremos como adicionar HTML personalizado aos seus formulários do WordPress usando o WPForms.
Por que adicionar HTML personalizado ao seu formulário de contato
Talvez você esteja se perguntando por que deve adicionar HTML aos formulários do WordPress.
Em muitos casos, um usuário avançado ou desenvolvedor da Web pode querer expandir a funcionalidade de um formulário. Um dos principais benefícios de adicionar HTML personalizado ao formulário é que ele ajuda a fazer com que o formulário se destaque do restante do conteúdo.
No exemplo abaixo, você pode ver como é fácil adicionar um link para uma Política de Privacidade em algum texto do seu formulário de contato.
Portanto, os visitantes verão algo parecido com isto:
Além disso, você pode adicionar uma imagem ao formulário usando código HTML personalizado para tornar o formulário mais atraente visualmente ou para exibir produtos e opções de produtos personalizados.
Ao adicionar esses recursos extras aos seus formulários, você pode fazer com que o formulário se destaque na página, o que ajuda a chamar a atenção dos visitantes. Isso pode ajudar a incentivá-los a enviar o formulário.
A adição de HTML personalizado ao formulário cria inúmeras oportunidades para aprimorar o formulário do WordPress. Algumas dessas ideias incluem:
- Incorporar um vídeo do YouTube: Você pode tornar seu formulário mais envolvente incorporando um vídeo do YouTube ou do Vimeo ao formulário.
- Incorporar o Google Maps: Na sua página de contato, você pode mostrar a localização da sua empresa incorporando o Google Maps no formulário de contato.
- Mostre uma oferta exclusiva com lógica condicional: Se estiver criando um formulário de pedido, você poderá exibir um bloco HTML com uma oferta exclusiva se o usuário selecionar uma opção específica no formulário. Essa lógica condicional inteligente funciona muito bem para upsells e para manter o formulário curto.
- Mostre sua Política de Privacidade: Adicione um texto com um link para sua Política de Privacidade diretamente no formulário.
Como adicionar código HTML personalizado ao seu formulário de contato do WordPress
Se preferir ler o tutorial, siga estas instruções para criar um local em seus formulários para colocar seu código HTML personalizado.
Etapa 1: Instalar o WPForms
A primeira coisa que você precisa fazer para começar é instalar e ativar o plug-in WPForms. Ele é um construtor de formulários fácil de usar que permite criar desde formulários simples até formulários avançados. É um dos melhores plugins para WordPress que existem.
Se você não tem experiência com o download de plug-ins, aqui está um guia passo a passo sobre como instalar um plug-in do WordPress.
Além disso, você precisará criar um formulário. Vamos prosseguir e fazer isso a seguir.
Etapa 2: Criar um formulário
A próxima etapa é criar seu primeiro formulário. Você pode escolher qualquer formulário ao qual queira adicionar um HTML personalizado, mas, neste exemplo, criaremos um formulário de contato simples usando o desafio WPForms.
Ótimo. Agora, vamos adicionar o campo que aceitará HTML personalizado.
Etapa 2: Adicione um bloco HTML ao seu formulário
Agora, você precisará adicionar um campo HTML ao seu formulário. Você pode encontrá-lo na guia Fields (Campos) e, em seguida, em Fancy Fields (Campos especiais).
Em seguida, basta arrastar o campo do painel à esquerda para o formulário à direita.
É realmente muito fácil adicionar um campo HTML personalizado ao seu formulário de contato do WordPress usando o WPForms.
Etapa 3: Insira seu HTML personalizado
Agora que a caixa HTML personalizada está no formulário de contato, você pode adicionar o trecho de código HTML personalizado.
Vá para o formulário à direita e clique no campo de bloco HTML / Código que você acabou de adicionar.
Em seguida, vá para o painel esquerdo, onde você verá a caixa Código HTML em Opções de campo.
É aqui que você pode adicionar seu snippet de código HTML personalizado.
Portanto, vá em frente e cole seu HTML personalizado nesse campo. Você pode adicionar qualquer tipo de trecho de código HTML personalizado ao seu formulário.
Quando terminar, pressione o botão Save (Salvar ) no canto superior direito.
Agora vamos colocar esse formulário em seu site!
Etapa 4: Adicione seu formulário de contato HTML personalizado ao seu site WordPress
Portanto, agora que você criou seu formulário de contato com um campo HTML personalizado usando o plug-in WPForms, você deve adicioná-lo ao seu site.
Para começar, clique no botão Embed no construtor de formulários.
Agora, quando a notificação Incorporar em uma página for exibida, clique no botão Criar nova página .
Em seguida, o WPForms pedirá que você dê um nome à sua página. No nosso exemplo, estamos adicionando esse formulário de contato HTML personalizado a uma página de contato, portanto, vamos chamá-lo de Contact Us.
Digite o título da página que você deseja na caixa e clique em Let's Go!
Agora você verá a nova página com seu formulário de contato HTML personalizado. Você pode ir em frente e clicar no botão Publish (Publicar ) no canto superior direito da página.
Em seguida, dê uma olhada em seu novo formulário. Você poderá vê-lo em ação.
Você conseguiu. Terminou de configurar um formulário de contato do WordPress com um campo HTML personalizado.
Considerações finais sobre formulários HTML personalizados
Excelente trabalho. Esperamos que este tutorial o tenha ajudado a aprender como configurar esse campo HTML personalizado nos formulários de contato do WordPress.
Portanto, agora que você adicionou HTML personalizado ao formulário, consulte nosso guia sobre como estilizar formulários de contato no WordPress para garantir que o código personalizado tenha a aparência desejada.
Então, o que está esperando? Comece hoje mesmo a usar o mais avançado plug-in de formulários do WordPress e comece a criar facilmente formulários personalizados e bonitos para o site de sua pequena empresa.
E se você gostou deste artigo, siga-nos no Facebook e no Twitter para obter mais tutoriais gratuitos sobre o WordPress.
