Cómo crear un formulario en WordPress para la página de contacto sin necesidad de un plugin

Si no queremos recurrir al uso de plugins, podemos crear el formulario en WordPress manualmente utilizando algunas funciones y componentes estándar del cms.

En este post veremos cómo crear una página con un sencillo formulario de contacto personalizado. Para ello, crearemos una plantilla llamada «Contacto» y en ella crearemos un formulario con los campos Nombre, Correo electrónico, Teléfono y Mensaje.

¡Importante!

El html está preparado para bootstrap, si tu tema no está en bootstrap, tendrás que hacer pequeños cambios en la página para adaptarla a tu tema, si hay duda(s) de cómo hacerlo, deja un comentario que será un placer ayudarte.

Pondremos los campos Nombre, Email y Mensaje como obligatorios, marcándolos con la etiqueta HTML5 «required». También comprobaremos, al enviar el formulario, mediante las funciones de WordPress y PHP, si esos campos se rellenan y tienen el formato que esperamos de ellos, en el caso del correo electrónico, si lo que el usuario escribe está en formato de correo electrónico. Lo hacemos para los navegadores que no soportan HTML5.

En caso de encontrar algún error, no enviaremos el formulario y mostraremos un mensaje de error con la clase WP_Error. Y en caso de que todo sea correcto, enviaremos un correo electrónico al destinatario especificado con la función wp_mail ().

En primer lugar, cree un modelo de plantilla. Para ello, en la raíz de nuestro tema, crearemos un archivo con el nombre: page-contact.php y, dentro de él, pondremos el siguiente código:

Ah! Dentro del código, comento lo que hace cada línea para que podamos entender el proceso rápidamente:

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

// Exit if accessed directly | salir si alguien intenta acceder directamente escribiendo 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 primero el título y el contenido de la 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'] )) {
//Creamos una variable para almacenar los errores
global $reg_errors;
$reg_errors = new WP_Error;

//Recogimos en las variables los datos enviados en el formulario y los saneamos.
//Si detectamos un error, podemos rellenar los campos del formulario con los datos enviados, para no tener que empezar el formulario desde cero.
$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']);

//El campo Nombre es obligatorio, comprobamos que no esté vacío y si no, creamos un registro de error.
if ( empty( $f_name ) ) {
$reg_errors->add("empty-name", "El campo del nombre es obligatorio");
}
//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="Escriba su mensaje aquí" 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();?>

Con esto, ya tendríamos un formulario de contacto personalizado sin necesidad de utilizar plugins. Siguiendo esta estructura, puede añadir o quitar campos según sus necesidades, o incluir una plantilla de correo electrónico con un formato o diseño corporativo y rellenar los datos del formulario para enviarlo por correo electrónico.

Sobre Hugo Calixto

Hugo Calixto¡Hola! Soy Hugo Calixto, Programador WEB y Profesional SEO desde 2017.

Qué hago: Desarrollo sitios personalizados (con o sin Wordpress), administro servidores y soy especialista en SEO (optimización de sitios para motores de búsqueda).

Y lo que más me gusta de mi trabajo es: "Ayudar a la gente" y "Probar de todo" y "usar lo que aprendo para poder hacer cosas nuevas".

¡Oh! Si necesitas ayuda, llama a Hugo Calixto.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

*