Redirecionamento de página com base na opção do select – Contact Form7 WordPress

Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais uma dica rápida pra você sobre o plugin de WordPress Contact Form 7, nesse tutorial você aprenderá como fazer um redirecionamento de página com base na opção que o usuário escolheu no select.

Para contextualizar melhor, imagine que temos um formulário no qual há um select com as opções "Startups", "WordPress" e "Desenvolvimento" e cada opção dessa levará o usuário após enviar o formulário para uma página de obrigado diferente, assim você tem a liberdade de levar o seu usuário para uma página de obrigado específica para cada serviço ou produto.

Pegue o seu café, retire as distrações ao seu redor, coloque o seu fone e "vamo que vamo" com foco total!

Acompanhe o procedimento em vídeo e continue rolando a página para encontrar os Snipets de código que eu utilizei no exemplo para facilitar sua vida e você pode apenas copiar e colá-los em seu site fazendo as alterações necessárias conforme explicado no vídeo.

Snipets utilizados para realizar o processo de redirecionamento de página com base na opção do select no Contact Form 7.

O shortcode abaixo será utilizado para criar o campo de select no seu formulário. Esse cara é inserido no corpo do seu form, basta copiar e adequar os nomes para a sua realidade.

[select* interesse id:op-interesse include_blank "Startups" "WordPress" "Desenvolvimento"]

Maravilha, antes de continuarmos, faça o teste para ver se está tudo funcionando como deveria em seu site, você deve obter um resultado parecido com o da imagem abaixo:

Resultado obtido com o shortcode

Segue abaixo o snipet para ser inserido dentro do arquivo main.js ou footer.php, basta apenas seguir um dos processos ensinados no vídeo.

//Se for colocar o códio no main.js, lembre-se de retirar as tags <script>
<script>
    document.addEventListener('wpcf7mailsent', function (Event) {
        // Altere o 136 pelo ID do seu formulário.
        if ('136' == event.detail.contactFormId) {
            
            // se for mudar o nome da variável 'opinteresse' lembre-se de mudar em todos os lugares que ela aparece
            var opinteresse = document.getElementById("op-interesse").value;

            // Mude os nomes dos values para os nomes que estão no seu select.
            // Mude o link para qual cada opção levará o usuário após enviar o formulário.
            if (opinteresse == "Startups") {
                location = 'https://www.youtube.com/channel/UChy3qxl2x92wkBJxJ2n895A';

            } else if (opinteresse == "WordPress") {
                location = 'https://academy.nanoincub.com.br';

            } else if (opinteresse == "Desenvolvimento") {
                location = 'http://nanoincub.com.br';
            }
        }
    }, false)
</script>

Depois de seguir o que foi ensinado no tutorial, basta você testar e ver se tudo deu certo como deveria.

E aqui finalizamos mais um tutorial meu parceiro(a).

Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

  • Vá até o canal e Larga o Like nessa P#&%@
  • Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
  • Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
  • Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Faça como o Thiago Salgueiro e interaja com a gente, gostamos que de ajudar! Compartilhe suas dúvidas, experiências e resultados.

Espero que esse tutorial tenha te ajudado a ter mais clareza sobre como deixar o layout de um formulário com Contact Form 7 em duas colunas.

Quer aprender mais sobre Contact Form 7?

Veja outros tutoriais sobre o assunto:
Como instalar e configurar o Contact form 7 – PT 1/2
Como instalar e configurar o Contact form 7 – PT 2/2 – Configurando SMTP
Salvar contatos enviados pelo Contact form 7
Como inserir Google reCAPTCHA no Contact Form 7
Criar redirecionamento de página no Contact Form 7 após envio
Escolher destinatário com base na opção do select Contact Form 7
Inserir e Editar Placeholder no Contact Form 7
Como deixar Contact Form 7 em duas colunas

