Como criar uma página de contato do WordPress

Publicados: 2021-04-21

A página de contato do WordPress é uma parte essencial de qualquer site de negócios, blog pessoal ou página de portfólio online. Um formulário de contato permite que seu público solicite mais detalhes sobre seus produtos ou serviços. Ele permite aumentar a credibilidade do seu site e coletar mais detalhes sobre sua base de clientes. Independentemente dos muitos benefícios de um formulário de contato, o WordPress não inclui esse elemento por padrão.

Este tutorial fornece instruções passo a passo sobre como criar uma página de contato do WordPress com e sem usar o plug-in do WordPress da página de contato.

Para quem este guia será útil?

O guia a seguir inclui etapas fáceis para criar uma página de contato do WordPress por conta própria, mesmo que você ainda não seja um especialista em WordPress, o que será especialmente útil para webmasters iniciantes. Usando este guia, você pode praticar suas habilidades de desenvolvimento web. Também será útil para blogueiros e microempresas que desejam manter seus sites WordPress por conta própria e tornar seus recursos on-line o mais úteis e informativos possíveis. Não importa o quão habilidoso ou experiente você seja, as técnicas descritas neste artigo serão úteis para você.

Por que você deve adicionar uma página de contato do WordPress ao seu site?

A página de contato do WordPress é benéfica para os proprietários de empresas e seus clientes por vários motivos:

  • Seu blog ou site de negócios ficará mais profissional. Dessa forma, seu público saberá que pode entrar em contato com você sempre que tiver alguma dúvida ou problema relacionado ao seu micronicho.
  • Você pode estabelecer uma melhor comunicação com seu público enquanto permite que os usuários acessem você sempre que quiserem. Eles só precisam preencher alguns campos fornecidos.
  • Uma página de contato do WordPress é uma fonte valiosa de informações para as marcas. Sinta-se à vontade para decidir quais informações os usuários precisarão compartilhar. Podem ser endereços de e-mail dos clientes, nomes de usuário, países etc.
  • Usando uma página de contato, você evita ataques de spam.

Considerando todas as vantagens acima de usar um plugin WordPress da página de contato, vamos discutir:

  • Qual plugin escolher para criar uma página de contato do WordPress;
  • Como criar uma página de contato para WordPress usando um modelo.
Como criar uma página de contato no WordPress com um plug-in

Existem muitos plugins WordPress de página de contato disponíveis, por isso é fácil se perder em sua rica abundância. Escolhemos o Contact Form - WordPress Contact Form Plugin para facilitar a tomada de decisão que facilita a adição de um formulário de contato ao seu site.

É um plugin WordPress premium da Codecanyon ao preço de $ 24. Ao contrário dos plugins gratuitos do WordPress que são fáceis de encontrar através de uma pesquisa simples no painel WP, você precisa baixar o arquivo do plugin para o seu PC e enviá-lo para o seu site posteriormente. Uma vez feito, você pode escolher entre várias maneiras de adicionar o formulário de contato ao seu site:

  • Use um shortcode do WordPress que você pode adicionar a qualquer página do seu site WordPress.
  • O plugin inclui o elemento Visual Composer para criar uma página de contato no modo de arrastar e soltar.
  • Você também pode usar um widget para adicionar um formulário de contato à barra lateral ou ao rodapé.

Você pode encontrar muitos outros plugins de formulário de contato no diretório de plugins do WordPress. Muitos deles são gratuitos e fáceis de usar. Se você decidir criar uma página de contato usando um plug-in dedicado, não deverá enfrentar nenhum problema.

Como criar uma página de contato no WordPress sem um plug-in

Vamos ver como criar uma página Fale Conosco totalmente funcional no WordPress. Adicionaremos um formulário de contato sem nenhum plugin. Em vez disso, criaremos um modelo de página de contato personalizado para atingir nosso objetivo.

O que são modelos de página do WordPress?

No WordPress, são arquivos php responsáveis ​​pelo layout e funcionalidade de uma página web (estamos falando de páginas e não de posts). Todos os temas do WordPress vêm com um arquivo Page.php que é o modelo de página padrão. O Page Template é um recurso extremamente poderoso que permite que os desenvolvedores personalizem temas de acordo com suas necessidades. Neste tutorial, veremos como criar um modelo de contato personalizado.

Etapa 1: criar um modelo de contato

Navegue até a pasta Tema, crie um arquivo em branco e nomeie-o como contact.php (você pode usar um nome diferente). O arquivo php conterá a marcação HTML do formulário e o código PHP para processar a entrada do usuário. Escreva o seguinte código no topo do arquivo php.

 <?php /* Nome do modelo: Entre em contato */ ?>

O WordPress usa este bloco de comentários para identificar exclusivamente nosso modelo de página personalizada. Em seguida, copie e cole o seguinte código no arquivo contact.php:

 <?php
/*
Nome do modelo: Entre em contato conosco
 */
get_header(); ?>
<div id="primário">
<div id="content" role="main">
</div><!-- #conteúdo -->
</div><!-- #primary -->
<?php get_footer(); ?>

Com este código, adicionamos estrutura ao modelo de página de contato. Agora, nosso modelo tem seções de rodapé e cabeçalho. Na próxima etapa, vamos ver como adicionar a seção de conteúdo à nossa página.

Etapa 2: Adicionando formulário HTML

Um formulário de contato é um elemento simples com campos padrão. Neste guia, não nos concentraremos na parte de estilo. Basta adicionar o seguinte código ao Content Div ie (div)

 <form method="post" id="contactus_form">
Seu nome:<input type="text" name="yourname" id="yourname" rows="1" value="" />
<br /><br />
Seu e-mail:<input type="text" name="email" id="email" rows="1" value="" />
<br /><br />
Assunto:<input type="text" name="subject" id="subject" rows="1" value=""></p>
<br /><br />
Deixe uma mensagem:<textarea name="message" id="message" ></textarea>
<br /><br />
<input type="submit" name="submit" id="submit" value="Send"/>
</form>

O código é bastante autoexplicativo. Usamos quatro campos no formulário - Nome, Email, Assunto e Texto. Na próxima etapa, adicionaremos algum código php para processar a entrada do formulário.

Etapa 3: adicione o código PHP para processar a entrada do formulário.

O código PHP irá lidar com duas partes:

  • Validação.
  • Enviando o correio real.
Validação

Usamos dois tipos de validação:

  • Campo obrigatório:- isso irá verificar se o campo está preenchido ou não.
  • Formato do campo: verifica se o valor inserido está no formato desejado ou não.

    • Aplicaremos ambas as condições em todos os 3 campos de entrada, exceto "Deixe-nos uma mensagem" .

    Lógica de validação

    Em nossa lógica de validação, usamos uma variável flag. Seu valor será 0 ou 1. Se nossa validação for bem-sucedida, o sinalizador será definido como 1. Se algo der errado, o valor do sinalizador será definido como 0. Lógica bastante padrão. Aqui está o código para implementar essa lógica.

    Validação aplicada ao campo de nome
     if($_POST['seunome']=='')
{$flag=0;
echo "Digite seu nome<br>";
}
else if(!preg_match('/[a-zA-Z_x7f-xff][a-zA-Z0-9_x7f-xff]*/',$_POST['seunome']))
{$flag=0;echo "Por favor, digite um nome válido<br>";}
    Validação aplicada ao campo de e-mail
     if($_POST['email']=='')
{
$flag=0;echo "Por favor, digite o e-mail<br>";
}
else if(!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-] +)*(.[az]{2,3})$", $_POST['email']))
{
$flag=0;echo "Por favor, digite um e-mail válido<br>";
}
    Validação aplicada ao campo de assunto
     if($_POST['assunto']=='')
{
$flag=0;echo "Por favor, digite o assunto<br>";
}
    Validação aplicada ao campo de mensagem

    Não há necessidade de aplicar validação de campo de formato para o campo de caixa de mensagem como já mencionamos.

     if($_POST['message']=='')
{
$flag=0;echo "Por favor, digite a mensagem";
}

    Todos os pedaços de código são bastante autoexplicativos. Simplesmente certifique-se de que os campos de entrada não estejam vazios e apresentem o formato correto (nenhum caractere especial é usado).

    Processando a entrada do formulário

    Agora, nossa entrada está devidamente validada. Precisamos notificar o Administrador. O código a seguir processará os dados do formulário e enviará por e-mail os detalhes como Nome, Assunto do E-mail e Mensagem para o Administrador.

    Usaremos a função wp_mail para enviar e-mails. Para saber mais sobre o wp_mail, clique aqui.

     <?php
