Como 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 quer saber e interagir com quem está por trás do conteúdo que lê. Por que você acha que existem perfis de autores e comentários de blogs?

Por esse motivo, neste artigo, você aprenderá a adicionar um formulário de contato ao seu site WordPress. A postagem abordará primeiro as razões pelas quais é uma boa ideia e, em seguida, você receberá um guia passo a passo sobre como incluir um formulário de contato em seu site por meio de um plugin.

Também falaremos sobre como alterar o design do 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 – GDPR – algo muito falado ultimamente.

Finalmente, 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 entrar no como, vamos examinar o porquê. Há muitos bons motivos 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 por e-mail – O spam é uma praga. Você perceberá isso rapidamente quando tiver um site WordPress que usa comentários do blog.
    Uma coisa que os spammers fazem é varrer automaticamente os sites em busca de endereços de e-mail desprotegidos, para que possam adicioná-los às suas listas de e-mail. Formulários de contato impedem que isso aconteça, dando aos visitantes a chance de entrar em contato sem publicar seu endereço online.
  • Peça as informações certas – As pessoas que entram em contato com você nem sempre enviam todas as informações de que você precisa. Com um formulário de contato, você pode solicitá-lo antecipadamente. Também oferece uma maneira de filtrar consultas, por exemplo, por tipo ou por qual assunto. Isso facilita a sua vida e reduz muito de um lado para o outro.
  • Informe seus clientes – Por outro lado, os formulários de contato também podem atuar como o primeiro ponto de informação. Você é capaz de incluir informações para os chamadores para que eles saibam sobre o tempo de resposta esperado e as medidas que podem tomar antecipadamente para resolver sua dúvida. Isso reduz a probabilidade de vários e-mails da mesma pessoa impaciente.

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

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

Existem muitos plugins WordPress para adicionar um formulário de contato ao seu site, tanto gratuito quanto premium. Vamos falar sobre alguns deles mais adiante neste artigo. Para o tutorial a seguir, usaremos o Contact Forms 7, o mais popular de todos.

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

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

Etapa 1. Instalar o Plugin do Formulário de Contato 7

Instalar o Contact Form 7 é tão fácil quanto qualquer outro plugin WordPress. Basta entrar em seu site, vá para Plugins> Adicionar novo e digite seu nome na caixa de pesquisa.

Instalando Contact Forms 7 no WordPress

Deve aparecer em primeiro lugar. Clique em Instalar agora para baixá-lo 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 Contact na barra lateral do WordPress. Clicando nele você chegará a esta tela.

Menu do Contact Forms 7

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

Mais importante, você encontrará uma lista de todos os formulários de contato em seu site. Inclui um formulário de amostra que você pode, teoricamente, usar imediatamente.

Clique para iniciar a edição ou clique em Adicionar novo na parte superior da tela. Ambos vão chegar aqui:

Adicionando Formulário no Contact Forms 7

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

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

Contact Forms 7 cria aqueles com um pouco de HTML mais tags personalizadas. Tudo entre denota um campo do formulário de contato e a descrição do texto que pertence a ele. Os campos reais são criados pelo que está entre os colchetes.

Isso significa que, para criar um formulário de contato, você precisa aprender linguagens de programação? Nã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.

Configurando formulário no Contact Forms 7

É tudo normal. 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 para as quais priorizar.

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. Isso leva você a este menu:

Configurando dados no Contact Forms 7

Veja como preencher campos diferentes:

  • Tipo de campo – Escolha se o campo é necessário para enviar o formulário de contato ou não.
  • Nome – indica o nome usado na tag. Ele não será exibido para os visitantes, mas será mais fácil para você lembrar o objetivo da tag e também configurar o e-mail enviado para sua conta posteriormente.
  • Opções – Insira as opções disponíveis para 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 – Neste local você pode atribuir uma classe CSS ou um id ao campo. Isso é muito útil para um estilo personalizado. Nós falaremos sobre isso depois.

Aqui está como eu preenchi:

Preenchido dados no formulário do Contact Forms 7

Quando estiver satisfeito, clique em Inserir Tag para colocá-lo no formulário.

Adicionando tag no fomulário do Contact Forms 7

Esteja ciente 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 a seleção . Quanto mais você usar o plugin, melhor você entenderá como ele funciona.

Agora tudo o que resta é 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, em seguida, ajustá-lo às suas necessidades.

Adicionando tag no fomulário do Contact Forms 7

Etapa 4. Editar configurações de e-mail

Em seguida, você precisa configurar o e-mail enviado para você a partir do formulário de contato. Não é novidade que você faz isso sob a aba Mail no topo.