Como deixar Contact Form 7 em duas colunas WordPress

Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais uma dica rápida pra você sobre o plugin de WordPress Contact Form 7, dessa vez iremos sanar a dúvida do Thiago Salgueiro um dos Incubers que nos acompanha que é a seguinte "Como deixar Contact Form 7 em duas colunas".

O Processo é bem tranquilo e envolve HTML e CSS, mas não se assuste por não ter conhecimento sobre essas linguagens, eu vou te ajudar do começo ao fim para garantir que tudo sairá como deve ser. Vale ressaltar também que esse post é pra resolver uma dúvida pontual e não explicar detalhadamente sobre HTML e CSS, caso esse conhecimento lhe interesse deixe nos comentários que o seu pedido pode ser atendido e a gente comece uma série de vídeos sobre o assunto.

Todo o procedimento pode ser realizado através do painel do WordPress a partir da versão 5 que conta com um editor CSS maneiro para fazer pequenas alterações nos estilos do seu tema ou se você já conhece do assunto pode utilizar a sua IDE favorita.

Veja o resultado que iremos obter ao final do tutorial

Como deixar Contact Form 7 em duas colunas WordPress

Como deixar contact form 7 em duas colunas

Acompanhe o procedimento em vídeo e continue rolando a página para encontrar os Snipets de código que eu utilizei no exemplo para facilitar sua vida e você pode apenas copiar e colá-los em seu site fazendo as alterações necessárias conforme explicado no vídeo.

Snipets utilizados no processo para deixar formulário CF7 em 2 colunas

O pedaço de código abaixo é a estrutura do formulário, você tem total liberdade para alterar os textos e os campos do Formulário que ficam entre colchetes [].

As DIV's com a classe "formulario-item-50" deixará o campo com 50% de largura e a classe "formulario-item-100" deixará o campo com 100% de largura e isso será configurado via CSS posteriormente.

<div class="envelopa-formulario">
    <div class="formulario-item-50 item-esquerda">
        Seu nome (obrigatório)
        [text* your-name]
    </div>

    <div class="formulario-item-50">
        Seu e-mail (obrigatório)
        [email* your-email]
    </div>

   <div class="clearfix"></div>

<div class="formulario-item-50 item-esquerda">
        Seu nome (obrigatório)
        [text* your-name]
    </div>

    <div class="formulario-item-50">
        Seu e-mail (obrigatório)
        [email* your-email]
    </div>

   <div class="clearfix"></div>

    <div class="formulario-item-100">
        Assunto
        [text your-subject]
    </div>

    <div class="formulario-item-100">
        Sua mensagem
        [textarea your-message]
    </div>

[submit "Enviar"]

</div>

Depois criar a estrutura HTML do seu formulário é hora de inserirmos o CSS da "bagaça".

O pedaço de código abaixo será inserido no editor de CSS do WordPress que fica em Aparência > CSS adicional.

//Estilizando a classe para deixar os campos com 50% de largura
.formulario-item-50 {
  float: left;
  width: 50%;
  margin-bottom: 20px;
}
//Estilizando os campos que vão receber o conteúdo (inputs)
.formulario-item-50 input {
  width: 100%;
  float: left;
}

//Estilizando a classe item-esquerda para dar um espaço na direita entre os campos
.formulario-item-50.item-esquerda {
  padding-right: 15px;
}

//Configurando o comportamento dos campos no mobile
@media only screen and (max-width: 767px) {
  .formulario-item-50 {
    width: 100%
  }

  //Retirando o espaçamento da direita no mobile para alinhar os campos
  .formulario-item-50.item-esquerda {
    padding-right: 0;
  }
}

.formulario-item-100 {
  width: 100%;
  margin-bottom: 20px;
}

.formulario-item-100 input {
  width: 100%;
}

.formulario-item-100 textarea {
  width: 100%;
}

Agora é só acompanhar o procedimento ensinado no vídeo e testar!

