Pode ser um blog, um site comercial ou empresarial, a necessidade de ter uma página de contato com um formulário para os visitantes te enviarem um e-mail sempre surge. Exibir seu e-mail de contato é algo comum e legal de fazer, mas quando você oferece uma forma de comunicação mais rápida, seu visitante fica feliz – pois tempo útil foi poupado.
Se você está precisando colocar um formulário de contato em seu site WordPress, mas não sabe como fazê-lo ou quer uma dica sobre qual a melhor forma para realizar essa tarefa, nós do Canal WP vamos te ajudar.
Contact Form 7
Para criar a sua página de contato com um formulário para seus leitores ou clientes enviarem uma mensagem, você vai precisar do plugin Contact Form 7.
Basta você acessar o seu Painel WordPress e procurar pelo nome do plugin Contact Form 7. Você vai instalar e ativar o plugin para que comecemos a configurar o seu formulário.
Configurando o Formulário de Contato
Se você instalou e ativou o plugin Contact Form 7, uma nova opção será exibida no menu lateral do seu Painel como Form contato. Clique no novo menu Form contato > Formulários de contato e escolha a opção Editar para o formulário pré-cadastrado.
O Contact Form 7 já traz um modelo prontinho para você usar, então você pode editá-lo caso seja necessário – sempre use-o como modelo, pois ele já vem as tags html que deixam seu formulário organizado.
Logo no início da página de criação/edição do formulário você perceberá que pode renomear seu formulário. Também vai ver a shortcode que deve ser inserida no post, página ou widget onde você quer exibir seu formulário de contato.
Adicionar um Novo Campo ao Formulário
O modelo padrão de formulário de contato contém os principais campos que você deve usar: Nome, E-mail, Assunto e Mensagem.
Vamos agora adicionar um novo campo, um campo para receber o número de telefone do seu visitante. Clique no botão Gerar tag, localizado na lateral direita da página. Uma lista será exibida com os vários campos que você pode adicionar ao formulário de contato, escolha Número de telefone.
Algumas opções serão exibidas para você personalizar o seu novo campo para o formulário. Caso você deseje que o visitante preencha o campo de forma obrigatória, marque o checkbox referente a Campo obrigatório.
Caso deseje realizar marcações de id e classe para CSS, você também consegue de forma fácil. Atributos como size e maxlength são opcionais – eles servem para você delimitar o número de caracteres que o campo pode receber, você também pode adicionar um valor padrão para o campo, quando julgar necessário.
No box onde você personalizou o seu campo de telefone, você verá que deve colar um código no formulário e outro, no passo que veremos mais adiante. O Contact Form 7 deixa bem visível diversas instruções para que você faça tudo com facilidade.
Copie e cole o código do campo telefone em seu formulário de contato obedecendo as tags e organização pré-estabelecidas e antes do código referente ao botão Enviar. Devendo ficar como o exemplo:
<p>Telefone<br/> [tel tel-46]</p> <p>[submit "Enviar"]</p>
Você pode arrumar os campos do formulário como desejar, mas mantenha o botão de Enviar sempre no final.
Depois de colar o código para o campo telefone, seu formulário deve conter os campos para Nome, E-mail, Assunto, Mensagem, Telefone e o Botão de Enviar.
Configurar o Envio do Formulário
O formulário de contato que seu leitor vai visualizar e preencher já está pronto, agora você deve arrumar o e-mail que você vai receber com as informações dele.
Logo abaixo do box onde realizamos as últimas configurações, você deve inserir seu e-mail ou de quem vai receber os dados enviados pelo formulário.É um processe bem intuitivo e auto-explicativo.
Quando você criou o campo para telefone teve de copiar e colar um código para o formulário, lembra? Você viu também que existia um outro código, esse segundo código é o que você deve colar agora, no corpo da mensagem que será enviada a você. É dessa forma que você vai conseguir receber os dados digitados naquele campo.
Depois que você configurou tudo como ensinamos aqui, clique no botão Salvar – localizado no topo da página.
Adicionar o Formulário de Contato a uma Página
Como formulário personalizado e salvo, temos que atribui-lo a alguma página ou outro local que deseje.
Ainda no topo da página onde fizemos todas as alterações, você vai encontrar o shortcode referente aquele formulário. Copie o shortcode e cole dentro da página, post ou widget onde você quer exibir o formulário.
Siga todos os passos que citamos aqui e com certeza você vai conseguir o seu formulário de contato. Você pode criar quantos formulários quiser, com inúmeros campos e dos mais variados tipos. Se achar necessário, personalize as mensagens informativas do plugin.
Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixa seu comentário abaixo para podermos saber a sua opinião.
Ferramentas WordPress Veja Mais Ferramentas
Social Warfare PRO
MonsterInsights
Regenerate Thumbnail
boa noite, sou cerimonilista e tenho meu website para confirmação de presenças,nenho o formulario de contato nesta pagina para as confirmaçoes, porem as vezes são varios eventos criados, e no email nao vem especificado a qual casamento é a confirmação.
anteriormente vinha no assunto. depois de algumas atualizacoes sumiu. vem em branco qual codigo devo usar la em correio para os email s vrem personalizados para cada projeto criado.?
faltou a configuração de envio ….cadê? os detalhes são importantes
O melhor plugín para se criar um formulário de contato
Olá, tenho uma dúvida, tenho uma página estática de um questionário que inseri manualmente no WordPress, gostaria de saber como posso fazer pra inserir os dados desse questionário no banco.
O meu form está configurado como POST e action “Enviar.php” porém ao clicar em enviar fala que a página não existe, o que tenho que fazer obrigado.
Olá, tudo bem?
na configuração do formulário de contato, quando configuro o a aba mail,no campo De, estou usando isso: [your-name] , porém aparece uma mensagem de erro na configuração:A sintaxe da caixa de e-mail usada é inválida.
Tentei utilizar outros códigos, mas nenhum é aceito.
Entrei nesse dilema, pois no meu site, no envio do formulário, o usuário não consegue enviar o formulário. Preciso de ajuda!!!
Hoje não funciona mais a sintaxe from: [your-name]
Como faz agora? pq eu tenho que deixar para que ele funcione. Ai quando o e-mail chega e eu mando responder, fica o email wordpress@nomedosite.com.br ao invez do e-mail da pessoa que mandou.. como resolve essa questão?
Olá, tudo bem?
Eu consegui gerar o formulário de contato. Quanto a isso sem problemas.
Porém, ao entrar na página de contato percebi que em alguns dos meus itens as “Blanks”, que são os espaços onde você preenche, estão invisíveis, não aparecem os contornos.
Se puderem me ajudar ficarei muito grato.
Obrigado.
Até logo.
como colocar na pagina? ensine onde colocar o codigo.
Olá Marcelo,
Sinto muito que não tenha ficado claro no tutorial.
Quando você cria um formulário ele gera um Shortcode (um código curto) que você pode usar para exibir o formulário em qualquer página.
Dá uma olhada nessa imagem:
Como você pode ver o Shortcode é o código que parece com isso => [contact-form-7 id=”6″]. Pegue esse código e insira em qualquer página que você quer o formulário.
Abraço.
oi sandy, obrigada! qual plugin posso usar para criar um formulário apenas com campo de email e telefone? no CF7 só da para fazer o completao
Olá Sthefany,
Qualquer plugin de formulário permite você controlar quais campos você deseja no formulário.
Mas você pode achar mais fácil fazer isso com o plugin Ninja Forms > https://br.wordpress.org/plugins/ninja-forms/
Abraço.
Gabriel como faço para as opções do formulário ficar lado a lado. Gostaria de pelo menos duas opções ficasse lado a lado.Valeu!!
Sendy, muito obrigada! Estava a procura de um formulário de contato para o http://www.mudepraontem.com e o seu tutorial foi simples e objetivo.
Olá Jessika, Fico feliz de saber que lhe ajudamos. Devo dizer que visitei o seu site e o seu conteúdo é muito bacana, parabéns. O seu site tem um problema muito sério de desempenho. O carregamento das imagens está deixando seu site completamente lento. Recomendo que utilize o plugin WP Smush para otimizar mais suas imagens e tente utilizar uma ferramenta de compressão de imagens online (como o https://tinypng.com/) antes de fazer o upload no seu WordPress. Nós temos um tutorial sobre o WP Smush aqui no CanalWP, caso queira dar uma olhada. O design do seu site está bom,… Continue Lendo »
Oi, Gabriel! Agradeço de coração suas observações. Pode ter certeza que me esforçarei para corrigi-las e tornar o site melhor.
Com certeza darei uma olha no plugin WP Smush.
Até mais! =]
Gabriel, meu tema é o Sparkling da Collorlib. Entretanto, eu não sei onde configurar o tamanho da fonte do menu =[
Olá Jessika,
Adicione os códigos seguintes no final do arquivo style.css ou na seção de CSS do seu tema:
/* Aumentar o Tamanho da Fonte */
.nav a {
font-size: 15px !important;
}
/* Diminui o Tamanho da Logo */
div#logo {
width: 170px!important;
margin-top: 5px;
}
Veja se funciona.
Abraço.
Olá! eu segui o tutorial passo a passo e o formulário aparece direitinho mas quando faço testes como se fosse um leitor sempre aparece erro :Não foi possível enviar a sua mensagem. Por favor, tente mais tarde ou contate o administrador por outro método. O que será que aconteceu???
Pode ser que o servidor da suas hospedagem não esteja enviando emails através da função nativa wp_mail(). Entre em contato com o suporte e pergunte a eles se a função está programada para funcionar no servidor.
Tente usar um plugin de SMTP e conectar sua conta para funcionar através de outro servidor de email. Dê uma olhada => https://www.canalwp.com/plugins/enviar-email-usando-servidor-smtp-gmail/
Abraço!
Gabriel,
Muito obrigado, de verdade. Tava seguindo o tutorial e o erro apareceu, fui ler os comentários e encontrei sua resposta!! Valeuzão <3
Bom dia!
Estou usando o Contact Form 7 só que estou com problema na parte de upload de arquivo. Recebo no e-mail só o nome do arquivo e na pasta para onde é para ir o anexo que seria wp-content/uploads/wpcf7_uploads, esta criando um arquivo .htaccess, sabe me dizer o que pode ser? Obrigado!
Olá Daniel Souza,
Qual tipo e tamanho do arquivo que você está tentando enviar? Dependendo de ambos você talvez precise adicionar algumas configurações extras.
Talvez você precise modificar os arquivos aceitos e tamanhos máximo por arquivo, para fazer isso utilize o seguinte código:
[file your-file filetypes:pdf|txt limit:2mb]
Assim você adicionar suporte para PDF e arquivos com 2MB de tamanho.
Mude de acordo com a sua necessidade.
Para saber mais leia esse artigo(inglês):
http://contactform7.com/file-uploading-and-attachment/
Abraço.
Olá! eu segui o tutorial passo a passo e o formulário aparece direitinho mas quando faço testes como se fosse um leitor sempre aparece erro :Não foi possível enviar a sua mensagem. Por favor, tente mais tarde ou contate o administrador por outro método. O que será que aconteceu???
Pode ser que o servidor da suas hospedagem não esteja enviando emails através da função nativa wp_mail(). Entre em contato com o suporte e pergunte a eles se a função está programada para funcionar no servidor.
Tente usar um plugin de SMTP e conectar sua conta para funcionar através de outro servidor de email. Dê uma olhada => https://www.canalwp.com/plugins/enviar-email-usando-servidor-smtp-gmail/
Abraço!
Bom dia!
Estou usando o Contact Form 7 só que estou com problema na parte de upload de arquivo. Recebo no e-mail só o nome do arquivo e na pasta para onde é para ir o anexo que seria wp-content/uploads/wpcf7_uploads, esta criando um arquivo .htaccess, sabe me dizer o que pode ser? Obrigado!
Olá Daniel Souza,
Qual tipo e tamanho do arquivo que você está tentando enviar? Dependendo de ambos você talvez precise adicionar algumas configurações extras.
Talvez você precise modificar os arquivos aceitos e tamanhos máximo por arquivo, para fazer isso utilize o seguinte código:
[pre][code]
[file your-file filetypes:pdf|txt limit:2mb]
[/code][/pre]
Pode dar uma lida nesse artigo também:
http://contactform7.com/file-uploading-and-attachment/
Abraço.