Como adicionar um formulário de contato ao seu site ou blog WordPress


Como adicionar um formulário de contatoComo proprietário de um site, você definitivamente deve aprender como adicionar um formulário de contato ao WordPress. Seu site não é uma entidade anônima. A maioria das pessoas deseja conhecer e ocasionalmente interagir com quem está por trás do conteúdo que lê. Por que você acha que existem perfis de autores e comentários no blog?


Por esse motivo, neste artigo, você aprenderá como adicionar um formulário de contato ao seu site WordPress. A postagem abordará primeiro os motivos pelos quais é uma boa ideia e, em seguida, você obterá um guia passo a passo sobre como incluir um formulário de contato no seu site por meio de um plug-in.

Também falaremos sobre como alterar o design do seu formulário e implementar a proteção contra spam. Além disso, examinaremos os formulários de contato e a proteção de dados pessoais – algo que tem se destacado ultimamente. Por fim, você encontrará uma lista de plugins que você pode usar para adicionar um formulário de contato no WordPress.

Pode parecer muito, mas não se preocupe – vamos simplificar!

Por que você deve usar um formulário de contato em seu site WordPress?

Antes de começar a examinar como é necessário. Há muitas boas razões para usar um formulário de contato em seu site, em vez de postar seu endereço de e-mail diretamente, por exemplo.

  • Proteção contra spam de e-mail – Spam é uma praga. Você o notará rapidamente quando tiver um site WordPress que use comentários no blog. Uma coisa que os spammers fazem é verificar automaticamente os sites em busca de endereços de email desprotegidos, para que eles possam adicioná-los às suas listas de email. Os formulários de contato evitam que isso aconteça, dando aos visitantes a chance de entrar em contato sem publicar seu endereço on-line.
  • Peça a informação certa – As pessoas que entram em contato com você nem sempre enviam todas as informações necessárias. Com um formulário de contato, você pode solicitá-lo especificamente com antecedência. Também oferece uma maneira de filtrar consultas, por exemplo, por tipo. Isso facilita sua vida e reduz muito o tempo para a frente e para trás.
  • Informe seus clientes – Por outro lado, os formulários de contato também podem atuar como o primeiro ponto de informação. Você pode incluir informações para os chamadores para que eles saibam sobre o tempo de resposta esperado e as etapas que eles podem executar com antecedência para resolver suas dúvidas. Isso reduz a probabilidade de vários emails da mesma pessoa impaciente.

Convencido de que os formulários de contato são úteis? Então vamos à parte prática deste tutorial.

Como adicionar um formulário de contato no WordPress com o formulário de contato 7

Existem muitos plugins do WordPress disponíveis para adicionar um formulário de contato ao seu site, gratuito e premium. Falaremos sobre alguns deles mais adiante neste artigo. Para o tutorial a seguir, usaremos Formulário de contato 7.

O plug-in está disponível gratuitamente no diretório WordPress e está constantemente entre os plugins mais populares de todos os tempos (na verdade, no momento da redação deste documento, está em primeiro lugar). Além disso, é fácil de usar, possui uma boa lista de recursos e complementos sensatos.

É por isso que o escolhemos para ensinar como adicionar um formulário de contato no WordPress.

Etapa 1. Instale o plug-in Formulário de contato 7

A instalação do Formulário de contato 7 é tão fácil quanto qualquer outro plugin do WordPress. Basta fazer login no seu site, vá para Plugins> Adicionar novo e digite seu nome na caixa de pesquisa.

instale o formulário de contato 7 para adicionar o formulário de contato no wordpress

Deve aparecer em primeiro lugar. Clique em instale agora para fazer o download em seu site. Quando terminar, clique em Ativar para começar a usar o plugin.

Etapa 2. Crie seu novo formulário de contato

Após a instalação, você encontrará um novo item de menu chamado Contato na barra lateral do WordPress. Clicar nele leva você a essa tela.

formulário de contato 7 menu principal

Você recebe várias dicas para melhorar seu formulário de contato, como o uso de proteção contra spam. Nós vamos chegar a essas coisas mais tarde.

