Você quer incorporar trechos de código HTML personalizado em 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 plugins de formulário do WordPress permitem que você crie formulários sem código, ao mesmo tempo que permitem adicionar seu próprio HTML personalizado aos seus formulários para torná-los ainda mais avançados.

Então, neste tutorial, vou guiá-lo pela 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 do WordPress! :)

Por Que Adicionar HTML Personalizado ao Seu Formulário de Contato

Você pode estar se perguntando por que adicionar HTML aos seus formulários do WordPress. Em muitos casos, um usuário avançado ou desenvolvedor web pode querer expandir a funcionalidade de um formulário.

Um dos principais benefícios de adicionar HTML personalizado ao seu formulário é que ele ajuda a fazer seu formulário se destacar 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 no seu formulário de contato.

Portanto, quando seus visitantes chegarem à página onde está o seu formulário de contato, eles poderão ver algo como isto abaixo:

Além disso, você pode adicionar uma imagem ao seu 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.

E adicionando esses recursos extras aos seus formulários, você pode fazer o formulário se destacar na página, o que ajuda a chamar a atenção dos seus visitantes.

Como Adicionar Código HTML Personalizado ao Seu Formulário de Contato do WordPress

Eu também compartilhei um vídeo abaixo descrevendo todas as instruções que você precisa seguir para adicionar código HTML ao seu formulário no WordPress.

Se você preferir ler o tutorial, siga estas instruções para criar um local em seus formulários para colocar seu código HTML personalizado.

Passo 1: Instale o Plugin WPForms

A primeira coisa que você precisa 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 a formulários avançados.

O que diferencia o WPForms é como ele lida com HTML personalizado. Ao contrário de outros construtores de formulários que restringem o que você pode adicionar, o WPForms oferece controle total sobre 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 você precisará de pelo menos o plano Basic para acessá-lo. Se você é novo no download de plugins, aqui está um guia passo a passo sobre como instalar um plugin do WordPress.

Atualize para WPForms Pro Agora!:)

Etapa 2: Crie um Formulário e Adicione Campos Básicos

O próximo passo é criar seu primeiro formulário. Você pode escolher qualquer formulário ao qual deseja adicionar um HTML personalizado, mas para este exemplo, vamos criar um formulário de contato simples usando o desafio WPForms.

Dê um nome descritivo ao seu formulário, como "Formulário de Contato com HTML Personalizado", para que você possa encontrá-lo facilmente mais tarde. Você pode começar com um modelo como Formulário de Contato Simples para economizar tempo.

Uma vez que você esteja no construtor de formulários, verá a configuração familiar com as opções de campo à esquerda e a visualização do seu formulário à direita, com campos cruciais como Nome, Email e Mensagem já adicionados.

Isso lhe dá uma base sólida para trabalhar antes de adicionar seus elementos HTML personalizados. Ótimo. Agora, vamos adicionar o campo que aceitará HTML personalizado em seguida.

Etapa 3: Adicione 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 seção Fancy Fields no lado esquerdo do construtor de formulários e arraste-o para a área de visualização do seu formulário.

Você pode posicionar o campo HTML em qualquer lugar dentro da estrutura do seu formulário. Eu geralmente o coloco onde quero que o conteúdo personalizado apareça.

Talvez no topo para uma mensagem de boas-vindas, entre seções de campos como um divisor, ou na parte inferior para informações adicionais.

Etapa 4: Insira Seu Código HTML Personalizado

Agora que sua caixa de HTML personalizado está em seu formulário de contato, você pode adicionar seu trecho de código HTML personalizado. Vá em frente e acesse seu formulário à direita e clique no campo HTML / Bloco de Código que você acabou de adicionar.

Em seguida, vá para o painel esquerdo, onde você verá a caixa de Código HTML em Opções de Campo.  É aqui que você pode adicionar seu trecho de código HTML personalizado.

Então, 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, clique no botão Salvar no canto superior direito.

