Como criar formulário no WordPress para página de contato sem plugin

Como criar formulário no WordPress para página de contato sem plugin

Se não quisermos recorrer ao uso de plugins, podemos criar formulário no WordPress manualmente usando algumas funções e componentes padrões do cms.

Neste post, veremos como criar uma página com um simples formulário de contato personalizado. Para isso, criaremos um modelo chamado “Contato” e nele criaremos um formulário com os campos Nome, E-mail, Telefone e Mensagem.

Importante!

O html está preparado para bootstrap, caso seu tema não esteja em bootstrap, você precisará fazer pequenas mudanças na página para adaptar ao seu tema, se houver dúvida(s) de como fazer, deixa um comentário que será um prazer poder ajudar.

Colocaremos os campos Nome, E-mail e Mensagem como obrigatórios, verificando-os usando a tag “obrigatório” do HTML5. Também verificaremos, ao enviar o formulário, usando as funções WordPress e PHP, se esses campos estão preenchidos e têm o formato que esperamos deles, no caso de email, se o que o usuário digita está no formato de email. Fazemos isso para navegadores que não suportam HTML5.

No caso de encontrar algum erro, não enviaremos o formulário e exibiremos uma mensagem de erro com a classe WP_Error. E caso tudo esteja correto, enviaremos um email para o destinatário especificado com a função wp_mail ().

Primeiro de tudo, crie um template modelo. Para isso, na raiz do nosso tema, criaremos um arquivo com o nome: page-contato.php e, dentro dele, colocaremos o seguinte código:

Ah! Dentro do código, comento o que cada linha faz para que possamos entender o processo rapidamente:

<?php
/*
* Template Name: Contato
*/

// Exit if accessed directly | sair se alguém tentar acessar direto digitando page-contato.php
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );?>

<?php get_header();?>

<div class="container">
<?php if (have_posts()) :
while (have_posts()) : the_post();?>
<div class="row">
<div class="col-md-12">
<article id="post-<?php the_ID();?>" <?php post_class();?>>


<!-- Imprimimos primeiro o título e o conteúdo da página -->
<h1><?php the_title();?></h1>

<div class="entry-content">
<?php the_content();?>
</div>

<form id="contact-form" name="contact-form" action="<?php echo get_permalink();?>#contact-form" method="post">
<?php //Verificamos se o formulário foi enviado
if (isset( $_POST['btn-submit'] )) {
//Criamos uma variável para armazenar os erros
global $reg_errors;
$reg_errors = new WP_Error;

//Coletamos nas variáveis ​​os dados enviados no formulário e os higienizamos.
//Se detectarmos algum erro, poderemos preencher os campos do formulário com os dados enviados, para que não tenhamos que iniciar o formulário do zero.
$f_name = sanitize_text_field($_POST['f_name']);
$f_email = sanitize_email($_POST['f_email']);
$f_phone = sanitize_text_field($_POST['f_phone']);
$f_message = sanitize_text_field($_POST['f_message']);

//O campo Nome é obrigatório, verificamos se não está vazio e, caso contrário, criamos um log de erros
if ( empty( $f_name ) ) {
$reg_errors->add("empty-name", "O campo nome é obrigatório");
}
//O campo E-mail é obrigatório, verificamos se não está vazio e, caso contrário, criamos um log de erros
if ( empty( $f_email ) ) {
$reg_errors->add("empty-email", "O campo email é obrigatório");
}
//Verificamos se os dados estão no formato de email com a função WordPress "is_email" e, caso contrário, criamos um log de erros
if ( !is_email( $f_email ) ) {
$reg_errors->add( "invalid-email", "O email não tem um formato válido" );
}
//O campo Mensagem é obrigatório, verificamos se não está vazio e, caso contrário, criamos um log de erros
if ( empty( $f_message ) ) {
$reg_errors->add("empty-message", "O campo da mensagem é obrigatório");
}

//Se não houver erros, enviamos o formulário
if (count($reg_errors->get_error_messages()) == 0) {
//Destinatario
$recipient = "destinatario@email.com";

//Asunto del email
$subject = 'Formulario de contato ' . get_bloginfo( 'name' );

//O endereço de e-mail é o do nosso blog/site, portanto, adicionando este cabeçalho, podemos responder ao remetente original
$headers = "Reply-to: " . $f_name . " <" . $f_email . ">\r\n";

//Montamos o corpo do nosso email
$message = "Nome: " . $f_name . "<br>";
$message .= "E-mail: " . $f_email . "<br>";
$message .= "Telefono: " . $f_phone . "<br>";
$message .= "Mensagem: " . nl2br($f_message) . "<br>";
   
//Filtrar para indicar que o email deve ser enviado no modo HTML
add_filter('wp_mail_content_type', create_function('', 'return "text/html";'));
	
//Finalmente enviamos o email
$envio = wp_mail( $recipient, $subject, $message, $headers, $attachments);

//Se o e-mail for enviado corretamente, exibimos uma mensagem e esvaziamos as variáveis ​​com os dados. Caso contrário, mostramos uma mensagem de erro
if ($envio) {
unset($f_name);
unset($f_email);
unset($f_phone);
unset($f_message);?>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
O formulário foi enviado corretamente.
</div>
<?php }else {?>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
Ocorreu um erro ao enviar o formulário. Você pode tentar mais tarde ou entrar em contato conosco escrevendo um e-mail para "destinatário@email.com"
</div>
<?php }
}
}?>

