Resumo de IA
Pretende incorporar excertos de código HTML personalizados nos seus formulários de contacto do WordPress? Adicionar HTML personalizado ao seu formulário é uma ótima maneira de ser criativo e aprimorar os seus formulários.
Os melhores plugins de formulários do WordPress permitem-lhe criar formulários sem código, ao mesmo tempo que lhe permitem adicionar o seu próprio HTML personalizado aos seus formulários para os tornar ainda mais avançados.
Portanto, neste tutorial, irei guiá-lo através da instalação do WPForms, criação de um formulário, adição de um bloco HTML e colagem do seu código.
Adicione HTML Personalizado ao Seu Formulário WordPress! :)
Porquê Adicionar HTML Personalizado ao Seu Formulário de Contacto
Poderá estar a perguntar-se porque deve adicionar HTML aos seus formulários WordPress. Em muitos casos, um utilizador avançado ou um desenvolvedor web poderá querer expandir a funcionalidade de um formulário.
Um dos principais benefícios de adicionar HTML personalizado ao seu formulário é que ajuda a destacar o seu formulário do resto do conteúdo.
No exemplo abaixo, pode ver como é fácil adicionar um link para uma Política de Privacidade em algum texto no seu formulário de contacto.
Portanto, quando os seus visitantes chegarem à página onde está o seu formulário de contacto, poderão ver algo como isto abaixo:
Além disso, pode adicionar uma imagem ao seu formulário usando código HTML personalizado para tornar o formulário mais apelativo visualmente ou para apresentar produtos e opções de produtos personalizados.
E ao adicionar estas funcionalidades extras 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 WordPress
Partilhei também um vídeo abaixo descrevendo todas as instruções que precisa 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 lhe permite criar qualquer coisa, desde formulários simples a formulários avançados.
O que diferencia o WPForms é a forma como lida com HTML personalizado. Ao contrário de outros construtores de formulários que restringem o que pode adicionar, 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 de Campos Elaborados do WPForms, o que significa que precisará de, pelo menos, o plano Básico para aceder a ele. Se é novo a descarregar plugins, aqui está um guia passo a passo sobre como instalar um plugin 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 deseje adicionar HTML personalizado, mas para este exemplo, vamos criar um formulário de contacto simples usando o desafio WPForms.
Dê um nome descritivo ao seu formulário, como “Formulário de Contacto com HTML Personalizado”, para que o possa encontrar facilmente mais tarde. Pode começar com um modelo como Formulário de Contacto Simples para poupar tempo.
Assim que estiver no construtor de formulários, verá a configuração familiar com as opções de campo à esquerda e a pré-visualização do seu formulário à direita, com campos cruciais como Nome, Email 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 Elaborados no lado esquerdo do construtor de formulários e arraste-o para a área de pré-visualização do seu formulário.
Pode posicionar o campo HTML em qualquer lugar dentro da estrutura do seu formulário. Eu costumo colocá-lo onde quero que o conteúdo personalizado apareça.
Talvez no topo para uma mensagem de boas-vindas, entre secções de campos como um divisor, ou na parte inferior para informações adicionais.
Passo 4: Inserir o Seu Código HTML Personalizado
Agora que a sua caixa de HTML personalizada está no seu formulário de contacto, pode adicionar o seu trecho de código HTML personalizado. Vá em frente e vá ao seu formulário à direita e clique no campo Bloco HTML / Código que acabou de adicionar.
Em seguida, dirija-se ao painel esquerdo, onde verá a caixa de Código HTML em Opções de Campo. É aqui que pode adicionar o seu trecho de código HTML personalizado.
Portanto, cole o seu HTML personalizado nesse campo. Pode adicionar qualquer tipo de trecho de código HTML personalizado ao seu formulário. Quando terminar, clique no botão Guardar no canto superior direito.
Passo 5: Colocar o Seu Formulário com HTML Personalizado Online
Antes de colocar o seu formulário online, precisa de testar tudo para garantir que o seu HTML personalizado é exibido corretamente e não interfere com o envio do formulário.
Clique no botão Visualizar no construtor de formulários para ver exatamente como o seu formulário aparecerá aos visitantes. Se tudo funcionar como esperado, poderá então adicioná-lo ao seu site. Clique no botão Incorporar.
Agora, quando a notificação Incorporar numa Página aparecer, clique no botão Criar Nova Página. Em seguida, o WPForms pedir-lhe-á para nomear a sua página.
Para o nosso exemplo, estamos a adicionar este formulário de contacto HTML personalizado a uma página de contacto, pelo que lhe chamaremos Contacte-nos. Digite o título da página que deseja na caixa e clique em Vamos a Isso!
Portanto, agora verá a nova página com o seu formulário de contacto HTML personalizado. Pode clicar no botão Publicar no canto superior direito da sua página.
E depois dê uma vista de olhos ao seu novo formulário. Conseguiu. Terminou de configurar um formulário de contacto WordPress com um campo HTML personalizado.
Adicione HTML Personalizado ao Seu Formulário WordPress! :)
Perguntas Frequentes 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, divisores, imagens, vídeos incorporados, caixas de texto com estilo, links e até tabelas HTML simples.
Também pode usar CSS inline para estilizar estes elementos exatamente como deseja que pareçam. O campo HTML suporta a maioria das tags HTML comuns.
O HTML personalizado afetará a funcionalidade de envio do formulário?
Não, adicionar HTML ao seu formulário não interferirá de todo com o envio do formulário. O campo HTML é puramente para fins de exibição e não recolhe quaisquer dados que sejam enviados com o formulário.
Os seus campos de formulário regulares (como Nome, Email, Mensagem) continuarão a funcionar exatamente como sempre funcionaram. O HTML personalizado simplesmente melhora a apresentação visual e a experiência do utilizador sem tocar na funcionalidade real de processamento do formulário.
Posso usar JavaScript no campo HTML?
Não, o código JavaScript é automaticamente filtrado do campo HTML por razões de segurança. O WPForms remove as tags <script> e os manipuladores de eventos JavaScript para proteger o seu site de potenciais vulnerabilidades de segurança.
Se precisar de funcionalidade interativa para além do que HTML e CSS podem fornecer, poderá querer explorar os recursos integrados do WPForms, como a lógica condicional, que pode criar um comportamento dinâmico do formulário 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 de estilo, enquanto o campo Conteúdo é concebido para conteúdo de texto simples com opções básicas de formatação. O campo HTML dá-lhe muito mais flexibilidade para elementos de design personalizados.
Se precisar apenas de adicionar texto simples ou conteúdo formatado simples, o campo Conteúdo pode ser mais fácil de usar. Mas quando quiser estilo personalizado, multimédia incorporada ou layouts complexos, o campo HTML é definitivamente o caminho a seguir.
Existe um limite para a quantidade de código HTML que posso adicionar?
Não existe um limite estrito de caracteres no campo HTML, mas é uma boa prática manter o seu código conciso e focado. Quantidades muito grandes de HTML podem abrandar o tempo de carregamento do seu formulário e dificultar a sua gestão.
Recomendo dividir o HTML complexo em secções menores e lógicas, utilizando múltiplos campos HTML, se necessário. Isto torna o seu formulário mais fácil de editar mais tarde e ajuda no desempenho geral e na velocidade de carregamento do formulário.
Em seguida, Aprenda a Estilizar os Seus Formulários WordPress
Portanto, agora que adicionou HTML personalizado ao seu formulário, deve consultar o nosso guia sobre estilização de formulários de contacto no WordPress para garantir que o seu código personalizado tem o aspeto que deseja.
Crie o Seu Formulário WordPress Agora
Pronto para construir o seu formulário? Comece hoje com o plugin construtor de formulários WordPress mais fácil. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo o ajudou, por favor siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.