E aqui finalizamos mais um tutorial que dessa vez foi a pedido de um Incuber. Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

  • Vá até o canal e Larga o Like nessa P#&%@
  • Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
  • Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
  • Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Faça como o Thiago Salgueiro e interaja com a gente, gostamos que de ajudar! Compartilhe suas dúvidas, experiências e resultados.

Espero que esse tutorial tenha te ajudado a ter mais clareza sobre como deixar o layout de um formulário com Contact Form 7 em duas colunas.

Quer aprender mais sobre Contact Form 7?

Veja outros tutoriais sobre o assunto:
Como instalar e configurar o Contact form 7 – PT 1/2
Como instalar e configurar o Contact form 7 – PT 2/2 – Configurando SMTP
Salvar contatos enviados pelo Contact form 7
Como inserir Google reCAPTCHA no Contact Form 7
Criar redirecionamento de página no Contact Form 7 após envio
Escolher destinatário com base na opção do select Contact Form 7
Inserir e Editar Placeholder no Contact Form 7

Contact Form 7 Placeholder – Tudo o que você precisa saber

Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais uma dica rápida pra você, dessa vez iremos aprender a inserir placeholder nos campos de um formulário utilizando o Contact Form 7 no WordPress. Em poucos minutos você aprenderá como deixar o formulário do site mais claro para o entendimento do usuário e assim terá contatos mais assertivos.

Antes de começarmos eu vou fazer uma breve introdução sobre placeholder para que você entenda o que realmente esse atributo faz. Então pegue o seu café, coloque uma música da sua preferência, tome uma respiração profunda e vamos ao processo.

O que é um placeholder?

A palavra Placeholder vem do que inglês place (lugar) + hold (segurar/reservar).

Embrasileirando e deixando mais fluído significa "reservado com um propósito específico", ou seja o placeholder em HTML é aquele texto que te ajuda a entender melhor sobre o campo do de um formulário, ele mostra qual o propósito específico daquele campo.

O Placeholer é uma tag HTML5 que mostra uma dica, um texto guia, uma breve especificação da informação que precisa ser inserida naquele campo do formulário. Eu gostaria de deixar um adendo aqui, o placeholder não substitui o label do formulário ele apenas leva mais clareza para o campo, os labels são os títulos dos campos do formulário e são muito importantes, então não use somente o placeholder dando um display:none na label.

Veja a seguir alguns exemplos de formulários que utilizam placeholder:
Contact form 7 Placeholder exemplo

Contact form 7 Placeholder exemplo

Contact form 7 Placeholder exemplo

Bom demais! Espero ter te ajudado a entender um pouco mais sobre placeholder na teoria, porque agora chegou a hora da prática meu "pácero".

Assista o vídeo do processo e se preferir continue a leitura e acompanhe o processo escrito

Como inserir Placeholder nos campos do Contact Form 7

Acesse o painel de edição dos campos do seu formulário e em seguida vá até a tag do campo que você deseja inserir o placeholder.
No final da tag antes de fechar o insira o atributo responsável pelo placeholder.

placeholder "Texto para o usuário"

Atributo para inserir placeholder

Feito isso é só salvar o seu formulário de contato e testar.

Vou deixar um Bônus aqui pra você.

Como mudar a cor do placeholder no Contact Form 7

O processo de mudar a cor do placeholder envolve um pouco de código, mas fique tranquilão que eu vou te ajudar, é bem sussa.

A primeira coisa que precisamos fazer é criar uma div para envelopar o nosso formulário de contato fazendo que com as alterações sejam inseridas apenas nos formulários que conterem a nossa div.

Na edição da estrutura do formulário insira a tag antes dos campos do formulário

<div class="c-form-contato">

e depois a tag

</div>

no final dos campos. Veja o meu exemplo:

Envelopando os campos do formulário com uma div

Maravilha, agora você só precisa colocar o código abaixo no topo do formulário e alterar para a sua cor desejada:

<style>
 .c-form-contato input::-webkit-input-placeholder { /* WebKit browsers */
   color: #ccc!important;
   opacity: 1;
 }
