Resumo da IA
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.
Por isso, neste tutorial, vou guiá-lo através da instalação do WPForms, criando um formulário, adicionando um bloco HTML e colando o seu código.
Adicione HTML personalizado ao seu formulário do WordPress! 🙂
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, quando os seus visitantes chegarem à página onde se encontra o seu formulário de contacto, poderão ver algo como isto abaixo:
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.
Como adicionar código HTML personalizado ao seu formulário de contacto do WordPress
Também partilhei um vídeo abaixo que descreve todas as instruções que tem de seguir para adicionar código HTML ao seu formulário no 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 plugin 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.
O que diferencia o WPForms é a forma como ele lida com o HTML personalizado. Ao contrário de outros construtores de formulários que restringem o que pode ser adicionado, o WPForms dá-lhe controlo total sobre o seu conteúdo HTML, mantendo tudo seguro e funcional.
O campo HTML faz parte da coleção Fancy Fields do WPForms, o que significa que precisará, pelo menos, do plano Básico para lhe aceder. Se é novo no download de plug-ins, aqui está um guia passo a passo sobre como instalar um plug-in do WordPress.
Atualize para o WPForms Pro agora!:)
Passo 2: Criar um formulário e adicionar campos básicos
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.
Dê ao seu formulário um nome descritivo, como "Formulário de contacto com HTML personalizado", para que possa encontrá-lo facilmente mais tarde. Pode começar com um modelo como Formulário de contacto simples para poupar tempo.
Quando estiver no construtor de formulários, verá a configuração familiar com opções de campo à esquerda e a pré-visualização do formulário à direita com campos cruciais como Nome, E-mail e Mensagem já adicionados.
Isto dá-lhe uma base sólida para trabalhar antes de adicionar os seus elementos HTML personalizados. Ótimo. Agora, vamos adicionar o campo que aceitará HTML personalizado a seguir.
Passo 3: Adicionar um bloco HTML ao seu formulário
Agora vem a parte divertida de adicionar HTML personalizado ao seu formulário. Procure o campo HTML na secção Campos Extravagantes no lado esquerdo do construtor de formulários e arraste-o para a área de pré-visualização do formulário.
Pode posicionar o campo HTML em qualquer parte da estrutura do formulário. Normalmente, coloco-o onde quero que apareça o conteúdo personalizado.
Talvez no topo para uma mensagem de boas-vindas, entre secções de campo como um separador ou no fundo para informações adicionais.
Passo 4: Insira o seu código 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, clique no botão Salvar no canto superior direito.
Etapa 5: Coloque seu formulário HTML personalizado no ar
Antes de colocar o formulário em funcionamento, é necessário testar tudo para garantir que o HTML personalizado é apresentado corretamente e não interfere com as submissões do formulário.
Clique no botão Pré-visualizar no criador de formulários para ver exatamente como o seu formulário aparecerá aos visitantes. Se tudo funcionar como esperado, pode então continuar a adicioná-lo ao seu sítio Web. Clique no botão Incorporar.
Agora, quando a notificação Incorporar em uma página aparecer, vá em frente e clique no botão Criar nova página . Em seguida, o WPForms pedirá que você dê um nome à sua página.
No nosso exemplo, vamos adicionar este formulário de contacto HTML personalizado a uma página de contacto, pelo que lhe chamaremos Contacte-nos. Escreva o título da página que pretende na caixa e clique em Vamos lá!
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.
E depois dê uma olhadela ao seu novo formulário. Está feito. Terminou de configurar um formulário de contacto do WordPress com um campo HTML personalizado.
Adicione HTML personalizado ao seu formulário do WordPress! 🙂
FAQs sobre como adicionar HTML personalizado aos seus formulários WordPress
Aprender a adicionar HTML personalizado aos seus formulários WordPress é um tópico de interesse popular entre os nossos leitores. Aqui estão as respostas a algumas perguntas comuns sobre o assunto:
Que tipos de código HTML posso adicionar ao WPForms?
Pode adicionar quase todos os elementos HTML padrão ao campo HTML. Isto inclui títulos, parágrafos, separadores, imagens, vídeos incorporados, caixas de texto estilizadas, hiperligações e até tabelas HTML simples.
Também pode utilizar CSS em linha para estilizar estes elementos exatamente como pretende que fiquem. O campo HTML suporta as etiquetas HTML mais comuns.
O HTML personalizado afectará a funcionalidade de envio de formulários?
Não, adicionar HTML ao seu formulário não interfere de todo com as submissões de formulários. O campo HTML serve apenas para efeitos de apresentação e não recolhe quaisquer dados que sejam enviados com o formulário.
Os seus campos de formulário normais (como Nome, Email, Mensagem) continuarão a funcionar exatamente como sempre funcionaram. O HTML personalizado melhora simplesmente a apresentação visual e a experiência do utilizador sem tocar na funcionalidade real de processamento do formulário.
Posso utilizar JavaScript no campo HTML?
No, JavaScript code is automatically filtered out of the HTML field for security reasons. WPForms removes <script> tags and JavaScript event handlers to protect your site from potential security vulnerabilities.
Se precisar de uma funcionalidade interactiva para além do que o HTML e o CSS podem fornecer, poderá querer explorar as funcionalidades integradas do WPForms, como a lógica condicional, que pode criar um comportamento de formulário dinâmico sem necessitar de JavaScript personalizado.
Qual é a diferença entre o campo HTML e o campo Conteúdo?
O campo HTML permite-lhe adicionar qualquer código HTML personalizado com controlo total do estilo, enquanto o campo Conteúdo foi concebido para conteúdo de texto simples com opções de formatação básicas. O campo HTML dá-lhe muito mais flexibilidade para elementos de design personalizados.
Se só precisa de adicionar texto simples ou conteúdo formatado simples, o campo Conteúdo pode ser mais fácil de utilizar. No entanto, se pretender um estilo personalizado, multimédia incorporado ou esquemas complexos, o campo HTML é definitivamente a melhor opção.
Existe um limite para a quantidade de código HTML que posso adicionar?
Não existe um limite rigoroso de caracteres no campo HTML, mas é boa prática manter o seu código conciso e concentrado. Quantidades muito grandes de HTML podem abrandar o tempo de carregamento do formulário e torná-lo mais difícil de gerir.
Recomendo que divida o HTML complexo em secções mais pequenas e lógicas, utilizando vários campos HTML, se necessário. Isto torna o seu formulário mais fácil de editar mais tarde e ajuda o desempenho geral e a velocidade de carregamento do formulário.
Em seguida, saiba como estilizar seus formulários do 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.
Crie o seu formulário Wordpress agora
Pronto para criar o seu formulário? Comece hoje mesmo com o plugin de criação de formulários mais fácil do WordPress. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de reembolso de 14 dias.
Se este artigo o ajudou, siga-nos no Facebook e no Twitter para mais tutoriais e guias gratuitos do WordPress.