Mais importante, você encontrará uma lista de todos os formulários de contato em seu site. Ele inclui um formulário de amostra que você pode, teoricamente, usar imediatamente. Clique nele para começar a editar ou pressione Adicionar novo na parte superior da tela. Ambos o levarão aqui:

como adicionar um formulário de contato ao wordpress com o formulário de contato 7

Parece um pouco enigmático no começo, mas não se preocupe – você entenderá em breve.

Para funcionar, seu formulário de contato precisa de campos. Os campos são onde os visitantes inserem seu nome, endereço de email ou a mensagem que desejam enviar para você ou qualquer outra coisa que você queira adicionar.

O Formulário de contato 7 cria pessoas com um pouco de HTML, além de tags personalizadas. Tudo entre indica um campo do seu formulário de contato mais a descrição do texto a ele pertencente. Os campos reais são criados pelo que há entre colchetes.

Isso significa que, para criar um formulário de contato, você precisa aprender linguagens de programação? Felizmente, o plugin vem com ferramentas para gerá-las automaticamente.

Etapa 3. Configure seu formulário

No momento, o formulário padrão que temos no back-end ficará assim na página.

Configuração do formulário de contato
Formulário de exemplo “adicione um formulário de contato no WordPress”

É tudo padrão. Digamos que você queira adicionar um menu suspenso para escolher a finalidade de entrar em contato com você. Dessa forma, você poderá ver imediatamente as mensagens que devem ser priorizadas.

Para fazer isso, primeiro você precisa colocar o cursor onde deseja que o menu apareça no formulário de contato. Nesse caso, isso fica entre o endereço de e-mail e o assunto.

Clique no menu suspenso na barra de ferramentas na parte superior. Leva você a este menu:

formulário de contato 7 criar menu suspenso

Veja como preencher campos diferentes:

  • Tipo de campo – Escolha se o campo é obrigatório para enviar o formulário de contato ou não.
  • Nome – Isso denota o nome usado na tag. Ele não aparece para os visitantes, mas facilita a lembrança do objetivo da tag e também a configuração do email enviado para sua conta posteriormente.
  • Opções – Insira as opções disponíveis para os visitantes usando o menu suspenso. Coloque um por linha. Você também tem a opção de permitir várias seleções e usar um item em branco como padrão..
  • Atributo Id / Class – Nesse local, você pode atribuir uma classe ou ID CSS ao campo. Isso é muito útil para estilos personalizados. Falaremos sobre isso mais tarde.

Veja como preenchemos:

preenchido formulário gerador de etiquetas formulário de contato 7

Quando estiver satisfeito, clique em Inserir etiqueta para colocá-lo na forma.

adicione tags de formulário ao menu suspenso para entrar em contato com o formulário 7

Lembre-se de que, depois de entender como as tags funcionam, você também pode criá-las ou fazer alterações no campo de texto. Por exemplo, para tornar o novo menu suspenso um campo não obrigatório, você pode simplesmente excluir o asterisco após selecionar. Quanto mais você usar o plug-in, melhor entenderá como ele funciona.

Agora, resta apenas adicionar um rótulo. Esse é o texto que acompanha o campo do formulário de contato para explicar o que ele faz. Basta copiar e colar o código existente de outros campos e depois ajustá-lo às suas necessidades.

adicione código html para formar tags no formulário de contato 7

Etapa 4. Editar configurações de email

Em seguida, você deve configurar o email enviado a partir do formulário de contato. Sem surpresa, você faz isso sob o Enviar guia na parte superior.

definir configurações de e-mail do formulário de contato 7

Você encontrará os campos pré-preenchidos com tags semelhantes ao formulário de contato anterior. Ele também fornece as tags de campo disponíveis, incluindo as novas que você criou anteriormente (se você salvou o formulário). Você pode usá-los para personalizar como você receberá mensagens do seu formulário de contato..

