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.

¿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.

Comentarios

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

  1. Quisiera saber si se puede validar todo lo referente al insertar una nueva entrada (titulo, descripcion….), porfa una ayudita

      1. Hola Pablo, gracias por sus aportes, son de gran ayuda. Como puedo implementar al formulario un checkbox obligatorio. de antemano gracias por la ayuda.

        1. Hola Diego

          Los checkbox no pueden ser obligatorios. El usuario puede y debe elegir si seleccionarlo o no. Si lo que quieres es montar un tipo de dato donde el usuario elija una opción, te aconsejo que utilices radio buttons.

          En caso de querer «forzar» al usuario a elegir al menos uno de los checkboxes, tendrás que comprobarlo con JavaScript

          1. Hola Pablo,

            Gracias por su pronta respuesta, lo que deseo hacer es una casilla para aceptar los términos y condiciones. De lo contrario no dejar enviar el formulario.

          2. Entonces, como te comentaba antes, creo que lo mejor es que controles el no enviar el formulario o que el botón esté inactico a través de JavaScript, hasta que el usuario marque la casilla

  2. Hola, me parece excelente el aporte. Me gustaría saber cómo implementarlo para un formulario que se encuentra en la página principal del sitio. Gracias

  3. Hola Pablo, te felicito por el tutorial, tengo un problema intente tomar la template y adaptarlo a un trabajo que estoy haciendo y no consigo que funcione, creo que el problema esta con los datos sanitizados:

    //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_type = sanitize_option($_POST[‘f_type’]);
    $f_presentation = sanitize_option($_POST[‘f_presentation’]);
    $f_color = sanitize_hex_color($_POST[‘f_color’]);
    $f_adress = sanitize_text_field($_POST[‘f_adress’]);
    $f_message = sanitize_text_field($_POST[‘f_message’]);

    Te adjunto unas imagenes para que veas el formulario y parte del codigo, al enviar el formulario no devuelve nada y la página queda en blanco

    1. Hola Federico,

      Sin ver el código completo se me hace dificil, pero te aconsejaría que fueras depurando hasta dar con el error:

      – ¿El botón «ENVIAR» es de type=»submit»?
      – ¿El name de este botón es btn-submit?
      – Pon lo siguiente justo antes de if (isset( $_POST[‘btn-submit’] )) { y mira lo que te devuelve el form cuando lo envias
      echo «

      ";
          print_r($_POST);
          echo "

      «;
      – Mira la consola de errores para ver si tienes algun error de javascript que esté bloqueando

      Suerte

  4. Gracias por el aporte.
    Me funcionó perfectamente, pero he intentado colocar el shortcode que da «Contact Form 7» y no se dónde colocarlo en la página personalizada. Para ello creé una plantilla.

  5. Muy bueno, lo implementé pero no se como agregarlo a la pagina contacto que cree en wordpress, lo agrego pero me aparece muy pequeño los campos y como todos pegados entre si, ayuda

  6. Muchas gracias por el aporte, al tener el fomato completo y enviar me carga a la página www.»midominio».com/uncategorized/contacto/#contact-form y se pierden los estilos de mi pagina, como puedo hacer que cargue www.»midominio».com/#contact-form? muchas gracias de nuevo

  7. Muchas gracias me sirvio de mucho… Quisiera saber si podria usar este formulario como segundo paso para una suscripción de dos pasos? – por ejemplo: el primer formulario dirá Pais, Cantidad, al llenarlo y darle en completar/enviar -> el segundo formulario para concretar que sería este. Es posible? tiene algun tutorial para hacer formularios en dos pasos? Gracias de antemano.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *