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.
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:
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.
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
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.
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:
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"
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:
Maravilha, agora você só precisa colocar o código abaixo no topo do formulário e alterar para a sua cor desejada:
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 ????
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:
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|[email protected]
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:
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
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
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 :
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
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.
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.
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.
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 ????
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
