Cómo crear un formulario en WordPress para la página de contacto sin 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, marcandolos 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: Contacto
*/

//  proteger el archivo. Obliga salir si alguien intenta acceder directamente el navegador 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 normalmente por se acaso quiera escrever adelante del formulario-->
<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 
<!-- Comprobamos que el formulario ha sido 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");
}
//El campo E-mail es obligatorio, comprobamos que no esté vacío y si no, creamos un registro de errores
if ( empty( $f_email ) ) {
$reg_errors->add("empty-email", "El campo de correo electrónico es obligatorio");
}
//Comprobamos si los datos están en formato de correo electrónico con la función de WordPress "is_email" y si no, creamos un registro de errores
if ( !is_email( $f_email ) ) {
$reg_errors->add( "invalid-email", "El correo electrónico no tiene un formato válido." );
}
//El campo Mensaje es obligatorio, revisa que no esté vacío, de lo contrario creamos un registro de errores
if ( empty( $f_message ) ) {
$reg_errors->add("empty-message", "El campo de mensaje es obligatorio");
}

//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 contacto ' . get_bloginfo( 'name' );

//La dirección de correo electrónico es la de nuestro blog/sitio web, por lo que al agregar este encabezado podemos responder al remitente original
$headers = "Reply-to: " . $f_name . " <" . $f_email . ">\r\n";

//Creamos el cuerpo de nuestro correo electrónico
$message = "Nombre: " . $f_name . "<br>";
$message .= "E-mail: " . $f_email . "<br>";
$message .= "Teléfono: " . $f_phone . "<br>";
$message .= "Mensaje: " . nl2br($f_message) . "<br>";
   
//Filtro para indicar que el correo electrónico debe enviarse en modo HTML
add_filter('wp_mail_content_type', create_function('', 'return "text/html";'));
	
//Finalmente enviamos el correo
$envio = wp_mail( $recipient, $subject, $message, $headers, $attachments);

//Si el correo electrónico se envía correctamente, mostramos un mensaje y vaciamos las variables con datos. De lo contrario, mostramos un mensaje de error.
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>
El formulario ha sido enviado correctamente.
</div>
<?php }else {?>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
Ocurrió un error al enviar el formulario. Puede volver a intentarlo más tarde o ponerse en contacto con nosotros escribiendo un correo electrónico a "destinatario@email.com"
</div>
<?php }
}
}?>

<div class="form-group">
<label for="f_name">Nombre <span class="asterisk">*</span></label>
<input type="text" id="f_name" name="f_name" class="form-control" value="<?php echo $f_name;?>" placeholder="Escribe tu nombre 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="Escriba su correo electrónico" 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">Teléfono</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 Mensaje</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.

¿Te sientes inseguro/a o tienes dudas? Permíteme ayudarte. Aprovecha los 30 minutos gratuitos que ofrezco en mi servicio de Ayuda WordPress y juntos haremos lo que necesitas. ¡Contáctame ahora!

Hasta el próximo post.