.c-form-contato input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #ccc !important;
  opacity: 1;
}
.c-form-contato input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #ccc!important;
  opacity: 1;
}
.c-form-contato input:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #ccc !important;
  opacity: 1;
}
</style>

Veja abaixo como ficou no meu exemplo:

CSS Placeholder

*Coloque o código acima da div que criamos.

Salve o formulário e veja se deu certo!

Meu exemplo

 

E aqui finalizamos mais um tutorial, espero que você tenha obtido mais clareza e aprendido a trabalhar com placeholder no Contact Form 7 e se ficou alguma dúvida é só deixar nos comentários que eu terei o maior prazer em ajudar!

Assista ao vídeo do processo no topo desse tutorial para fixar ainda mais o aprendizado.

Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

  • Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
  • Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
  • Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Escolher destinatário com base na opção do select Contact Form 7 WordPress

Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais uma dica rápida pra você, dessa vez iremos aprender a como escolher destinatário com base na opção do select no Contact Form 7 WordPress.

Esse procedimento é muito útil em casos nos quais a empresa tem um e-mail exclusivo para cada setor e no formulário de contato o cliente pode escolher um serviço ou setor da empresa e esse contato precisa ser enviado para o setor correto.

Por exemplo, vamos imaginar uma empresa com os seguintes setores “Comercial”, “Desenvolvimento” e “Design”, e no nosso site nós temos um formulário de contato com um campo de seleção chamado “Qual o objetivo do seu contato?” com as opções  “Comercial” “Desenvolvimento”  “Design” e de acordo com a opção que o usuário escolher o e-mail de destinatário será diferente.

Sendo assim os envios deverão seguir a seguinte ordem:

Comercial – comercial@minhaempresa.com.br

Desenvolvimento – desenvolvimento@minhaempresa.com.br

Design – design@minhaempresa.com.br

Maravilha, agora que você já tem uma noção do que vamos aprender aqui e quando é indicado a utilização desse método, vamos começar efetivamente o processo.

O procedimento é bem simples, eu vou levar em consideração que você já tem um conhecimento básico em contact form 7 e só deseja aprender a inserir um destinatário diferente para cada opção de um campo select no CF7.

Escolher destinatário com base na opção do select Contact Form 7 WordPress

Acesse o painel de edição do formulário que você deseja inserir o campo de seleção e clique para criar um menu suspenso nas opções de campos do CF7

Escolher destinatário com base na opção do select Contact Form 7 WordPress

Vamos entender o imagem acima:

No painel de configurações do campo menu suspenso você precisa inserir um nome para o seu campo, pois é com base nesse nome que o item marcado será enviado para o dono do site (destinatário).

Depois no campo Opções iremos inserir uma opção de escolha por linha e na frente da opção iremos colocar um pipe “|” sem dar espaço e em seguida para qual e-mail será enviado o contato caso aquela opção seja a escolhida. ex: Comercial|comercial@minhaempresa.com.br

Após inserir todas as suas opções é clicar em Inserir tag.

Caso você prefira, é só copiar a tag abaixo, colar na página de edição do seu formulário e fazer as alterações necessárias:

[select setor-empresa include_blank “Comercial|comercial@minhaempresa.com.br” “Desenvolvimento|desenvolvimento@minhaempresa.com.br” “Design|design@minhaempresa.com.br”]

No meu exemplo ficou desse jeito o meu campo de seleção:
Tag de seleção configurada para multiplos destinatários Contact Form 7

Ha mlk! Chegamos na reta final já!

O último passo é acessar a aba “Mail” do seu formulário e inserir a tag que criamos, nome caso é a [setor-empresa] no campo Para das configurações do formulário:

Inserindo tag do campo multivalorado

*Não se preocupe com a mensagem, é apenas porque a tag não tem o formato de e-mail e assim acusa esse warning, mas pode ficar tranquilo que tudo vai funcionar.