Aqui está o que cada campo significa:

  • Para – O endereço de email para o qual as mensagens serão enviadas. Você geralmente pode deixar como está.
  • De – Remetente do email. Por padrão, é definido como o nome da pessoa usando seu formulário de contato.
  • Cabeçalhos adicionais – Espaço para campos adicionais de cabeçalho da mensagem. As configurações padrão enviam sua resposta ao e-mail da pessoa que está entrando em contato com você, não ao e-mail de origem (ou seja, seu site) quando você pressiona Resposta. Também é possível colocar destinatários para CC ou BCC lá.
  • Corpo da mensagem – O corpo do email que você receberá.
  • Excluir linhas com tags de correio em branco da saída – Ao marcar isso, se alguma das tags usadas estiver vazia, o plug-in as excluirá da mensagem.
  • Use o tipo de conteúdo HTML – Por padrão, a mensagem é enviada em texto sem formatação. Marque esta caixa para usar HTML.
  • Anexos de arquivo – Se o seu formulário permitir upload de arquivos, as tags para esses arquivos pertencerão aqui. Você também pode usá-lo para anexar arquivos hospedados no seu servidor.
  • Correio (2) – Um modelo de correio adicional frequentemente usado como resposta automática. Marque para ativar.

As opções padrão são muito boas. A única coisa que precisamos mudar para o nosso exemplo é a linha de assunto.

configurar um filtro no seu programa de email

Usando o formato acima, agora você pode configurar um filtro em seu programa de e-mail para classificar as mensagens por linha de assunto, dando prioridade às consultas comerciais. Isso é tudo sobre as configurações de e-mail por enquanto.

Etapa 5. Adicionar um formulário de mensagens

Em seguida é o Mensagens aba. Você pode configurar as mensagens que seus visitantes podem encontrar ao usar o formulário.

configurar mensagens de formulário para o formulário de contato 7

São mensagens de erro, mensagens de sucesso ou apenas dicas de como usar o formulário corretamente. Nós achamos que eles já são muito bons, então geralmente deixamos tudo como está. Se você tiver um motivo para alterar algum deles (por exemplo, para se adequar ao tom do seu site), sinta-se à vontade para fazê-lo.

Etapa 6. Personalizar configurações adicionais

Finalmente, você obtém as configurações adicionais.

formulário de contato 7 configurações adicionais

Por padrão, eles estão vazios. Você pode fazer coisas diferentes – limitando a capacidade de apenas pessoas logadas enviarem o formulário de contato para definir o formulário no modo de demonstração para fins de teste. Não é importante para nossos propósitos, mas você pode encontrar todas as opções diferentes no documentação.

Etapa 7. Adicione o formulário ao seu site

Agora que você terminou de configurar o formulário, é hora de obtê-lo em seu site. A primeira coisa que você precisa fazer é salvar o formulário através do botão com o mesmo nome.

Antes de fazer isso, adicione um nome ao topo. Isso tornará o formulário mais distinto, caso você crie vários.

Depois de salvar seu formulário, um código de acesso aparecerá na tela:

formulário de contato 7 shortcode para adicionar formulário de contato ao wordpress

Você o usará para colocar o formulário onde quiser. A primeira coisa que você deseja fazer é marcá-lo e copiá-lo. Quando terminar, vá para a página onde deseja colocar o formulário. Por exemplo, você pode simplesmente criar uma nova página e nomeá-la Contato. Cole o shortcode no editor do WordPress.

formulário de contato 7 shortcode no editor wordpress

Quando você agora publica a página e acessa o front-end:

Formulário de contato 7 formulário na página

Aí está. Observe o menu suspenso que criamos anteriormente. Agora faz parte do formulário de contato, conforme necessário.

Simples, certo? Além disso, você pode usar o mesmo método para colocar o formulário em qualquer outro lugar.

Etapa 8. Inclua um formulário de contato em uma barra lateral (opcional)

Não há nada mais fácil do que colocar o formulário de contato em uma barra lateral. Basta ir para Aparência> Widgets. Adicione um widget de texto a qualquer área widgetizada que você deseja que o formulário de contato apareça e cole o código de acesso.

adicionar formulário de contato ao widget wordpress

Não se esqueça de salvar o widget! Quando você agora volta ao front-end do seu site, existe:

formulário de contato no widget WordPress

Você acabou de dominar o básico da adição de um formulário de contato no WordPress. Ainda não estamos no fim. Ainda há muitas coisas a serem feitas para melhorar ainda mais seus formulários.

Formulários de contato no WordPress – Próximas etapas

Depois de ter o formulário no seu site, o trabalho não termina. Ainda há algumas coisas importantes a serem resolvidas, como estilizar seu formulário, protegê-lo contra spammers de email e implementar medidas de proteção para dados pessoais. Vamos fazer isso em ordem:

Alterando o design do formulário

Idealmente, não há necessidade de alterar o estilo do seu formulário de contato. Provavelmente, no nosso caso, porque o Formulário de contato 7 usa código HTML padrão como rótulo ou input [type = "text"] criar campos de formulário.

Nos bons temas do WordPress, eles são definidos na folha de estilos. Conseqüentemente, o formulário de contato provavelmente se ajusta automaticamente ao design do site. Você pode ver isso no site de exemplo acima. Caso você ainda precise fazer ajustes, você tem várias opções.

Conforme mencionado, os formulários do Formulário de contato 7 têm marcação HTML padrão. Você pode simplesmente alterar o CSS associado e, portanto, a aparência dos formulários. Lembre-se de que isso também tem consequências para outros campos de entrada no seu site que compartilham a mesma marcação.

Além disso, todos os formulários criados com o Formulário de contato 7 são fornecidos com um código específico do plug-in. Você pode encontrar o código usando as ferramentas do desenvolvedor no seu navegador.

alterar o design do formulário de contato via css

Por exemplo, você pode fazer alterações no estilo do formulário inteiro usando o .wpc7-form Classe CSS. Esteja ciente de que isso tem consequências para todos os formulários criados com o Formulário de contato 7, mas deixa intocados outros campos de entrada do site..

Se você deseja ser ainda mais específico e alterar o estilo apenas para formulários específicos, está com sorte. Como você pode ver na captura de tela acima, todo formulário do Formulário de contato 7 recebe seu próprio ID de CSS.

Você pode usar isso para direcionar elementos por formulário. Além disso, é possível fornecer aos elementos em seus formulários suas próprias classes e identificações CSS.

adicione classe css e id para entrar em contato com o formulário 7

Com eles, você pode direcioná-los ainda mais especificamente.

Em resumo, o que você quiser alterar o design de seus formulários, você tem todas as ferramentas para fazer isso.

Implementando a proteção contra spam

O spam é um grande tópico quando se trata da web e sites em geral. Se você deixar seu endereço de e-mail desprotegido em seu site, existem muitos programas automáticos por aí que os buscarão e começarão a enviar ofertas não solicitadas, e-mails de pesca e muito mais..

Infelizmente, o mesmo se aplica aos formulários de contato. A menos que você defina medidas para evitá-lo, também existem programas que podem enviar spam por meio de formulários de contato.

Felizmente, o Formulário de contato 7 oferece maneiras fáceis de evitar isso. Uma delas é simples: inclua no seu formulário um questionário que os bots não possam responder, como uma simples equação.

formulário de contato 7 proteção contra spam via questionário

A tag do questionário torna isso possível. É tão fácil de usar quanto todas as outras tags do Formulário de contato 7 e você pode encontrar informações adicionais aqui.

Além disso, existe o reCAPTCHA. Este é um serviço do Google para combater spam. Você precisa de uma chave API e a integra ao Formulário de contato 7. Encontre instruções aqui. Isso pode ter consequências para a proteção de informações pessoais. Mais sobre isso na próxima seção.

Você pode usar a tag reCAPTCHA para adicioná-la ao seu formulário. O criador do Formulário de contato 7 também possui um plug-in Captcha chamado CAPTCHA realmente simples que você pode usar para a mesma finalidade.

Você também pode usar plug-ins de terceiros para proteção contra spam. O mais conhecido é, é claro, Akismet e o Formulário de contato 7 oferece instruções detalhadas sobre como usar os dois juntos.