<div class="form-group">
<label for="f_name">Nome <span class="asterisk">*</span></label>
<input type="text" id="f_name" name="f_name" class="form-control" value="<?php echo $f_name;?>" placeholder="Escreva seu nome completo" required aria-required="true">

<?php //Comprobamos si hay errores en la validación del campo Nombre
if ( is_wp_error( $reg_errors ) ) {
if ($reg_errors->get_error_message("empty-name")) {?>
<br class="clearfix" />
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<p><?php echo $reg_errors->get_error_message("empty-name");?></p>
</div>
<?php }
}?>
</div>

<div class="form-group">
<label for="f_email">E-mail <span class="asterisk">*</span></label>
<input type="email" id="f_email" name="f_email" class="form-control" value="<?php echo $f_email;?>" placeholder="Digite seu e-mail" required aria-required="true">

<?php //Comprobamos si hay errores en la validación del campo E-mail
if ( is_wp_error( $reg_errors ) ) {
if ($reg_errors->get_error_message("empty-email")) {?>
<br class="clearfix" />
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<p><?php echo $reg_errors->get_error_message("empty-email");?></p>
</div>
<?php }
}

//Comprobamos si hay errores en el formato del campo E-mail
if ( is_wp_error( $reg_errors ) ) {
if ($reg_errors->get_error_message("invalid-email")) {?>
<br class="clearfix" />
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<p><?php echo $reg_errors->get_error_message("invalid-email");?></p>
</div>
<?php }
}?>
</div>

<div class="form-group">
<label for="f_phone">Telefono</label>
<input type="tel" id="f_phone" name="f_phone" class="form-control" value="<?php echo $f_phone;?>" placeholder="Introduce tu teléfono">
</div>

<div class="form-group">
<label for="f_message">Mensagem <span class="asterisk">*</span></label>
<textarea id="f_message" name="f_message" rows="7" class="form-control" placeholder="Escreva sua mensagem aqui" required aria-required="true"><?php echo $f_message;?></textarea>

<?php //Comprobamos si hay errores en la validación del campo Mensaje
if ( is_wp_error( $reg_errors ) ) {
if ($reg_errors->get_error_message("empty-message")) {?>
<br class="clearfix" />
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<p><?php echo $reg_errors->get_error_message("empty-message");?></p>
</div>
<?php }
}?>
</div>

<button type="submit" id="btn-submit" name="btn-submit" class="btn btn-default">Enviar Mensagem</button>
</form>
</article>
</div>
</div>
<?php endwhile;
endif;?>
</div>

<?php get_footer();?>

Com isso, já aprendemos a criar formulário no WordPress personalizado sem a necessidade de usar plugins. Seguindo essa estrutura, você pode adicionar ou remover campos de acordo com suas necessidades, ou incluir um modelo de email com formato ou design corporativo e preencher os dados do formulário para enviar por e-mail.

Ah! Lembre-se de adicionar o arquivo à pasta do tema ativo.

Sobre Calixto

CalixtoOlá! Sou Hugo Calixto, Programador WEB e Profissional de SEO desde 2017.

Sou natural do Rio de Janeiro e vivo em São Paulo e Madrid.

O que faço: Desenvolvo Sites Personalizados (com ou sem Wordpress), Administro Servidores e sou Especialista em SEO (otimização de sites para mecanismos de busca).

E o que mais gosto no meu trabalho é : "Ajudar as pessoas" e "Experimentar de tudo" e "usar o que aprendo para poder fazer coisas novas".

Ah! Se precisar de ajuda, não excite, chama o Hugo Calixto.

2 comentários “Como criar formulário no WordPress para página de contato sem plugin

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*