Configurando e-mail no contact forms 7

Você encontrará os campos pré-preenchidos com tags semelhantes ao formulário de contato anterior.

Ele também fornece tags de campo disponíveis, incluindo quaisquer novas que você criou anteriormente (se você salvou o formulário). Você pode usá-los para personalizar como receberá mensagens do seu formulário de contato.

Veja o que cada campo significa:

  • Para – O endereço de e-mail para o qual as mensagens serão enviadas. Você geralmente pode deixar isso como está.
  • De – remetente do e-mail. Por padrão, é definido como o nome da pessoa que usa seu formulário de contato.
  • Cabeçalhos Adicionais – Espaço para campos de cabeçalho de mensagem adicionais. As configurações padrões enviam sua resposta para o e-mail da pessoa que está contatando você, não para o e-mail de onde veio (ou seja, seu site) quando você clica em Responder .
    Também é possível colocar destinatários no CC ou no BCC .
  • Corpo da Mensagem – O corpo do e-mail que você receberá.
  • Excluir linhas com tags de e-mail em branco – Ao verificar isso, se alguma das tags usadas estiver vazia, o plugin as excluirá da mensagem.
  • Use o tipo de conteúdo HTML – Por padrão, a mensagem é enviada em texto simples. Marque esta caixa para usar o HTML.
  • Anexos de arquivo – se seu formulário permitir uploads de arquivos, as tags desses arquivos pertencerão aqui. Você também pode usá-lo para anexar arquivos hospedados em seu servidor.
  • Mail (2) – Um modelo de e-mail adicional usado frequentemente como um autoresponder. 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.

Editando a linha de e-mail no Contact Forms 7

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

  CLUBE VIP PREMIUM WORDPRESS  

Associe-se ao Clube Vip e tenha acesso a milhares de Temas e Plugins Premium WordPress com atualizações diárias e adicionamento de itens todos os dias. Conheça mais e venha fazer parte você também.
Quero Conhecer agora

Etapa 5. Adicionar uma mensagem de formulário

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

Configurando as mensagens no formulário no Contact Forms 7

Estas são mensagens de erro, mensagens de sucesso ou apenas dicas sobre como usar o formulário corretamente. O que você precisa fazer é traduzir para o português.

Etapa 6. Personalizar configurações adicionais

Finalmente, você chega às configurações adicionais.

Configurações Adicionais Contact Forms 7

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 para o modo de demonstração para fins de teste. Não é importante para nossos propósitos, mas você pode encontrar todas as diferentes opções na documentação.

Passo 7. Adicione o formulário ao seu site

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

Antes de fazer isso, você pode querer adicionar um nome no topo. Isso tornará a forma mais distinta no caso de você criar várias outras.

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

Shortcode do Contact Forms 7 para adicionar no WordPress

Você vai usá-lo para colocar o formulário onde quiser. A primeira coisa que você quer fazer é marcar e copiá-lo.

Uma vez feito isso, vá para a página onde você deseja colocar o formulário. Por exemplo, você pode simplesmente criar uma nova página e nomeá-la como Contato . Cole o shortcode no editor do WordPress.

Shortcode do Contact Forms 7 no editor do WordPress

Quando você publicar a página e ir para o front-end, você verá uma tela parecida com esta:

Contact Forms 7 na página do WordPress

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. Incluir 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 de widget que você deseja que o formulário de contato apareça e cole o shortcode.

Adicionar Contact Forms 7 no Widgets

Não esqueça de salvar o widget! Quando você voltar para o front-end de seu site, lá estará o seu formulário:

Contact Forms 7 na página no Widgets

Você acabou de dominar o básico de adicionar um formulário de contato no WordPress. Ainda não estamos no final. Ainda há um monte de coisas para melhorar 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 existem algumas coisas importantes para cuidar, por exemplo, estilizando seu formulário, protegendo-o contra spammers de e-mail e implementando medidas de proteção para dados pessoais. Vamos fazer isso em ordem:

1. Alterando o design do formulário

Idealmente, não há necessidade de alterar o estilo do seu formulário de contato. Isso é provável no nosso caso porque o Contact Forms 7 usa código HTML padrão como label ou input[type=”text”] para criar campos de formulário.

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

Como mencionado, os formulários do Contact Forms 7 possuem marcação HTML padrão. Você pode simplesmente alterar o CSS associado e, assim, a aparência dos formulários. Lembre-se de que isso também tem consequências para outros campos de entrada em seu site que compartilham a mesma marcação.

