Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
formulario personalizado

Cómo realizar un formulario de contacto personalizado en WordPress sin Plugins

Para realizar un formulario de contacto personalizado en WordPress podemos utilizar los conocidos plugins contact form 7 o gravity forms.

Si no queremos recurrir al uso de plugins, podemos hacerlo manualmente utilizando algunas funciones y componentes que trae WordPress por defecto.

En esta entrada vamos a ver cómo crear una página con un sencillo formulario de contacto personalizado. Para ello crearemos un template llamado “Contacto”, y en él crearemos un formulario con los campos Nombre, E-mail, Teléfono y Mensaje.

formulario personalizado

Pondremos los campos Nombre, E-mail y Mensaje como obligatorios, lo comprobaremos mediante la etiqueta HTML5 “required”. También comprobaremos al enviar el formulario mediante funciones de WordPress y PHP que estos campos están rellenos y tienen el formato que esperamos de ellos, en el caso del e-mail, que lo que introduzca el usuario tenga formato de e-mail. Esto lo hacemos por los navegadores que no soportan HTML5.

formulario personalizado errores

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

Lo primero de todo es crear un template. Para ello, en la raíz de nuestro tema crearemos un archivo page-contacto.php, y dentro de él ponemos el siguiente código. Dentro del código hemos comentado lo que hace cada línea para entender el proceso sobre la marcha:

<?php /* * Template Name: Contacto */ // Exit if accessed directly 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 de la página y el contenido --> <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 si 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; //Recogemos en variables los datos enviados en el formulario y los sanitizamos. //Si detectamos algún error, podremos más abajo rellenar los campos del formulario con los datos enviados para no tener que empezar el formulario de 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 en caso contrario creamos un registro de error if ( empty( $f_name ) ) { $reg_errors->add("empty-name", "El campo nombre es obligatorio"); } //El campo Email es obligatorio, comprobamos que no esté vacío y en caso contrario creamos un registro de error if ( empty( $f_email ) ) { $reg_errors->add("empty-email", "El campo e-mail es obligatorio"); } //Comprobamos que el dato tenga formato de e-mail con la función de WordPress "is_email" y en caso contrario creamos un registro de error if ( !is_email( $f_email ) ) { $reg_errors->add( "invalid-email", "El e-mail no tiene un formato válido" ); } //El campo Mensaje es obligatorio, comprobamos que no esté vacío y en caso contrario creamos un registro de error if ( empty( $f_message ) ) { $reg_errors->add("empty-message", "El campo consulta es obligatorio"); } //Si no hay errores enviamos el formulario 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 envio del email es la de nuestro blog por lo que agregando este header podremos responder al remitente original $headers = "Reply-to: " . $f_name . " <" . $f_email . ">\r\n"; //Montamos el cuerpo de nuestro e-mail $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 email debe ser enviado en modo HTML add_filter('wp_mail_content_type', create_function('', 'return "text/html";')); //Por último enviamos el email $envio = wp_mail( $recipient, $subject, $message, $headers, $attachments); //Si el e-mail se envía correctamente mostramos un mensaje y vaciamos las variables con los datos. En caso 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> Se ha producido un error enviando el formulario. Puede intentarlo más tarde o ponerse en contacto con nosotros escribiendo un mail 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="Introduce tu nombre" 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="Introduce tu 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">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">Consulta <span class="asterisk">*</span></label> <textarea id="f_message" name="f_message" rows="7" class="form-control" placeholder="Escribe aquí tu consulta" 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 consulta</button> </form> </article> </div> </div> <?php endwhile; endif;?> </div> <?php get_footer();?>

Con esto ya tendríamos un formulario de contacto personalizado sin la necesidad de utilizar plugins. Siguiendo esta estructura puedes añadir o quitar campos según tus necesidades, o incluir una plantilla de e-mail con un formato o diseño corporativo, y rellenar los datos del formulario para enviar por mail.

Puede que también te interese

Mejora la puntuación de Google PageSpeed Insights: Eliminar el JavaScript que bloquea la visualización del contenido de la mitad superior de la página
Mejora la puntuación de Google PageSpeed Insights: Eliminar el JavaScript que bloquea la visualización del contenido de la mitad superior de la página
1. Optimizar imágenes 2. Minificar CSS y JS 3. Especificar caché de navegador 4. Habilita la compresión 5. Reducir el tiempo de respuesta del servidor…
Seguridad WordPress: proteger wp-config.php
Seguridad WordPress: proteger wp-config.php
El archivo wp-config.php es uno de los más críticos en cuanto a seguridad se refiere ya que es el que contiene la información sobre la…
Cómo añadir campos personalizados o custom fields al back-end de WordPress de forma elegante
Cómo añadir campos personalizados o custom fields al back-end de WordPress de forma elegante
En esta entrada vamos a ver como añadir campos personalizados o custom fields al back-end de WordPress de manera elegante, es decir, utilizando meta_boxes. Actualmente…
Cambiar el ancho del editor Gutenberg
Cambiar el ancho del editor Gutenberg
Pues me llegó el momento. Tras darle un tiempo, por fin me he decidido a probar Gutenberg. Lo probé en Septiembre de 2017 para una…