if($flag==1)
{
wp_mail(get_option("admin_email"),trim($_POST[seunome])" enviou uma mensagem para você de ".get_option("blogname"),stripslashes(trim($_POST[message])),"De: ". trim($_POST[seunome])." <".trim($_POST[email]).">rnReply-To:".trim($_POST[email]));
echo "E-mail enviado com sucesso";
}
?>
    Código final do Modelo Fale Conosco

    A versão final do código contido no arquivo php do modelo de contato conosco se parece com isso:

     <?php
/* Nome do modelo: Entre em contato */
get_header(); ?>
<div id="primário">
<div id="content" role="main">
<font color="#FF0000">
<?php
if(isset($_POST['submit']))
{
$flag=1;
if($_POST['seunome']=='')
{
$flag=0;
echo "Digite seu nome<br>";
}
else if(!preg_match('/[a-zA-Z_x7f-xff][a-zA-Z0-9_x7f-xff]*/',$_POST['seunome']))
{
$flag=0;
echo "Por favor, digite um nome válido<br>";
}
if($_POST['email']=='')
{
$flag=0;
echo "Por favor, digite o e-mail<br>";
}
else if(!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-] +)*(.[az]{2,3})$", $_POST['email']))
{
$flag=0;
echo "Por favor, digite um e-mail válido<br>";
}
if($_POST['assunto']=='')
{
$flag=0;
echo "Por favor, digite o assunto<br>";
}
if($_POST['message']=='')
{
$flag=0;
echo "Por favor, digite a mensagem";
}
if (vazio($_POST))
{
print 'Desculpe, seu nonce não foi verificado.';
saída;
}
senão
{
if($flag==1)
{
wp_mail(get_option("admin_email"),trim($_POST[seunome])" enviou uma mensagem para você de ".get_option("blogname"),stripslashes(trim($_POST[message])),"De: ". trim($_POST[seunome])." <".trim($_POST[email]).">rnReply-To:".trim($_POST[email]));
echo "E-mail enviado com sucesso";
}
}
}
?>
</font>
<form method="post" id="contactus_form">
Seu nome:<input type="text" name="yourname" id="yourname" rows="1" value="" />
<br /><br />
Seu e-mail:<input type="text" name="email" id="email" rows="1" value="" />
<br /><br />
Assunto:<input type="text" name="subject" id="subject" rows="1" value=""></p>
<br /><br />
Deixe uma mensagem:<textarea name="message" id="message" ></textarea>
<br /><br />
<input type="submit" name="submit" id="submit" value="Send"/>
</form>
</div><!-- #content --></div><!-- #primary -->
<?php get_footer(); ?>
    Captura de tela final da página Fale Conosco.

    É assim que seu formulário de contato ficará

    Como criar WordPress Fale Conosco Página 1

    Etapa 4: usando o modelo de contato

    Abra seu painel do WordPress. Crie uma nova página e não se esqueça de selecionar o modelo "Fale Conosco" dentro da caixa de atributos da página. Veja o instantâneo abaixo.

    Como criar WordPress Fale Conosco Página 2

    Agora, publique a página e adicione-a ao menu. Como resultado, você obtém uma página de contato brilhante e totalmente funcional que você criou sem usar um plug-in. Há muitas outras coisas que você pode adicionar à sua página de contato do WordPress. Uma coisa que vem à mente é adicionar um captcha ou alguma outra validação para evitar spam.