Existem outros, por exemplo Formulário de contato 7 Honeypot ou WPBruiser. Para este último, você precisa de um extensão paga para que funcione com o Formulário de contato 7. Também há mais opções que você pode encontrar facilmente.

Nota lateral importante: Formulários de contato e GDPR

Você deve estar ciente de que houve recentemente algumas alterações nas leis de privacidade da Internet na Europa. Em 25 de maio de 2018, o Regulamento Geral de Proteção de Dados (RGPD) entrou em vigor.

Ele trouxe várias alterações às leis que dizem respeito ao uso de informações pessoais online. Também ameaça pesadas multas para quem violar os regulamentos.

Por que isso é importante? Os formulários de contato coletam dados pessoais. Por esse motivo, se você estiver sob a jurisdição dos regulamentos (e a maioria das pessoas faz agora), precisará prestar atenção em algumas coisas.

Primeiras coisas primeiro: não somos um escritório de advocacia!

Abaixo, você encontrará várias dicas sobre como tornar seu formulário de contato compatível com o GDPR. Essas dicas foram compiladas da melhor maneira possível..

No entanto, ninguém aqui no site websitesetup.org é advogado e nem o apresentamos na TV. Por esse motivo, o abaixo não substitui uma consulta jurídica profissional e não deve ser visto como aconselhamento jurídico.

Ok, é demais para a parte “se você tiver problemas, por favor, não volte e nos processe”. Vamos para as dicas!

Dicas para tornar seu formulário de contato compatível com GDPR

Veja como criar formulários de contato preocupados com a privacidade:

  1. Não colete dados que você não precisa – Os formulários de contato permitem escolher quais campos incluir. Se houver algum dado que você realmente não precisa, pare de coletá-lo. Dessa forma, se houver uma violação, você não poderá perdê-la.
  2. Desativar qualquer rastreamento – Se você estiver usando um formulário de contato que rastreia cookies, agentes do usuário e / ou IPs do usuário, será necessário desativá-lo para ser compatível com o GDPR. Aparentemente, o Formulário de contato 7 não funciona, portanto não há nada a fazer. Verifique o formulário de contato de sua escolha, se você usar qualquer outra coisa.
  3. Obter consentimento absoluto – Adicione uma maneira ao seu formulário para que as pessoas autorizem a coleta de dados. Por exemplo, o Formulário de contato 7 oferece uma caixa de aceitação. Importante: não marque a caixa de seleção para ser ativada por padrão. Os usuários precisam fazer isso sozinhos. Além disso, inclua uma mensagem informando o que você coleta e com que finalidade, além de um link para sua política de privacidade.
  4. Tenha uma política de privacidade em vigor – Falando nisso, no GDPR todo site profissional precisa exibir uma política de privacidade que explique quais dados eles coletam e como os usam. Você também precisa dar aos visitantes a capacidade de solicitar seus dados pessoais e removê-los. Este é um tópico mais complexo do que podemos abordar aqui. Use o link abaixo para encontrar mais informações.
  5. Implementar HTTPS – O uso de SSL / HTTPS criptografa a troca de dados entre o navegador e o servidor. Isso é importante para os formulários de contato para manter os dados pessoais seguros. Também é considerado prática comum agora. Confira nosso guia para saber como implementá-lo.

De tudo o que lemos, o acima deve ser suficiente para tornar os formulários de contato compatíveis com a nova lei. Obviamente, há mais neste tópico para os proprietários de sites. Você pode descobrir mais aqui e aqui.

Outros ótimos plugins de formulário de contato para WordPress

Além do Formulário de contato 7, existem muitos plugins disponíveis para criar formulários de contato no WordPress. Aqui estão alguns outros bons candidatos.

Formulários Jetpack (livre)

formulários jetpack

O Jetpack é um conjunto de plugins poderosos produzidos pelo WordPress.com (veja nossa comparação do WordPress.org vs WordPress.com). Isso inclui um módulo para criar formulários de contato. Ao ativá-lo, você pode começar a inserir formulários no seu site WordPress diretamente no editor de postagem e página.

