Em 2024, permanecer em contato com seu público é muito importante. Estabelecer uma lista de e-mails com um serviço como MailChimp o ajuda a entregar o conteúdo diretamente a seus assinantes.
As listas de e-mail são ótimas, mas e se um leitor ou cliente em potencial quiser entrar em contato diretamente com você? É aí que entram os formulários de contato! Neste artigo, vamos abordar como configurar o popular plugin Contact Form 7 para seu site WordPress.
Como instalar o Contact Form 7
O Contact Form 7 existe desde 2009 e recebeu mais de 5 milhões de downloads na última década. O Contact Form 7 pode ser instalado diretamente do repositório de plugins do WordPress. Se você procurar pelo “contact form 7”, você poderá encontrar o plugin juntamente com uma variedade de add-ons.
Após a instalação do plugin, você verá um item de menu rotulado “Contact” na barra lateral de seu painel de controle do WordPress. Aqui é onde todas as configurações do Contact Form 7 podem ser configuradas.
Os prós e contras de ter um formulário de contato
Antes de mergulharmos em como configurar o Contact Form 7 para seu site WordPress, passemos rapidamente por alguns dos prós e contras de adicionar um contato a partir de seu site.
Prós de ter um formulário de contato
- Um formulário de contato permite que leitores, clientes e ventiladores entrem em contato diretamente com você. Dependendo da finalidade de seu site WordPress, a capacidade de um visitante de se comunicar com você pode ser muito importante. Por exemplo, não adicionar um formulário de contato a um site de comércio eletrônico pode ser financeiramente prejudicial ao seu negócio porque as partes interessadas não poderão entrar em contato com você se tiverem dúvidas sobre seu produto.
- Um formulário de contato acrescenta legitimidade ao seu site ou negócio WordPress. Muitas pessoas vêem a presença de um formulário de contato como uma espécie de fator de confiança. A idéia de poder chegar até você, o proprietário do site, torna seu conteúdo mais digno de confiança.
Contras de ter um formulário de contato
- O spam pode ser um problema para formulários públicos como caixas de comentários e formulários de contato. Felizmente, com o Contact Form 7, você pode filtrar o spam com reCAPTCHA. Você pode até mesmo configurar uma regra da página Cloudflare para se proteger ainda mais. Mais adiante, no artigo, entraremos no Nitty-gritty como configurar a proteção contra spam no Contact Form 7.
- Após adicionar um formulário de contato ao seu site, você provavelmente precisará dedicar tempo para responder às mensagens. Isto não é necessariamente uma coisa ruim, dependendo de como você olha para ela. Algumas pessoas temem o processo de responder a e-mails, enquanto outras realmente gostam dele. De nossa experiência, os relacionamentos que se manifestam por ter um formulário de contato em seu site normalmente superam o custo da moderação, por isso, recomendamos que se fortaleça através dele!
Uma visão geral das configurações do Contact Form 7
Criar um formulário de contato com o plug-in Contact Form 7 é super fácil. Para começar, clique em Contato > Formulários de Contato em sua barra lateral WordPress. Nesta página, você pode visualizar todos os seus formulários de contato juntamente com os detalhes dos metadados associados.
Quando o Contact Form 7 é instalado pela primeira vez, ele também cria um formulário de exemplo. Antes de começarmos a criar um formulário de contato personalizado, vamos primeiro dar uma olhada no formulário de exemplo para ter uma idéia melhor de como funciona o Contact Form 7. Clique no Contact Form 1 para ver as configurações do formulário.
A página “Edit Contact Form” está dividida em quatro seções.
- Formulário – Personalize seu modelo de formulário de contato HTML com uma variedade de opções de campo como “texto”, “e-mail”, “caixas de seleção”, etc. Você também pode escrever HTML personalizado na caixa de personalização do formulário.
- Mail – Personalize o modelo de e-mail e as configurações utilizadas para e-mails de notificação.
- Mensagens – Personalize as mensagens que são exibidas após ações específicas. Por exemplo, você pode definir uma mensagem única a ser exibida depois que alguém enviar um formulário de contato.
- Configurações adicionais – Especifique trechos para habilitar recursos adicionais como o modo somente para assinantes, modo de demonstração e pulo de email.
Agora vamos dar uma olhada mais de perto em cada seção e criar um formulário de contato personalizado!
Como criar um formulário de contato WordPress
Para criar um novo formulário de contato, clique em Adicionar novo ao lado de “Contact Forms”.
Dê um nome ao novo formulário de contato, e clique em “Salvar”.
Na seção “Formulário”, adicione o HTML necessário para seu formulário de contato. Você pode usar os vários botões predefinidos para gerar atalhos para as tags de formulários populares. Para facilitar, confira as descrições abaixo para as tags de formulário pré-definidas que vêm com o Contact Form 7.
- Texto – Criar uma etiqueta de formulário para uma única linha de texto. Os campos de texto são úteis para nomes, sobrenomes e outros trechos baseados em texto que não requerem múltiplas linhas.
- E-mail – Criar uma etiqueta de formulário para um endereço de e-mail.
- URL – Criar uma etiqueta de formulário para uma URL.
- Tel – Criar uma etiqueta de formulário para um número de telefone.
- Número – Criar uma etiqueta de formulário para um número. Ao contrário dos campos de entrada “texto” ou “área de texto”, os campos “número” permitem apenas dígitos numéricos.
- Data – Criar uma etiqueta de formulário para uma data.
- Área de texto – Criar uma etiqueta de formulário para uma área de texto. Ao contrário do campo de entrada “texto” normal, um campo “área de texto” permite múltiplas linhas de texto. Eles são ideais para a inserção do corpo da mensagem.
- Menu suspenso – Crie uma etiqueta de formulário para um menu suspenso.
- Checkboxes – Criar uma etiqueta de formulário para checkboxes.
- Botões de rádio – Criar uma etiqueta de formulário para botões de rádio.
- Aceitação – Criar uma etiqueta de formulário para uma caixa de seleção de aceitação.
- Quiz – Criar uma etiqueta de formulário para um par de perguntas e respostas.
- Arquivo – Criar uma etiqueta de formulário para um campo de upload de arquivo
- Submeter – Criar uma etiqueta de formulário para um botão de submissão.
Agora vamos em frente e personalizar um formulário de contato. Para que seja completo, vamos criar um formulário de contato que utilize todas as etiquetas de formulário predefinidas no Contact Form 7.
A etiqueta do formulário “Texto”
Quando você clicar em uma etiqueta predefinida no Contact Form 7, você verá um menu popup como o abaixo. Neste menu, você pode configurar as configurações da etiqueta do formulário. Na parte inferior, você verá um atalho que pode ser embutido em seu modelo de formulário de contato.
Para a etiqueta do formulário “texto”, estamos usando as configurações abaixo para criar um campo de entrada para um nome.
- Tipo de campo – Campo Requerido
- Nome – texto-711 (auto-gerado)
- Valor padrão – Seu nome (usado como texto padrão de espaço reservado)
- Akismet – Sem controle
- Atributo de ID (CSS) – cf7-your nome
- Atributo de Classe (CSS) – cf7-your nome
Estas configurações geram o código de atalho abaixo.
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]Por enquanto, basta clicar no botão Inserir Tag para adicionar a tag do formulário ao modelo do formulário de contato. Mais tarde, adicionaremos mais tags HTML para estruturar o formulário.
A etiqueta do formulário “E-mail”
A seguir, criaremos uma etiqueta de formulário de e-mail que permitirá que nosso formulário de contato colete endereços de e-mail.
Para a etiqueta do formulário “e-mail”, configuramos as configurações abaixo.
- Tipo de campo – Campo Requerido
- Nome – email-632 (auto-gerado)
- Valor padrão – Seu e-mail
- Akismet – Sem controle.
- Atributo de ID (CSS) – seu correio eletrônico
- Atributo de Classe (CSS) – seu correio eletrônico
Estas configurações geram o código de atalho abaixo.
[email* email-632 id:email class:email placeholder "Your Email"]A etiqueta do formulário “URL”
Em alguns casos, você pode querer ter um campo de entrada em seu formulário de contato para coletar o website de alguém. Embora você possa tecnicamente usar uma tag de formulário “texto” normal para isso no Contact Form 7, recomendamos usar a tag de formulário “URL” em seu lugar. A tag do formulário “URL” irá gerar um campo de entrada que valida as URLs para garantir que elas sejam formatadas corretamente.
Para a etiqueta do formulário “url”, configuramos as configurações abaixo.
- Nome – url-601 (auto-gerada)
- Valor padrão – Seu site
- Akismet – Sem controle.
- Atributo de ID (CSS) – cf7-your-website
- Atributo de Classe (CSS) – cf7-your-website
Estas configurações geram o código de atalho abaixo.
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]O formulário “Tel” Tag
Similar às URLs, você também pode usar uma etiqueta padrão de formulário de “texto” para coletar números de telefone. Entretanto, é melhor usar a tag do formulário “tel” para garantir que o número de telefone seja válido.
Para a etiqueta do formulário “tel”, configuramos as configurações abaixo.
- Nome – tel-842 (auto-gerado)
- Valor padrão – Seu número de telefone
- Atributo de ID (CSS) – cf7-your-phone-number
- Atributo de Classe (CSS) – cf7-your-phone-number
Estas configurações geram o código de atalho abaixo.
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]A etiqueta do formulário “Date”
A etiqueta do formulário “date” do Formulário 7 de contato permite gerar um seletor de datas no estilo de um calendário. Este campo de entrada de “data” é útil para especificar datas de compromissos em um formulário de contato.
Para a etiqueta do formulário “data”, configuramos as configurações abaixo.
- Nome – data-389 (auto-gerada)
- Valor Padrão – Sua Data de Nomeação
- Gama – Nossa gama de datas personalizadas.
- Atributo de ID (CSS) – cf7-appointment-date
- Atributo de Classe (CSS) – cf7-appointment-date
Estas configurações geram o código de atalho abaixo.
[date* date-389 min:2020-09-15 max:2020-10-24 id:cf7-appointment-date class:cf7-appointment-date placeholder "Your Appointment Date"]A etiqueta do formulário “Área de texto”
A etiqueta do formulário “área de texto” permite criar uma caixa de texto com várias linhas que permite aos visitantes enviar mensagens mais longas. As áreas de texto são mais úteis para a captura do corpo de uma mensagem.
Para a etiqueta do formulário “área de texto”, configuramos as configurações abaixo.
- Nome – textarea-795 (auto-gerada)
- Valor padrão – Sua mensagem
- Atributo de ID (CSS) – cf7-your-message
- Atributo de Classe (CSS) – cf7-your-message
Estas configurações geram o código de atalho abaixo.
[textarea* textarea-795 id:cf7-your-message class:cf7-your-message placeholder "Your Message"]A etiqueta do formulário “Menu Suspenso”
A etiqueta do formulário “menu suspenso” do Formulário 7 permite que você crie um menu suspenso com múltiplas opções. Os menus suspensos são úteis para situações em que você deseja que um visitante selecione uma opção específica para enviar com o formulário. Por exemplo, se você administra uma empresa de manutenção WordPress, você pode configurar um menu suspenso que permite que um visitante escolha entre os serviços que você oferece.
Para a etiqueta do formulário “menu suspenso”, configuramos as configurações abaixo.
- Nome- menu-24 (auto-gerado)
- Opções – Opção 1, Opção 2, Opção 3, Opção 4
- Allow Multiple Selections – Verificado
- Inserir um Item em Branco como Primeira Opção – Verificado
- Atributo de ID – cf7-drop-down-menu
- Atributo de Classe – cf7-drop-down-menu
Estas configurações geram o código de atalho abaixo.
[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]A etiqueta do formulário “Caixa de Seleção”
A etiqueta de formulário de caixa de seleção permite a criação de caixas de seleção HTML. Similar aos menu suspenso, as caixas de seleção também podem ser usadas para selecionar opções pré-definidas. Dependendo da natureza de seu formulário de contato, as caixas de seleção podem funcionar melhor do que os menus suspensos. Por exemplo, se você tiver um pequeno número de opções para escolher, uma caixa de seleção reduz o número de cliques necessários para fazer uma seleção. Por outro lado, se seu formulário de contato tiver muitas opções, um menu suspenso pode funcionar melhor porque ocupa menos espaço vertical.
Para a etiqueta do formulário “caixa de seleção”, configuramos as configurações abaixo.
- Nome – checkbox-948 (auto-gerada)
- Opções – Opção 1, Opção 2, Opção 3
- Embrulhe cada item com Elemento de Rótulo – Verificado
- Atributo de ID – cf7-checkbox
- Atributo de Classe – cf7-checkbox
Estas configurações geram o código de atalho abaixo.
[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]Os “Botões de Rádio” Form Tag
A etiqueta do formulário “botões de rádio” permite criar botões de rádio com múltiplas opções. Ao contrário das caixas de seleção e menus suspensos, os botões de rádio só permitem que você selecione uma única opção.
Para a etiqueta do formulário “botões de rádio”, configuramos as configurações abaixo.
- Nome – radio-708 (auto-gerado)
- Opções – Opção 1, Opção 2, Opção 3
- Embrulhe cada item com Elemento de Rótulo – Verificado
- Atributo de ID – cf7-radio
- Atributo de Classe – cf7-radio
Estas configurações geram o código de atalho abaixo.
[radio radio-708 id:cf7-radio class:cf7-radio use_label_element default:1 "Option 1" "Option 2" "Option 3"]A etiqueta do formulário “Aceitação“
A etiqueta do formulário de “aceitação” do Formulário 7 pode ser usada para gerar uma única caixa de seleção com a finalidade de aceitar termos e condições. Com as configurações da etiqueta do formulário de aceitação, você pode especificar uma mensagem a ser exibida.
Para a etiqueta do formulário de “aceitação”, configuramos as configurações abaixo.
- Nome – acceptance-545 (auto-generado)
- Condição – Marque esta caixa para aceitar os termos.
- Atributo de ID – cf7-acceptance
- Atributo de Classe – cf7-acceptance
Estas configurações geram o código de atalho abaixo.
[acceptance acceptance-545 id:cf7-acceptance class:cf7-acceptance] Check this box to accept the terms. [/acceptance]O formulário “Quiz” Tag
A etiqueta do formulário “quiz” pode ser usada para criar perguntas básicas e responder a questionários em seu formulário de contato. Para criar uma pergunta, use o seguinte formato para separar a pergunta e a resposta – Pergunta/Resposta. Na captura de tela abaixo, nossa pergunta é “Em que ano foi lançado o WordPress?“, e a resposta (separada por um caractere “|”) é 2003.
Para a etiqueta do formulário “quiz”, configuramos as configurações abaixo.
- Nome – quiz-461 (auto-gerado)
- Condição – Marque esta caixa para aceitar os termos.
- Atributo de ID – cf7-quiz
- Atributo de Classe – cf7-quiz
Estas configurações geram o código de atalho abaixo.
[quiz quiz-461 id:cf7-quiz class:cf7-quiz "What year was WordPress released?|2003"]A etiqueta do formulário “Arquivo”
A tag “arquivo” do Contact Form 7 permite adicionar a funcionalidade de upload de arquivo a um formulário de contato. Isto é útil para situações em que você deseja que um visitante possa carregar uma imagem ou um arquivo PDF para enviar com o formulário. Por exemplo, se você tiver um blog de fotografia com galerias de fotos que publica envios de visitantes, você pode adicionar a funcionalidade de upload de arquivo para que as pessoas possam fazer upload de imagens.
Nas configurações da etiqueta do formulário, você pode especificar uma variedade de configurações para proteger seu formulário. Recomendamos sempre definir um limite de tamanho de arquivo para evitar que usuários maliciosos façam upload de arquivos enormes. Da mesma forma, especificar “tipos de arquivo aceitáveis” ajuda a bloquear seu formulário para os formatos de arquivo que você deseja e espera. Com o exemplo do blog de fotografia em mente, você pode querer limitar o tamanho do arquivo a 1 MB (1024 KB) e tipos de arquivo aceitáveis a formatos de imagem conhecidos como JPG e PNG apenas.
Para a etiqueta do formulário “arquivo”, configuramos as configurações abaixo.
- Nome – file-658 (auto-gerado)
- Limite do tamanho do arquivo – 1024kb
- Tipos de arquivo aceitáveis – jpg|png|gif
- Atributo de ID – cf7-file
- Atributo de Classe – cf7-file
Estas configurações geram o código de atalho abaixo.
[file file-658 limit:1024kb filetypes:jpg|png|gif id:cf7-file class:cf7-file]A etiqueta do formulário “Submit” (Enviar)
Por último, mas não menos importante, a etiqueta do Contact Form 7 do formulário “enviar”. Como você deve ter adivinhado, esta etiqueta do formulário permite gerar um botão de envio para um formulário de contato.
Para a etiqueta do formulário “enviar”, configuramos as configurações abaixo.
- Etiqueta – Submeter
- Atributo de ID – cf7-submit
- Atributo de Classe – cf7-submit
Estas configurações geram o código de atalho abaixo.
[submit id:cf7-submit class:cf7-submit "Submit"]Como estruturar um formulário de contato com etiquetas de formulário
Agora que temos todas as nossas etiquetas de formulário configuradas, é hora de criar o formulário de contato. Neste ponto, a configuração de seu formulário de contato deve se parecer com a captura de tela abaixo. Tome nota de todas as etiquetas de formulário que criamos acima. Com as tags do formulário instaladas, você pode usar o atalho [contact-form-7] para incorporar o formulário em um post ou página do WordPress.
No editor WordPress, cole o código de atalho em um bloco vazio.
Se você estiver usando o Editor WordPress Classic, você pode colar o código de atalho em qualquer lugar do editor de conteúdo.
Agora você deve poder ver o formulário de contato na página onde você adicionou o atalho do Contact Form 7. Veja aqui como é nosso formulário de contato com as configurações mencionadas acima. Como você pode ver, o Contact Form 7 converte automaticamente as tags do formulário em HTML válido que renderiza com os estilos CSS padrão incluídos com seu tema WordPress.
Nosso formulário de contato em seu estado atual é um bom ponto de partida, mas falta-lhe uma característica chave. As tags do formulário como “texto”, “e-mail”, e “URL” suportam os marcadores de lugar, mas outros elementos como “caixas de seleção” e “botões de rádio” não o fazem. Sem etiquetas apropriadas, a checkbox e os radio buttons não serão muito úteis para os visitantes porque eles não têm nenhum contexto. Felizmente, adicionar rótulos no Contact Form 7 é muito fácil!
Como Adicionar Etiquetas no Contact Form 7
Há duas maneiras de adicionar etiquetas ao Contact Form 7. Para as etiquetas do formulário abaixo, você pode simplesmente embrulhar a etiqueta do formulário com uma etiqueta.
- Texto
- URL
- Tel
- Número
- Data
- Área de texto
- Aceitação
- Quiz
- Arquivo
Dê uma olhada no exemplo da etiqueta do formulário “texto” abaixo.
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]Para adicionar uma etiqueta a esta etiqueta do formulário, podemos substituir a etiqueta do formulário com o snippet abaixo. Observe a instância adicional de “Your Name” logo após a <label> tag.
<label> Your Name
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]
</label>Veja como é esta mudança em nosso formulário de contato. Neste caso, a etiqueta recém-criada serve ao mesmo propósito que o local de instalação. Entretanto, se não quiséssemos especificar um espaço reservado dentro da etiqueta do formulário, então a etiqueta ajudaria a identificar a finalidade de uma caixa de entrada específica.
Para etiquetas de formulário que tornam múltiplos controles de formulário como caixas de seleção, botões de rádio e menus suspensos, envolver a </label> etiqueta de formulário dentro de uma etiqueta resulta em um erro. Isto acontece porque uma <label> etiqueta só deve ser usada com um único controle de formulário. A natureza das checkboxes, radio buttons e dropdown menu options envolvem vários controles de formulário, portanto são incompatíveis com a solução padrão de etiquetagem.
Para caixas de seleção, botões de rádio e menus suspensos, você tinha que adicionar um parâmetro de use_label_element dentro do código de atalho. Dê uma olhada no exemplo da etiqueta da caixa de seleção abaixo onde o use_label_element está em negrito.
[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]Uma vez adicionado o parâmetro use_label_element você pode adicionar uma etiqueta diretamente acima da etiqueta do formulário no editor de formulários de contato.
Por uma questão de completude, adicionamos etiquetas a todas as etiquetas do formulário em nosso formulário de contato. Você provavelmente não precisaria fazer isso para um local de produção, porque algumas etiquetas de formulário já incluem marcadores de lugar. Independentemente disso, queríamos demonstrar como as etiquetas funcionam.
Veja aqui como é nosso formulário de contato:
Configurações de email no Contact Form 7
Agora que configuramos a estrutura de nosso formulário de contato, é hora de dar uma olhada nas configurações de entrega de e-mails no Contact Form 7. Embora as configurações padrão de entrega de e-mail devam funcionar bem para a maioria dos sites, ainda é importante entender as várias configurações caso seu site ou caso de uso requeira uma configuração especial.
Para acessar as configurações de entrega do email, vá para o editor de formulários de contato e selecione a guia “Mail”.
As configurações de entrega do email do Formulário 7 permitem personalizar os modelos e parâmetros que são usados para gerar e enviar uma notificação para você depois que alguém faz um envio de formulário. Se você usar configurações incorretas, é possível que você não seja notificado sobre o envio de formulários. Assim, é importante testar a entrega do formulário depois de criar um formulário de contato e alterar as configurações.
O Contact Form 7 permite que você configure as seguintes configurações de entrega do email.
- Para – o endereço de e-mail para o qual enviar uma notificação.
- De – o endereço de e-mail de onde enviar uma notificação.
- Assunto – o assunto do e-mail de notificação.
- Cabeçalhos adicionais – especifique cabeçalhos adicionais de e-mail como “reply-to”.
- Corpo da mensagem – o corpo do e-mail de notificação.
- Anexos de arquivos – especifique quaisquer anexos a serem incluídos com o e-mail de notificação.
Agora, vamos analisar cada cenário para entender melhor como eles podem afetar a entrega de correspondência no Contact Form 7.
O campo “Para“
Certifique-se de especificar um endereço de e-mail real para a configuração “Para”. Por padrão, o Contact Form 7 atribuirá o endereço de e-mail associado à sua conta de usuário WordPress à configuração “Para”. Se seu endereço de e-mail WordPress não for válido, certifique-se de atualizá-lo em suas configurações de perfil e altere o endereço de e-mail no Contact Form 7 também.
O campo “De“
A configuração “De” deve usar o seguinte formato – Your Name. Para nossas configurações do email do formulário de contato, estamos usando kinstalife <[email protected]>.
Por padrão, o Contato 7 irá preencher este campo com [email protected]. Você vai querer ter certeza de que este endereço de e-mail é válido porque alguns hosts WordPress bloqueiam a saída de e-mails para endereços inválidos. Há várias maneiras de tornar este endereço de e-mail válido. Você pode configurar uma conta de e-mail dedicada para [email protected] ou pode ativar a funcionalidade “catch-all” em seu provedor de serviços de e-mail. Se você não conseguir configurar este endereço de e-mail, recomendamos mudá-lo para um endereço de e-mail válido para evitar problemas de entregabilidade.
O campo “Assunto“
A configuração “Assunto” pode ser usada para especificar uma linha de assunto para os e-mails de notificação. Por padrão, o Contact Form 7 define o assunto como Site Name "[your-subject]" – to nome do assunto no modelo de formulário padrão do Contact Form 7.
Se você não tiver uma etiqueta de formulário chamada “[your-subject]” em seu formulário, certifique-se de mudá-la para outra coisa. Por exemplo, se você só tiver uma etiqueta de formulário para capturar o nome de um visitante (por exemplo [your-name]), você poderia mudar a linha de assunto para You've Received a Message from [your-name].
O campo “Cabeçalhos Adicionais“
Em “Cabeçalhos adicionais”, você pode especificar cabeçalhos de e-mail como reply-to, CC, e BCC. Por padrão, o Contact Form 7 adiciona o seguinte cabeçalho – Reply-To: [your-email]. Este cabeçalho lhe permite responder ao endereço de e-mail especificado em um formulário de contato enviado.
O cabeçalho padrão do Contact Form 7 está bem se você estiver usando a etiqueta padrão do formulário de e-mail do Contact Form 7. Se não estiver, certifique-se de alterá-lo para corresponder ao nome da etiqueta do seu formulário de e-mail. Para nosso formulário de contato, o nome da tag do formulário de e-mail é “email-632”, portanto, a tag do formulário de reposta a formulário teria que ser mudada para Reply-To: [email-632].
O “Corpo de Mensagens“
A seguir está o “Corpo de Mensagens”, que determina o conteúdo do corpo do e-mail de notificação. O modelo padrão do Contact Form 7 usa [your-name], [your-email], [your-subject], e [your-message] etiquetas de formulário, e se parece com isto:
From: [your-name]
Subject: [your-subject]
Message Body:
[your-message]
--
This e-mail was sent from a contact form on kinstalife (http://kinstalife.com)Certifique-se de alterar estas etiquetas do formulário se não estiver usando-as em seu modelo de formulário de contato. Uma vez que o formulário de contato que criamos coleta muitas informações, podemos configurar o corpo da mensagem com etiquetas de formulário adicionais como esta:
Hello Brian, you've received a message from [text-711] ([email-632]).
Website: [url-601]
Phone Number: Tel-842
Appointment Date: date-389
Message: textarea-795
Contact Form 7 Configurações do email – Anexos de arquivo
Se seu formulário de contato envolver o upload de um arquivo, você pode incluir o arquivo com o e-mail de notificação. Em nosso formulário de contato, temos uma etiqueta do formulário de upload de arquivo chamada “[file-658]”. Assim, podemos adicionar esta etiqueta do formulário em “Anexos de Arquivo” para garantir que o arquivo será incluído com a notificação por e-mail.
Contact Form 7 Problemas de entrega do email
Se você descobrir que o Contact Form 7 não está enviando e-mails, há algumas coisas que você pode verificar antes de procurar um desenvolvedor WordPress para obter assistência.
- Verifique se seu servidor está enviando outros tipos de e-mails. Para testar isso, você pode acionar outra ação de envio de e-mails fazendo um comentário de teste em um post de blog ou enviando uma solicita ção de redefinição desenha em sua página de login do WordPress. Se você receber um e-mail após realizar uma destas ações, então é provável que o problema esteja relacionado à configuração do Contact Form 7. Se você não receber e-mails, contate a equipe de suporte de seu host e informe que você está tendo um problema com a entrega de e-mails.
- Certifique-se de que os campos “Para” e “De” no seu formulário de contato estejam configurados corretamente. Para que o Contact Form 7 funcione corretamente, ambos os campos devem ser preenchidos com endereços de e-mail reais.
Contact Form 7 Formulário de envio de mensagens
O Contact Form 7 permite que você personalize uma variedade de mensagens de envio de formulários. Estas mensagens são exibidas após uma determinada condição ser atendida. Por exemplo, se um visitante esquecer de preencher um campo obrigatório, o Contact Form 7 exibirá uma mensagem “O campo é obrigatório”. Para a maioria dos casos de uso, as mensagens padrão devem funcionar muito bem. Entretanto, se você quiser personalizar as mensagens, poderá fazê-lo clicando na guia “Mensagens” no editor do formulário de contato.
Como assegurar seu formulário de contato
Como os bots automatizados se tornaram mais inteligentes e mais difundidos ao longo dos anos, o spam se tornou um grande problema para os formulários de contato. Como os formulários de contato são normalmente abertos ao público na Internet, é bastante fácil para os raspadores da web detectá-los e disparar mensagens de spam para sua caixa de entrada de e-mail. Felizmente, há várias maneiras de evitar os spammers e proteger seu formulário de contato.
Proteja seu Contact Form 7 com reCAPTCHA
Se você já enviou um formulário na Internet, provavelmente já está familiarizado com o reCAPTCHA, uma tecnologia desenvolvida pelo Google para identificar o comportamento de bot automatizado. Versões mais antigas do reCAPTCHA (V2) exigiam que os usuários passassem um quebra-cabeça ou desafio.
A última versão do reCAPTCHA (V3) não requer nenhuma interação dos usuários. Em vez disso, ela monitora de forma transparente a atividade do usuário em segundo plano para distinguir entre visitantes humanos e bot. Como o Contact Form 7 suporta o reCAPTCHA V3, recomendamos o uso desta última versão porque ela proporciona uma melhor experiência de usuário para os visitantes.
Para configurar o reCAPTCHA, você precisará primeiro gerar uma chave API. Para fazer isso, faça login em sua conta Google e vá para a página de configuração do reCAPTCHA.
Passe pelo formulário de registro para criar seu reCAPTCHA.
- Etiqueta – Especifique uma etiqueta de sua escolha.
- reCAPTCHA Tipo – O Contact Form 7 suporta o reCAPTCHA v3, portanto, selecione essa versão.
- Domínios – Se seu site utiliza um domínio raiz, adicione a versão não-www e www de seu domínio. Se seu site utiliza um subdomínio, basta adicionar o subdomínio.
- Proprietários – O endereço de e-mail associado à sua conta Google será adicionado como um proprietário por padrão. Sinta-se à vontade para adicionar endereços de e-mail adicionais, se necessário.
Depois de preencher todas as opções, clique em Submeter. Em seguida, você será apresentado com sua “chave do site” e “chave secreta” específicas do site. Certifique-se de manter estas chaves em algum lugar seguro, pois você precisará adicioná-las ao Contact Form 7.
A seguir, clique em “Contato” no painel lateral do seu WordPress, e clique em Integração. Selecione a opção reCAPTCHA, e cole sua chave de site e chave secreta em seus respectivos campos. Finalmente, clique em Salvar mudanças para finalizar a integração do reCAPTCHA.
Após configurar o reCAPTCHA no Contact Form 7, você verá um logotipo reCAPTCHA no canto inferior direito de sua página de formulário de contato. Isto significa que reCAPTCHA está ativo e protegendo seu formulário de contato contra envio de spam.
Proteja seu formulário de contato com o Cloudflare (Opcional)
Se você usa o Cloudflare para proteger seu site, você pode configurar uma regra especial de página para sua página de formulário de contato para reduzir o envio de formulários de contato de spam.
Para adicionar uma regra de página, clique na guia “Page Rules” e use as seguintes configurações para ajudar a proteger sua página de contato.
- Se a URL combinar – *your-domain.com/your-contact-page/*
- Verificação de Integridade do Navegador – On
- Nível de Segurança – Alto
O recurso “Browser Integrity Check” do Cloudflare analisa os cabeçalhos HTTP. Se ele detectar um cabeçalho HTTP que é comumente usado por robôs e spammers automatizados, ele nega a solicitação ao seu site. Definir o “Nível de Segurança” para alto desafiará todos os visitantes que exibiram comportamento malicioso nas últimas duas semanas.
Ao limitar estas configurações à sua página de contato com a regra de correspondência de URL, outras páginas de seu site não serão afetadas por estas regras de página. Recomendamos esta configuração porque as páginas normais “somente leitura” em seu site normalmente não exigem uma configuração de nível de segurança mais elevado.
.
Resumo
O Contact Form 7 é o plug-in mais popular e por uma boa razão! Ele pode ser usado para criar tudo, desde formulários básicos de contato, até questionários de perguntas e respostas, até formulários complexos que suportam anexos de arquivos e menus suspensos.
O melhor de tudo é que ele vem com suporte reCAPTCHA embutido para ajudar a proteger seu formulário de contato contra spammers.
Você usa o Contact Form 7 em seu site WordPress? Se não, qual é a sua escolha preferida? Informe-nos na seção de comentários abaixo!
Brian has been a WordPress user for over 10 years, and enjoys sharing his knowledge with the community. In his free time, Brian enjoys playing the piano and exploring Tokyo with his camera. Connect with Brian on his website at brianli.com.
Deixe um comentário