Agora é só testar e deixar o seu resultado ai nos comentário!

Assista ao vídeo no topo desse tutorial para você ver o procedimento completo e funcionando.

Segue um print de como ficou o resultado do meu campo de seleção já no site:

Campo de select com multiplos destinatários contact form 7

Perceba que os e-mails não são mostrados nas opções.

Espero que esse tutorial tenha te ajudado a ter clareza de como escolher o destinatário do contato com base na opção escolhida no select dentro do Contact Form 7

E aqui finalizamos mais um tutorial, porém, por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

  • Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
  • Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
  • Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????
  • Espero que esse tutorial tenha te ajudado a ter mais clareza sobre o processo de criar redirecionamento de página no Contact Form 7

Criar redirecionamento de página no Contact Form 7 WordPress

Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais uma dica rápida pra você, dessa vez iremos aprender a Criar redirecionamento de página no Contact Form 7 após o envio da mensagem do usuário.

Esse recurso é muito utilizado quando você tem uma página customizada para mostrar algo ao usuário depois que ele enviou um contato. Por exemplo: Quem nunca preencheu um formulário de contato de algum empreendedor digital e após o envio do formulário foi redirecionado para uma página na qual é mostrado um “Conteúdo secreto” somente para a lista vip de contatos? =D

Agora que você já sabe do que vamos falar nesse post, vamos ao que interessa.

Assista o vídeo do processo e se preferir continue a leitura e acompanhe o processo escrito

Como criar redirecionamento de página no Contact Form 7

Eu vou partir do princípio de que você já tem um conhecimento básico de contact form 7 e de como criar páginas no WordPress

Sendo assim segue uma visão geral do processo:

Criar redirecionamento de página sem plugin para Contact Form 7 WordPress

Com base na imagem acima, você irá acessar o formulário do Contact Form 7 que deseja inserir e redirecionamento, depois na aba Formulário você irá inserir o script abaixo no topo do editor de campos do CF7 :

<script>
 document.addEventListener('wpcf7mailsent', function (Event) {
   location = 'http://seu-dominio.com.br/sua-pagina-customizada';
 }, false);
</script>

Agora é só substituir o link de exemplo pelo seu link oficial, salvar, inserir o shortcode do seu formulário na página que deseja, testar e VRAU!

E aqui finalizamos mais um tutorial, porém, por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

  • Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
  • Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
  • Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Espero que esse tutorial tenha te ajudado a ter mais clareza sobre o processo de criar redirecionamento de página no Contact Form 7

Como inserir Google reCAPTCHA em formulários e na tela de login do WordPress

Salve salve Incuber, beleza? Aqui é o Paulo Felipe com mais um tutorial para WordPress com o objetivo de te ajudar a evoluir cada vez mais seus conhecimentos na ferramenta.

O reCAPTCHA é um recurso para proteger o seu site dos boots que ficam tentando acessar suas informações sem sua permissão e também que ficam enviando spans para o seu site. O Google desenvolveu seu próprio reCAPTCHA e que na minha opinião é o mais seguro e eficiente, além de ser muito simples de utilizar.

Nesse post você aprenderá:

Como gerar Google reCAPTCHA Key

Para deixar o processo mais completo eu criei um breve vídeo para mostrar como gerar o Google reCAPTCHA key.

Primeiramente é necessário criar uma conta no www.google.com/recaptcha com uma conta do gmail.
– Clique em My reCaptcha no canto superior da tela;
– Coloque o e-mail e senha do seu e-mail;

Configurando o domínio do seu site para receber o Google reCaptcha

– Preencha os campos seguindo o exemplo da imagem abaixo;
– O domínio deve ser inserido sem o http//www. ou seja somente o domínio.com.br sem / no final;

Cadastrando o seu domínio do Google reCAPTCHA

Pegar a chave gerada pelo Google reCAPTCHA

