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

//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>

O post Redirecionamento de página com base na opção do select – Contact Form7 WordPress apareceu primeiro em Nano Academy.

<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>

//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%;
}

O post Como deixar Contact Form 7 em duas colunas WordPress apareceu primeiro em Nano Academy.

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

</div>

<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>

O post Contact Form 7 Placeholder – Tudo o que você precisa saber apareceu primeiro em Nano Academy.

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

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:

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:

*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:

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

O post Escolher destinatário com base na opção do select Contact Form 7 WordPress apareceu primeiro em Nano Academy.

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:

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

O post Criar redirecionamento de página no Contact Form 7 WordPress apareceu primeiro em Nano Academy.

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 a chave (key) do Google reCAPTCHA;
• Como adicionar o Google reCAPTCHA sem plugin;
• E como inserir o Google reCAPTCHA na tela de login do WordPress.;
• Como incluir  o Google reCAPTCHA no Contact Form 7.

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;

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.

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.

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.

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

Preencha os campos conforme mostrado na imagem abaixo:

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.

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.

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.

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

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:

É 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!

O post Como inserir Google reCAPTCHA em formulários e na tela de login do WordPress apareceu primeiro em Nano Academy.

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.

No menu principal foi criado uma opção com o nome de 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

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!

O post Salvar contatos enviados pelo Contact form 7 no WordPress apareceu primeiro em Nano Academy.