Além disso, todos os formulários criados com o Contact Form 7 vêm com um código específico do plugin. Você pode encontrar o código usando as ferramentas do desenvolvedor em seu navegador.

Contact Forms 7 configurando o CSS

Por exemplo, você pode fazer alterações no estilo do formulário inteiro usando a .wpc7-form classe CSS.

Esteja ciente de que isso tem consequências para todos os formulários criados com o Contact Forms 7, mas deixa outros campos de entrada em seu site intocados.

Se você quiser ser ainda mais específico e mudar o estilo apenas para formulários específicos, você está com sorte. Como você pode ver na captura de tela acima, todos os formulários do Contact Form 7 recebem seu próprio ID CSS.

Você pode usar isso para segmentar elementos em uma base por formulário. Além disso, é possível fornecer aos elementos em seus formulários suas próprias classes CSS e ids.

Adicionando CSS e id no Contact Forms 7

Com esses recursos, você pode segmentá-los ainda mais especificamente.

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

2. Implementando Proteção Contra Spam

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

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

Felizmente, o Contact Forms 7 oferece maneiras fáceis de evitar isso. Um deles é simples: inclua um questionário no seu formulário que os bots não podem responder, como uma simples equação.

Adicionando proteção contra Spam no Contact Forms 7

A tag de teste torna isso possível. É tão fácil de usar quanto todas as outras tags no ontact Forms 7 e você pode encontrar informações adicionais aqui .

Além disso, há o reCAPTCHA. Este é um serviço do Google para combater spam. Você precisa de uma chave de API e integrá-la ao ontact Forms 7. Encontre instruções aqui . Isso pode ter consequências para proteger 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 Contact Form 7 também possui um plugin Captcha chamado  Really Simple CAPTCHA que você pode usar para o mesmo propósito.

Você também pode usar plugins de terceiros para proteção contra spam. O mais conhecido é, claro, Akismet. Contact Form 7 oferece instruções detalhadas sobre como usar os dois juntos .

Existem outros, por exemplo,  Contact Forms 7 Honeypot ou WPBruiser . Para este último, você precisa de uma extensão paga para trabalhar com o Contatc Forms 7. Também há mais opções que você pode encontrar facilmente.

3. Nota Importante: Formulários de contato e GDPR

Você pode estar ciente de que recentemente houve algumas mudanças nas leis de privacidade na Internet na Europa. Em 25 de maio de 2018, o Regulamento Geral de Proteção de Dados (GDPR) entrou em vigor.

Trouxe uma série de alterações às leis que dizem respeito ao uso de informações pessoais online. Também ameaça com multas pesadas para qualquer pessoa que viole os regulamentos.

Por que isso é importante? Formulários de contato coletam dados pessoais. Por essa razão, se você se enquadra na jurisdição dos regulamentos (e a maioria das pessoas o faz agora), você precisa prestar atenção em algumas coisas.

3.1 Primeira coisa: 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 GDPR. Essas dicas foram compiladas com o melhor de nossas habilidades.

No entanto, ninguém aqui no Clube Vip é um advogado. Por esse motivo, as informações abaixo não substitui uma consulta com um advogado profissional na área e não deve ser visto como aconselhamento jurídico.

Ok, tanto para o “se você entrar em apuros, por favor não volte e nos processe”. Vamos para as dicas!

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

Veja como criar formulários de contato com privacidade:

  1. Não colete dados desnecessários . Os formulários de contato permitem escolher quais campos incluir. Se houver dados que você realmente não precisa, pare de coletá-los. Dessa forma, se houver uma violação, você não poderá perdê-la.
  2. Desabilitar qualquer rastreamento – Se você estiver usando um formulário de contato que rastreia cookies, agentes do usuário e / ou IPs do usuário, é necessário desativá-lo para estar em conformidade com o GDPR. Contact Forms 7 aparentemente não faz nenhum, então não há nada a fazer. Verifique o formulário de contato de sua escolha se ele usa este tipo de coisa.
  3. Obtenha um consentimento absoluto : adicione um caminho ao formulário para que as pessoas consintam a coleta de dados. Por exemplo, o Contact Forms 7 oferece uma caixa de aceitação .
    Importante: não defina a caixa de seleção para ser ativada por padrão. Os usuários precisam fazer isso sozinhos. Além disso, inclua uma mensagem que diga o que você coleta e para que finalidade, além de um link para sua política de privacidade.
  4. Ter uma política de privacidade em vigor – Falando nisso, sob GDPR todo site profissional precisa exibir uma política de privacidade que explique quais dados eles coletam e como eles o 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 formulários de contato para manter os dados pessoais seguros. Também é considerada prática comum agora.

