Resumo de IA
Você deseja adicionar trechos de código HTML personalizados aos 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.
A maneira mais rápida de fazer isso é com o campo HTML no WPForms. Você adiciona o campo ao seu formulário, cola seu código e salva. Você não precisará tocar nos arquivos do seu tema ou instalar um plugin separado.
Portanto, 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 próprio código. Também compartilharei alguns trechos de HTML para copiar e colar que você pode usar imediatamente.
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! :)
Exemplos de Código HTML que Você Pode Copiar e Colar
Aqui estão algumas das minhas ideias preferidas, juntamente com o código real que você pode colar diretamente no campo HTML. Cada um usa HTML puro e CSS inline, então não há nada extra para instalar.
O trecho que mais uso é uma linha simples de política de privacidade. Ele adiciona uma nota curta com um link, o que mantém seu formulário de contato em conformidade com o GDPR.
<p style="font-size: 14px; color: #666666;">
By submitting this form, you agree to our
<a href="https://example.com/privacy-policy/">Privacy Policy</a>.
</p>Se você preferir coletar consentimento formal, pode adicionar um campo de acordo GDPR em vez de um link simples.
Para tornar seu formulário mais envolvente, você pode incorporar um vídeo do YouTube diretamente nele. Substitua VIDEO_ID pelo ID no URL do seu vídeo e ele será exibido no formulário.
<iframe width="100%" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video" frameborder="0" allowfullscreen>
</iframe>Em uma página de contato, um Google Maps incorporado ajuda as pessoas a encontrar seu negócio pessoalmente. Pegue o link de incorporação do Google Maps usando a opção Compartilhar e depois Incorporar um mapa, e cole-o no lugar de SEU_CODIGO_DE_EMBUTIR.
<iframe
src="https://www.google.com/maps/embed?pb=YOUR_EMBED_CODE"
width="100%" height="300" style="border: 0;"
loading="lazy" allowfullscreen>
</iframe>Executando um formulário de pedido? Uma caixa estilizada é uma ótima maneira de destacar um desconto ou uma oferta por tempo limitado. Você pode até combiná-la com lógica condicional para que ela apareça apenas quando alguém selecionar uma opção específica.
<div style="background: #f0f7ff; border: 1px solid #cce0ff; padding: 16px; border-radius: 6px;">
<strong>Limited-time offer:</strong> Use code SAVE10 at checkout for 10% off your order.
</div>Para formulários mais longos, um título e um divisor facilitam a organização de campos relacionados em seções claras.
<h3 style="margin-top: 24px;">Shipping Details</h3>
<hr style="border: 0; border-top: 1px solid #e0e0e0;">E se você quiser um botão de call-to-action que combine com sua marca, você pode estilizar um link para parecer um botão sem tocar no seu tema.
<a href="https://example.com/"
style="display: inline-block; background: #e27730; color: #ffffff; padding: 10px 18px; border-radius: 4px; text-decoration: none;">
Learn More
</a>Perguntas frequentes sobre como adicionar HTML personalizado aos seus formulários do WordPress
Adicionar código HTML personalizado a um formulário de contato do WordPress levanta algumas perguntas comuns. Aqui estão as respostas que recebo com mais frequência.
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 que você adicione 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.
Posso criar um formulário de contato do WordPress apenas com código HTML?
Você pode codificar manualmente um formulário de contato em HTML puro, mas ele não enviará nem armazenará envios por conta própria. O HTML apenas lida com o layout, então você ainda precisaria de PHP ou um serviço de tratamento de formulários para processar o que as pessoas enviam. É por isso que a maioria das pessoas usa um construtor de formulários para lidar com os envios, e então adiciona HTML personalizado para os toques de design.
Como adiciono código HTML a um formulário de contato sem um plugin?
Sem um plugin, você adicionaria o HTML do seu formulário diretamente a uma página usando o bloco HTML Personalizado do WordPress e, em seguida, escreveria PHP para lidar com o envio e enviá-lo por e-mail para você. Funciona, mas é mais técnico e você é responsável pela proteção contra spam e validação. O campo HTML em um plugin de formulário oferece o mesmo controle criativo sobre sua marcação, enquanto lida com o lado do envio seguro para você.
Preciso saber codificar para usar o campo HTML?
O campo HTML não requer nenhum conhecimento real de codificação. Se você sabe copiar e colar, pode usá-lo, e os exemplos anteriores neste guia estão prontos para serem inseridos assim que você trocar o texto do espaço reservado pelo seu. HTML básico e um pouco de CSS inline cobrem a maior parte do que você vai querer fazer.
O campo HTML funciona na versão gratuita do WPForms?
O campo HTML faz parte da coleção Fancy Fields, portanto, você precisará de pelo menos o plano Basic para usá-lo. A versão gratuita WPForms Lite cobre campos padrão como nome, e-mail e mensagem, o que é suficiente para um formulário de contato básico. Assim que você quiser HTML personalizado, dropdowns de imagem ou uploads de arquivos, é aí que um plano pago entra em jogo.
Posso adicionar o mesmo HTML a vários formulários do WordPress?
Sim, mas o campo HTML é adicionado por formulário, portanto, não há uma configuração global que o aplique em todos os lugares. A abordagem mais simples é salvar seu trecho em algum lugar conveniente e colá-lo no campo HTML em cada formulário que precisar dele. Se você reutiliza o mesmo bloco com frequência, manter um pequeno arquivo de texto com seus trechos favoritos economiza tempo.
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.
