Contact form 7 é um plugin do WordPress para criar formulários de contato, isso quer dizer, um campo onde o leitor preenche com seus dados e pode enviar perguntas, sugestões ou críticas para o leitor, algo que todo bom site necessita.

            E por que o Contact Form 7? Bom além de ser o mais utilizado e geralmente já vir instalado junto com o WordPress, ele é gratuito e muito eficiente.

1.  Instalando o plugin

            Primeiramente caso você não tenha o Contac Form 7 instalado, você deve ir na barra do menu do wordpress a sua esquerda, e clicar na aba Plugin > Adicionar novo.

            Logo em seguida no campo de pesquisa procure por Contact Form 7,e clique em instalar agora. E depois ative-o.

2. Conhecendo a estrutura

            Depois de instalado, devemos configurar o plugin do jeito que você achar melhor, para isso você deve ir em Form Contato > Adicionar novo (caso você já tenha algum modelo, pode também edita-lós ou até mesmo criar e usar mais de um tipo de formulário).

            Agora pode parecer um pouco complicado, mas é muito fácil entender como funciona, o plugin já vem com algumas opções pré-definidas, isso já nos ajuda a entender como ele funciona e como vamos fazer para deixa-lo do nosso gosto.

            A imagem acima demonstra como esse código vai ser convertido para o site, assim fica mais fácil de entendermos como configurar cada campo, e personalizar como quiser removendo ou adicionando o campo que preferir.

3. Personalizando e Configurando do seu jeito

            Os campos padrões são os mais comuns e utilizados, mas caso ache necessário adicionar ou remover um campo, veja como é fácil.

            Para adicionar um campo o próprio plugin já te ajuda, por exemplo vamos adicionar um campo para o leitor colocar o telefone. Primeiro clique em “tel” que irá abrir uma nova janela para configurar.

            A caixa required field significa campo obrigatório, caso você queira que a pessoa só consiga enviar o formulário preenchendo esse campo você seleciona, caso contrário pode deixar em branco, o nome é apenas um atributo para o código e não o que vai aparecer escrito no campo. Depois de configurada essa parte clique em Insert Tag.

            Então ele irá adicionar a tag “[tel Telefone]” no meu caso, mas se você deixar desse modo ela irá apenas aparecer o campo em branco para preencher, sem nenhuma indicação do que é, ou formatação. Para arrumarmos isso você deve escolher onde quer que apareça o novo campo, no meu caso vou utilizar logo após o e-mail.

            Para isso você vai ter que inserir alguns códigos HTML, porem nada complicado, quebre uma linha com enter onde você vai querer seu novo campo e digite assim:

            É o mesmo padrão dos outros códigos só muda o nome o <p> </p> quer dizer começo e fim de um paragrafo respectivamente e o <br /> é uma quebra de linha, não tem complicação, veja só o resultado no site:

            Caso queira adicionar um campo que não seja telefone segue o mesmo padrão para tudo. Agora depois de personalizado vamos configurar o formulário para que você receba corretamente no seu e-mail os dados do leitor.

            Bem no início você tem que dar um nome ao seu formulário, no caso de você querer criar mais de um, cada um irá ter um nome e sua própria personalização, esse nome é o que vai gerar o shortcode para inserir o formulário na página então não precisa ser muito complexo. No meu caso utilizei “form 01” e ele gerou um shortcode “[contact-form-7 404 "Not Found"]”.

            Em seguida vamos voltar onde ficam os códigos e mudar para a aba mail, lá vamos configurar para onde vai ser enviado o formulário e o que vai conter no e-mail. Primeiramente no campo “To” você deve inserir o e-mail em que vai querer receber o e-mail, o WordPress por padrão coloca o que você utilizou para fazer a conta. O campo “From” vai indicar de quem está sendo enviado o e-mail, no caso vai constar o nome preenchido no formulário e o seu próprio e-mail. Em assunto vai estar o assunto que o leitor preencheu no formulário e o que mais você quiser colocar, por exemplo o nome do site para saber de onde vem o e-mail. Em Message Body vai estar a estrutura do e-mail que você vai receber, com todas as informações que você adicionar, porem como adicionamos um campo de telefone, temos que adicionar no corpo do e-mail também, para isso você deve apenas inserir a tag [Telefone] por exemplo, no cabeçalho mostra todas as tags existentes no formulário. E depois é só salvar.

            A segunda aba “Mensagens” são as mensagens que vão aparecer após o leitor enviar o formulário, contendo as mensagens de erro ou sucesso dependendo da situação. Aqui não tem segredo, já vem ajustado mas caso você queira modificar algo é só preencher do seu modo.

4. Inserindo no seu site

            O último passo é inserir o formulário no site onde você desejar. Para isso é só pegar o shortcode gerado no plugin, no meu caso ““[contact-form-7 404 "Not Found"]” esse shortcode já vai gerar o seu formulário automaticamente onde quiser.

            Para inserir o short code, é fácil, vá até a sua página onde vai ficar o formulário, e insira o short code como texto mesmo, isso já vai gerar o formulário.

            Espero que tenha gostado do nosso tutorial, caso tenha alguma sugestão, duvida ou crítica, é só utilizar o nosso formulário de contato =]

Conheça outros tipos de formulários clicando aqui!

Quer aprender a fazer sites sem programação, com wordpress na prática? Conheça o Curso de WordPress mais completo do mercado, atualizado mensalmente e com aulas ao vivo para os alunos.