Etapa 5: Leve Seu Formulário com HTML Personalizado ao Ar

Antes de publicar seu formulário, você precisa testar tudo para garantir que seu HTML personalizado seja exibido corretamente e não interfira no envio do formulário.

Clique no botão Visualizar no construtor de formulários para ver exatamente como seu formulário aparecerá para os visitantes. Se tudo funcionar como esperado, você pode prosseguir para adicioná-lo ao seu site. 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á para você nomear sua página.

Para nosso exemplo, estamos adicionando este formulário de contato com HTML personalizado a uma página de contato, então a chamaremos de Fale Conosco. Digite o título da página que você deseja na caixa e clique em Vamos Lá!

Então, agora você verá a página novinha em folha com seu formulário de contato com HTML personalizado nela. Você pode ir em frente e clicar no botão Publicar no canto superior direito da sua página.

E então dê uma olhada no seu novo formulário. Você conseguiu. Você terminou de configurar um formulário de contato do WordPress com um campo HTML personalizado.

Adicione HTML Personalizado ao Seu Formulário do WordPress! :)

Perguntas frequentes sobre como adicionar HTML personalizado aos seus formulários do WordPress

Aprender como adicionar HTML personalizado aos seus formulários do WordPress é um tópico de interesse popular entre nossos leitores. Aqui estão as respostas para algumas perguntas comuns sobre isso:

Que tipos de código HTML posso adicionar ao WPForms?

Você pode adicionar quase todos os elementos HTML padrão ao campo HTML. Isso inclui títulos, parágrafos, divisores, imagens, vídeos incorporados, caixas de texto estilizadas, links e até tabelas HTML simples.

Você também pode usar CSS inline para estilizar esses elementos exatamente como você deseja que eles 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á nos envios de formulário. O campo HTML é puramente para fins de exibição e não coleta nenhum dado que é enviado com o formulário.

Seus campos de formulário regulares (como Nome, E-mail, Mensagem) continuarão funcionando exatamente como sempre funcionaram. O HTML personalizado simplesmente aprimora a apresentação visual e a experiência do usuário 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 motivos de segurança. O WPForms remove tags <script> e manipuladores de eventos JavaScript para proteger seu site contra possíveis vulnerabilidades de segurança.

Se você precisar de funcionalidades interativas além do que HTML e CSS podem oferecer, talvez queira explorar os recursos integrados do WPForms, como a lógica condicional, que pode criar um comportamento dinâmico de formulário sem a necessidade de JavaScript personalizado.

Qual é a diferença entre o campo HTML e o campo de Conteúdo?

O campo HTML permite adicionar qualquer código HTML personalizado com controle total de estilo, enquanto o campo de Conteúdo é projetado para conteúdo de texto simples com opções básicas de formatação. O campo HTML oferece muito mais flexibilidade para elementos de design personalizados.

Se você só precisa adicionar texto simples ou conteúdo formatado de forma básica, o campo de Conteúdo pode ser mais fácil de usar. Mas quando você deseja estilo personalizado, mí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 há um limite estrito de caracteres para o campo HTML, mas é uma boa prática manter seu código conciso e focado. Quantidades muito grandes de HTML podem diminuir o tempo de carregamento do seu formulário e dificultar o gerenciamento.

Recomendo dividir o HTML complexo em seções menores e lógicas usando vários campos HTML, se necessário. Isso torna seu formulário mais fácil de editar posteriormente e ajuda no desempenho geral e na velocidade de carregamento do formulário.

Próximo: Aprenda a Estilizar Seus Formulários do WordPress

Agora que você adicionou HTML personalizado ao seu formulário, deve dar uma olhada em nosso guia sobre como estilizar formulários de contato no WordPress para garantir que seu código personalizado fique com a aparência desejada.

Crie seu formulário WordPress agora

Pronto para criar seu formulário? Comece hoje mesmo com o plugin de criação de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.

Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.