Como criar um formulário com o Contact form 7 (plugin wordpress)
O Contact form 7 é um plugin gratuito para WordPress que possibilita criar formulários de contato de uma maneira muito simples e funcional, ele conta com diversas opções que lhe permite criar campos dos mais variáveis tipos como “text”, “email”, “tel”, “menu suspenso” entre muitos outros. O plugin permite criar um e-mail automático (auto responder) para cada formulário, além de aceitar html, css e o framework bootstrap para customizar os seus formulários além de muitas outras funcionalidades. Nesse tutorial iremos aprender a: criar um formulário estilizado; configurar e-mails automático (auto responder) para o remetente; Configurar mensagens e redirect após cadastro; configurar SMTP do e-mail; e fazer com que após clicar em enviar o usuário seja redirecionado para uma página de “Obrigado pelo contato”. Instalando o plugin A primeira coisa a ser feita é instalar o plugin no seu wordpress, acesse o link de download (Baixar plugin Contact Form 7) ou se preferir acesse o menu “Plugin” em seu wordpress, clique em “adicionar novo” e pesquise por Contact form 7, agora é só instalar e ativar o plugin. Adicionando um novo formulário Com o plugin instalado basta parar o mouse em cima da opção “Form contato” localizada no menu principal do WP e clicar na opção “Adicionar novo”. Tela principal CF7 Bem vindo a tela principal do Contact form 7, a imagem a seguir explica um pouco sobre as opções principais do plugin. Está gostando deste turorial? Que tal se cadastrar em nossa newsletter para receber mais tutoriais relevantes sobre wordpress em seu e-mail. Agora que você já conhece um pouco das configurações gerais do Contact form 7, vamos definir os nomes e tipos de cada campo que irão compor o nosso formulário. O form conterá seis campos que serão: “Nome” (tipo texto); “E-mail” (tipo email); “Telefone” (tipo tel); “Estado” (tipo menu suspenso); “Assunto” (tipo texto); e “Mensagem” (tipo textarea). Apague todo o conteúdo do formulário padrão deixando apenas o botão de enviar [submit “enviar”]. Vamos começar criando os títulos de cada campo. 1 – Criando seu formulário do zero Para criar os títulos, basta um inserir “label” para cada campo da seguinte forma. <label>Nome</label> <label>E-mail</label> <label>Telefone</label> <label>Estado</label> <label>Assunto</label> <label>Mensagem</label> Depois de definir os títulos é hora de definir o tipo de cada campo. Para isso basta você escolher o tipo de cada campo na lista de tipo de campos. Para deixar o tutorial mais simples, vamos configurar apenas o nome do campo e se ele será obrigatório ou não. É muito importante definir os tipos corretos para campo pois assim o próprio plugin insere algumas validações como por exemplo se o email não conter @ ou . (ponto) quando o usuário enviar o formulário irá aparecer uma mensagem informando que o campo não foi preenchido corretamente. Os campos nome, email, telefone, assunto e mensagem seguirão a mesma formatação. Fica a seu critério definir quais campos serão obrigatórios ou não. O campo Estado que será do tipo “lista suspensa” terá a seguinte formatação: Depois dos campos inseridos, a sua tela de configuração de formulário estará parecida com a da imagem abaixo. *Lembrando que os campos com um asterisco * informam para o Contact form 7 que esse campo é obrigatório. Caso ele fique me branco, uma mensagem é exibida para o usuário. Para melhor identificação do usuário insira um * na frente do título de cada campo obrigatório. Primeira parte concluída! Clique em salvar e depois na aba “Mail”. 2 – Configurando os e-mails de resposta automática A segunda parte do tutorial consiste em configurar o e-mail, a forma como o formulário será mostrado para o destinatário e criar um e-mail automático para ser enviado ao remetente confirmando que o e-mail foi enviado com sucesso. Para deixar o tutorial mais real eu irei utilizar o meu e-mail para mostrar como funciona o recebimento do e-mail. Sinta-se a vontade para me enviar um e-mail caso tenha alguma dúvida, terei o maior prazer em ajudar. A imagem abaixo mostra a função dos quatro primeiros campos de configurações do e-mail que será entregue para o destinatário. Agora vamos configurar o corpo do e-mail que será entregue ao destinatário. A imagem a seguir mostra um exemplo de layout: Muito bem, o e-mail que será enviado para o destinatário já está configurado. Chegou a hora de configurar a resposta automática que será enviada para o e-mail do usuário. Marque a opção Mail (2) e vamos começar a terceira etapa do tutorial. A imagem a seguir mostra um exemplo de como configurar uma resposta automática com o Contact form 7. Lembre-se marcar a opção “Usar tipo de conteúdo HTML”. Clique em salvar. Caso apareça a mensagem “Este endereço de email não pertence ao mesmo domínio do site”, ignore-a. 3 – Configurando a aba mensagens e redirect pós cadastro (atualizado) Clique na aba “Mensagens”. Nessa aba você pode substituir as mensagens que vem por padrão, por mensagens personalizadas. Não vou aprofundar nessa parte porque é bem intuitiva. Segue imagem: Clique na aba configurações gerais e vamos configurar para onde o usuário será levado assim que ele enviar o contato, eu irei direcionar para a página inicial da Agência Nano Incub. Insira o seguinte comando: on_sent_ok: “location = ‘https://php81.nanolab.com.br/cliente/nanoincubv4’;” *Atenção* O método acima não funciona mais para redirect! Por isso você vai ter que utilizar o seguinte método: <script> document.addEventListener(‘wpcf7mailsent’, function (event) { location = ‘//php81.nanolab.com.br/cliente/nanoincubv4/’; }, false); </script> Insira o comando acima dentro do seu formulário, localizado na primeira aba do plugin. Insira um titulo para o seu formulário e clique em salvar. 4 – Configurações de SMTP Configurações de e-mail realizadas, agora vamos configurar o SMTP do e-mail que irá receber o formulário de contato, para facilitar o processo instale o plugin – Easy WP-SMTP. Link para download Easy WP-SMTP – https://br.wordpress.org/plugins/easy-wp-smtp/ Ou se preferir faça o download, instale e ative diretamente do wordpress. Plugin instalado? Então vamos continuar =D Pare o mouse na opção “Configurações” no menu principal do WordPress e clique em Easy-wp-smtp O painel principal do plugin será exibido, vamos inserir as configurações de smtp. Vamos
