Pretende incorporar fragmentos de código HTML personalizados nos seus formulários de contacto do WordPress? Adicionar HTML personalizado ao seu formulário é uma óptima forma de ser criativo e melhorar os seus formulários.
Os melhores plug-ins de formulário do WordPress permitem-lhe criar formulários sem código, ao mesmo tempo que lhe permitem adicionar o seu próprio HTML personalizado aos formulários para os tornar ainda mais avançados.
Portanto, neste tutorial, mostraremos como adicionar HTML personalizado aos seus formulários do WordPress usando o WPForms.
Porquê adicionar HTML personalizado ao seu formulário de contacto
Poderá estar a perguntar-se por que razão deve adicionar HTML aos seus formulários WordPress.
Em muitos casos, um utilizador avançado ou um programador Web pode querer expandir a funcionalidade de um formulário. Uma das principais vantagens de adicionar HTML personalizado ao seu formulário é o facto de o ajudar a destacar-se do resto do conteúdo.
No exemplo abaixo, pode ver como é fácil adicionar uma ligação a uma Política de Privacidade em algum texto do seu formulário de contacto.
Assim, os visitantes verão algo deste género:
Além disso, pode adicionar uma imagem ao seu formulário utilizando código HTML personalizado para tornar o formulário mais apelativo visualmente ou para apresentar produtos e opções de produtos personalizados.
Ao adicionar estas funcionalidades extra aos seus formulários, pode fazer com que o formulário se destaque na página, o que ajuda a captar a atenção dos seus visitantes. Isto pode ajudar a incentivá-los a submeter o seu formulário.
A adição de HTML personalizado ao seu formulário cria uma tonelada de oportunidades para melhorar o seu formulário WordPress. Algumas dessas ideias incluem:
- Incorporar um vídeo do YouTube: Pode tornar o seu formulário mais atrativo incorporando um vídeo do YouTube ou do Vimeo no seu formulário.
- Incorporar o Google Maps: Na sua página de contacto, pode mostrar a localização da sua empresa incorporando o Google Maps no seu formulário de contacto.
- Mostrar uma oferta exclusiva com lógica condicional: Se estiver a criar um formulário de encomenda, pode mostrar um bloco HTML com uma oferta exclusiva se um utilizador selecionar uma opção específica no seu formulário. Esta lógica condicional inteligente funciona muito bem para upsells e para manter o formulário curto.
- Mostre a sua Política de Privacidade: Adicione algum texto com uma hiperligação para a sua Política de Privacidade diretamente no formulário.
Como adicionar código HTML personalizado ao seu formulário de contacto do WordPress
Se preferir ler o tutorial, siga estas instruções para criar um local nos seus formulários para colocar o seu código HTML personalizado.
Passo 1: Instalar o WPForms
A primeira coisa que precisa de fazer para começar é instalar e ativar o plugin WPForms. É um construtor de formulários fácil de usar que permite criar qualquer coisa, desde formulários simples até formulários avançados. É um dos melhores plugins para WordPress que existem.
Se é novo na transferência de plug-ins, eis um guia passo-a-passo sobre como instalar um plug-in do WordPress.
Além disso, precisa de ter um formulário criado. Vamos fazer isso a seguir.
Passo 2: Criar um formulário
O próximo passo é criar o seu primeiro formulário. Pode escolher qualquer formulário ao qual queira adicionar um HTML personalizado, mas para este exemplo, vamos criar um formulário de contacto simples utilizando o desafio WPForms.
Ótimo. Agora, vamos adicionar o campo que aceitará HTML personalizado a seguir.
Passo 2: Adicionar um bloco HTML ao seu formulário
Agora, tem de adicionar um campo HTML ao seu formulário. Pode encontrá-lo no separador Campos e, em seguida, em Campos extravagantes.
Depois, basta arrastar o campo do painel da esquerda para o formulário da direita.
É realmente muito fácil adicionar um campo HTML personalizado ao seu formulário de contacto do WordPress utilizando o WPForms.
Passo 3: Inserir o seu HTML personalizado
Agora que a sua caixa HTML personalizada está no seu formulário de contacto, pode adicionar o seu fragmento de código HTML personalizado.
Vá para o seu formulário à direita e clique no campo de bloco HTML / Código que acabou de adicionar.
Em seguida, vá para o painel do lado esquerdo, onde verá a caixa Código HTML em Opções de campo.
É aqui que pode adicionar o seu fragmento de código HTML personalizado.
Por isso, vá em frente e cole o seu HTML personalizado nesse campo. Pode adicionar qualquer tipo de fragmento de código HTML personalizado ao seu formulário.
Quando terminar, prima o botão Guardar no canto superior direito.
Agora vamos lá colocar esse formulário no seu sítio!
Passo 4: Adicione o seu formulário de contacto HTML personalizado ao seu site WordPress
Assim, agora que criou o seu formulário de contacto com um campo HTML personalizado utilizando o plugin WPForms, vai querer adicioná-lo ao seu sítio Web.
Para começar, clique no botão Incorporar no criador de formulários.
Agora, quando a notificação Incorporar em uma página aparecer, 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 a adicionar este formulário de contacto HTML personalizado a uma página de contacto, pelo que lhe chamaremos Contact Us.
Escreva o título da página que pretende na caixa e clique em Vamos!
Agora, verá a nova página com o seu formulário de contacto HTML personalizado. Pode ir em frente e premir o botão Publicar no canto superior direito da sua página.
Depois, dê uma vista de olhos ao seu novo formulário. Deverá ser possível vê-lo em ação.
Conseguiu. Terminou de configurar um formulário de contacto do WordPress com um campo HTML personalizado.
Considerações finais sobre formulários HTML personalizados
Bom trabalho. Esperamos que este tutorial o tenha ajudado a aprender como configurar esse campo HTML personalizado nos seus formulários de contacto no WordPress.
Portanto, agora que adicionou HTML personalizado ao seu formulário, deve consultar o nosso guia sobre como estilizar formulários de contacto no WordPress para se certificar de que o seu código personalizado tem o aspeto que pretende.
Então, do que está à espera? Comece a usar o plugin de formulários WordPress mais poderoso hoje mesmo e comece a criar facilmente formulários personalizados e bonitos para o site da sua pequena empresa.
E se gostou deste artigo, siga-nos no Facebook e no Twitter para mais tutoriais gratuitos sobre o WordPress.