A próxima tela irá mostrar a chave gerada pelo Google e também algumas maneiras de você inserir o reCAPTCHA em seu site através do código.
Para ficar mais sussa vamos utilizar um plugin simples para funcionar nosso reCAPTCHA sem precisar mexer no código, assim vamos utilizar somente o site key e a secret key.
Deixe a tela Google reCAPTCHA aberta, pois utilizaremos ela em breve.

Pegar chave do Google para reCAPTCHA

Agora que você gerou a sua chave, vamos aprender como utilizá-la em seu site.

Como inserir o Google reCAPTCHA sem plugin

Inserir o Google reCAPTCHA sem nenhum plugin do WordPress com certeza é a melhor opção em termos de performance.

Dentro da Nano Incub temos a política de utilizar o mínimo de plugins possível, pois os plugins necessitam de atualizações de geralmente vem com muitas coisas que não utilizamos e isso acaba atrasando o carregamento do site.

E como fazer isso?

É bem simples. O WordPress por padrão já possui uma opção de integração externa.

Vá até a aba > CONTATO >> INTEGRAÇÃO.

Integração do Google reCAPTCHA com WordPress sem plugin
Integração do Google reCAPTCHA com WordPress sem plugin

Agora é só clicar em CONFIGURAR CHAVES e inserir os dados do reCAPTHCA Key que você captou acima.

Muito simples não é mesmo?

Como inserir Google reCAPTCHA na tela de login do WordPress.

Para deixar o processo mais completo eu criei um breve vídeo para mostrar como inserir o reCAPTCHA na tela de login do WordPress.

Para fazer esse processo iremos utilizar o plugin “Google Captcha (reCAPTCHA) by BestWebSoft” que em minha opinião é o melhor, ou pelo menos o mais utilizado, tendo hoje mais de 100K de instalações ativas.
Instale e ative o plugin no seu WordPress.

Google reCAPTCHA Best Web Soft

Depois de ativar clique no novo item do menu que foi criado pelo plugin:

Menu Google Captcha

Preencha os campos conforme mostrado na imagem abaixo:

Configurações para inserir reCAPTCHA na tela de login do WordPress
No card do WordPress default, marque em quais formulários de login e registro você deseja colocar o reCAPTCHA, o mais importante para esse tutorial é o Login form.

Você pode expandir o card de External Plugins e instalar o plugin da Bestwebsoft para contact form 7, eu particularmente prefiro instalar o plugin de reCAPTCHA do próprio CF7 que será o próximo processo.
*É apenas uma questão de gosto, fique a vontade para escolher entre usar o plugin da Bestwebsoft para CF7 ou continue comigo para ver como utilizar o plugin feito pela equipe do CF7.

Se você passar pelas opções contidas nessa tela, verá que é possível esconder o reCAPTCHA para usuários específicos, mudar o tema e colocar uma mensagem customizada para Whitelist Notivication.
Agora é só salvar as alterações.

Faça o logout no seu site e veja se deu tudo certo.

ReCAPTCHA na tela de login do WordPress

Maravilha, agora se você quiser inserir o reCAPTCHA no CF7 é só continuar aqui comigo.

Como inserir reCAPTCHA no Contact Form 7 – (Atualizado)

O Contact form 7 assim como todo Pokémon evoluiu (atualizou), antes ele aceitava o Google reCAPTCHA V2 (usado no tutorial) e hoje (11/19) ele não aceita mais o V2, somente o V3 e isso gerou diversos comentários no vídeo antigo de que não estava dando certo, acompanhe o vídeo atualizado “Como inserir reCAPTCHA V3 no Contact Form 7” a aprenda a fazer o processo atualizado.

Já que estou atualizando o processo no Contact Form 7, vamos iniciar o tutorial após você fazer o login na sua conta do Google reCaptcha.

Informações para gerar as chaves do Google reCAPTCHA V3

O Processo é bem parecido com o do V2, o que muda é que temos que marcar a opção reCAPTCHA V3.