Aqui estão alguns recursos de destaque:

  • Rápido e fácil de usar
  • Alertas por e-mail para que você saiba sobre os envios de formulários
  • Faça os ajustes de dentro do editor do WordPress
  • Uma ótima solução para criar formulários simples

Ao usar os formulários Jetpack, certifique-se de implementar algum tipo de proteção contra spam. estamos falando por experiência própria. O mencionado acima WPBruiser é uma opção gratuita.

HappyForms (livre)

HappyForm logoHappyForms é relativamente novo no mercado. Ele se integra ao WordPress Customizer, o que facilita muito a introdução. Além disso, possui os seguintes recursos:

  • Leve e rápido
  • Completamente livre para usar (mas vem com a marca)
  • Permite criar formulários via arrastar e soltar
  • Mostra envios de formulários no painel do WordPress
  • Vem com proteção contra spam integrada

Formulário de contato 7 (livre)

Formulário de contato 7

Com o Formulário de contato 7, você pode gerenciar vários formulários de contato diferentes com uma interface básica e fácil de usar. Eles também têm uma versão premium, mas servem como doação. O prêmio realmente não dá nem oferece nada (além de uma nova animação de carregamento do mouse).

  • Rápido e fácil de usar
  • Você pode fazer ajustes dentro do WordPress
  • Lógica condicional para formulários de contato

Ótima opção gratuita.

Ninja Forms (freemium)

Ninja Forms

Este plug-in permite criar formulários por meio de uma interface amigável. Tem uma versão gratuita, mas também oferece um edição Premium com recursos adicionais, complementos, suporte, layouts e muito mais. Esses incluem:

  • Conecte-se facilmente com serviços comuns de email marketing
  • Capacidade de aceitar pagamentos através de seus formulários
  • Sincronize formulários com CRM como o Salesforce

As associações ao Ninja Forms custam US $ 99 / ano ou mais.

Gravity Forms (Prêmio)

logotipo da gravidade

Gravity Forms é provavelmente a solução premium mais popular. É bastante avançado, possui uma boa interface de usuário e um ótimo sistema de suporte. Ao contrário de outras entradas nesta lista, este plugin é apenas premium, mas você recebe muito pelo seu dinheiro.

  • Mais de 30 tipos de campos de formulário
  • Uma enorme variedade de complementos
  • Uploads de arquivos
  • A capacidade dos envios de usuários aparecerem no front end
  • Formulários de várias páginas
  • Lógica condicional e cálculos avançados

Se você estiver interessado em Gravity Forms, seus planos começam em US $ 59 / ano.

Caldera Forms (freemium)

formas de caldeira

A entrada final nesta lista também permite criar formulários com uma interface gráfica. Além disso, possui os seguintes recursos:

  • Dê aos visitantes a possibilidade de enviar suas próprias postagens
  • Serviços de auto resposta
  • Recursos anti-spam
  • Formulários da web completamente responsivos

Além da versão gratuita, há também um edição inicial a partir de US $ 6,24 / mês – US $ 74,99 / ano.

Formulários de contato do WordPress em poucas palavras

Aprender a adicionar um formulário de contato ao WordPress é algo que qualquer pessoa que possui um site deve fazer. É uma das maneiras mais importantes para as pessoas entrarem em contato com você. Um formulário de contato faz com que seu site pareça mais profissional, protege você contra spammers, garante que você obtenha as informações necessárias e age como um porteiro.

Neste artigo, abordamos como adicionar um formulário de contato ao WordPress usando o Formulário de contato 7. Examinamos a proteção avançada contra estilo e spam do seu formulário. Além disso, o post abordou o importante tópico de conformidade com o GDPR para formulários de contato e dicas sobre como alcançá-lo. Por fim, analisamos vários outros plugins excelentes que você pode usar para adicionar um formulário de contato ao seu site WordPress.

Até agora, você já sabe tudo o que precisa para adicionar um formulário ao seu próprio site. Esperamos que isso traga grandes oportunidades e novos contatos interessantes.

Você tem alguma dúvida sobre como adicionar um formulário de contato ao seu site? Em caso afirmativo, informe-nos na seção de comentários abaixo.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me