formulario personalizado

¿Quieres patrocinar?

¿Quieres aparecer aquí? Si quieres patrocinar este blog, ponte en contacto conmigo a través de este formulario

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.

¿Te ha resultado útil esta información?

Si este post te ha resuelto un problema, invítame a un café o a una cerveza. Con este pequeño gesto me animas a seguir escribiendo.