Depois é só inserir o domínio do seu site, aceitar os termos e clicar em Enviar.

Após isso, será mostrada a tela com as suas chaves:

Agora vá no seu painel do WordPress e siga os passos destacados na imagem abaixo para chegar até o local de inserir as chaves do reCAPTCHA no Contact Form 7.

Caminho para inserir as chaves do reCAPTCHA no CF7

Após clicar em Definir Integração, aparecerá a tela para você inserir as chaves geradas.

Inserindo chaves no CF7

Maravilha, agora é só clicar em Salvar alterações e ver o resultado em seu site.
Se tudo correu como o esperado é pra aparacer um ícone semelhante ao da imagem abaixo no canto inferior direito do seu site:

Ícone Google reCAPTCHA

É isso ai Incuber, espero que esse post tenha ajudado a esclarecer suas dúvidas sobre Inserir google reCAPTCHA no WordPress, caso você tenha ficado alguma dúvida, se você tiver alguma sugestão ou opinião, deixe ai nos comentários, pois sua participação é o que nos move a produzir conteúdos cada vez mais elaborados e assertivos.

  • Se você ficou com alguma dúvida ou deseja acrescentar algum ponto no tutorial deixe nos comentários;
  • Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também,
  • Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Um abraço e até o próximo post!

Salvar contatos enviados pelo Contact form 7 no WordPress

Salve salve Incuber, beleza? Aqui é o Paulo Felipe com mais um tutorial para WordPress com o objetivo de te ajudar a evoluir cada vez mais seus conhecimentos na ferramenta.

Neste tutorial eu vou ensinar como salvar contatos enviados pelo Contact form 7 no WordPress de uma maneira bem simples e rápida, esse recurso é excelente pra você que gosta de ter as informações do seu site centralizadas no WordPress.

Pegue o seu café, aperte o play e bons estudos!

Tutorial Salvar contatos enviados pelo Contact form 7 no WordPress

Se você tem dúvidas sobre Como instalar e configurar o plugin Contact form 7 no WordPress clique no link e assista os 2 vídeos nos quais ensino tudo o que você precisa saber sobre o Contact form 7 para deixar ele funcionando corretamente em seu projeto com as Configurações de SMTP para contact form 7 

Para salvar os contatos iremos utilizar o plugin “Advanced contact form 7 DB“, vamos ao que interessa:

No menu esquerdo do WordPress vá em “plugins” e clique em “Adicionar novo“;

Pesquise por Advanced contact form 7 DB, Instale e ative o plugin.

Plugin advanced contact form db wordpress

No menu principal foi criado uma opção com o nome de Advanced CF7 DB

Menu Advanced CF7 DB

Envie um contato de teste, depois clique na opção, selecione qual é o formulário que você deseja ver.

Agora vamos dar uma passada pelas opções de ações que o plugin oferece

Salvar contatos enviados pelo Contact form 7 no WordPress

1 – Selecione qual é o formulário que você deseja ver os contatos;

2 – Você pode filtrar os contatos por data para ter o número de quantos contatos mensais o seu site está recebendo por exemplo;

3 – Pesquise por palavras contidas dentro das mensagens dos contatos;

4 – Apaga os filtros inseridos;

5 – Você pode deletar todos os contatos ou selecionar alguns e apagar de uma vez;

6 – Exporte os seus contatos para Excel, CSV ou PDF e crie uma lista de contatos para mandar conteúdos por e-mail,

7 – Lista de todos os contatos enviados por esse formulário, para visualizar o contato completo é só clicar em cima do ícone do lápis.

Eu fico por aqui nesse tutorial, espero ter lhe ajudado com o processo de salvar contatos enviados pelo Contact form 7 no WordPress

  • Se você ficou com alguma dúvida ou deseja acrescentar algum ponto no tutorial deixe nos comentários;
  • Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também,
  • Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Um abraço e até o próximo post!