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.

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.

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.

• « Todo lo que hay que…
• Cómo agregar reCaptcha a un… »