De tudo o que li, as informações acima deve ser suficiente para fazer formulários de contato em conformidade com a nova lei. Claro, há mais sobre este assunto para os proprietários de sites. Você pode descobrir mais aqui aqui .

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

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

Formulários Jetpack (Gratuito)

Formulário Jetpack

O Jetpack é um conjunto de plugins poderosos produzidos pelo WordPress.com. Estes incluem um módulo para criar formulários de contato. Quando você ligá-lo, você pode começar a inserir formulários em seu site WordPress diretamente do editor de postagem e página.

Aqui estão alguns recursos de destaque:

  • Rápido e fácil de usar
  • Alertas de e-mail para informar sobre envios de formulários
  • Faça os ajustes de dentro do editor do WordPress
  • Ótima solução para criar formulários simples

Quando você usa os formulários do Jetpack, certifique-se de implementar algum tipo de proteção contra spam. Eu estou falando da experiência. O WPBruiser acima mencionado é uma opção gratuita.

Desenvolvedor

HappyForms (Gratuito)

HappyForms

HappyForms é relativamente novo no mercado. Integra-se com o WordPress Customizer, o que facilita muito os primeiros passos. Além disso, possui os seguintes recursos:

  • Leve e rápido;
  • Completamente livre para usar (mas vem com branding);
  • Permite construir formulários via arrastar e soltar;
  • Mostra envios de formulários no painel do WordPress;
  • Vem com proteção contra spam incorporada.
Desenvolvedor

Ninja Forms (Freemium)

Ninja Forms

Ninja Forms permite que você construa formulários através de uma interface amigável. Ele tem uma versão gratuita, mas também oferece uma edição premium com recursos adicionais, complementos, suporte, layouts e muito mais. Esses incluem:

  • Conecte-se facilmente com serviços comuns de e-mail marketing;
  • Capacidade de aceitar pagamentos através dos seus formulários;
  • Sincronize formulários com o CRM, como o Salesforce;
  • E muito mais!
Plugin no Clube
Desenvolvedor

Gravity Forms (Premium)

Gravity Forms

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

  • Mais de 30 tipos de campos de formulário;
  • Ampla gama de complementos;
  • Uploads de arquivos;
  • Capacidade de envio de envios de usuários no front-end;
  • Formulários de várias páginas;
  • Lógica condicional e cálculos avançados;
  • E muito mais!
Plugin no Clube
Desenvolvedor

Formulários de Caldera (Freemium)

caldera forms

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

  • Dar aos visitantes a possibilidade de enviar seus próprios posts;
  • Auto-respondedores;
  • Recursos anti-spam;
  • Formulários Web totalmente responsivos.
Desenvolvedor

QuForms (Premium)

Quforms

O Quform é um plugin WordPress avançado que permite que você construa vários formulários de maneira rápida e fácil com controle total.

Seja um formulário complexo ou um formulário simples contato, o Quform permitirá que você faça tudo isso sem tocar em nenhum código. Em alguns cliques, você terá um formulário totalmente funcional.

  • Formulários responsivos;
  • ReCAPTCHA invisível;
  • Arrastar e soltar elementos de formulário;
  • Formulários de várias páginas;
  • Progresso de upload de arquivo;
  • E muito mais!
Plugin no Clube
Desenvolvedor

Formulário de contato 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 formas mais importantes para as pessoas entrarem em contato com você. Um formulário de contato torna seu site mais profissional, protege você contra spammers, garante que você obtenha as informações necessárias e que tenha um primeiro contato com um possível lead.

Neste artigo, abordamos como adicionar um formulário de contato ao WordPress usando o Contact Forms 7. Aprovamos o estilo avançado e a proteção contra spam do formulário.

Além disso, o post cobriu o importante tema da conformidade com o GDPR para formulários de contato e dicas sobre como alcançá-lo. Finalmente, analisamos vários outros plugins excelentes que você pode usar para adicionar um formulário de contato ao seu site WordPress.

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

Você tem alguma dúvida sobre como adicionar um formulário de contato ao seu site? Se tiver, por favor nos avise na seção de comentários abaixo que teremos o maior prazer em respondê-las.

  CLUBE VIP PREMIUM WORDPRESS  

Associe-se ao Clube Vip e tenha acesso a milhares de Temas e Plugins Premium WordPress com atualizações diárias e adicionamento de itens todos os dias. Conheça mais e venha fazer parte você também.
Quero Conhecer agora
 Categoria: Plugins WordPress
Data: 04/04/2019
Referência: Websitesetup.org