Formulario de contacto simple en WordPress sin plugins

Wordpress febrero 5, 2018

En los últimos posts, hemos visto diferentes funcionalidades que podemos conseguir en WordPress sin la necesidad de utilizar plugins. En esta ocasión, también veremos como prescindir de otro de los plugins más utilizados en WordPress, el del formulario de Contacto.

Crearemos un formulario de contacto simple, para que nuestros usuarios se puedan poner en contacto con nosotros sin la necesidad de tener que instalar un plugin para ello de forma exclusiva, sólo con código en nuestro theme.

Aclaramos que este método sirve para la versión de hosting de WordPress.org, no para la versión gratuita del CMS.

 

Creando un formulario de contacto sin plugins en WordPress

 

  Lo primero que haremos, será crear una plantilla para el formulario que vamos a utilizar partiendo de la del theme que tengamos activo. Para ello, creamos un archivo llamado plantilla-correo.php:

<?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();?>>
            <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
              if (isset( $_POST['btn-submit'] )) {
                //Creamos una variable para almacenar los errores
                global $reg_errors;
                $reg_errors = new WP_Error;
 
                $f_name = sanitize_text_field($_POST['f_name']);
                $f_email = sanitize_email($_POST['f_email']);
                $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) {
                  //Nuestro correo en el que recibiremos los mensajes
                  $recipient = "pcsolucionweb@gmail.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 .= "Mensaje: " . nl2br($f_message) . "<br>";
                                   
                  add_filter('wp_mail_content_type', create_function('', 'return "text/html";'));
                                    
                  $envio = wp_mail( $recipient, $subject, $message, $headers, $attachments);
 
                 
                  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_message"></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();?>

Este código incluye tanto la plantilla del theme que estamos utilizando, como el propio formulario de contacto. Podemos modificarlo a nuestro gusto, o simplemente dejarlo así cambiando únicamente el campo $recipient por nuestro correo al que queremos que nos lleguen los mensajes.

Este archivo que acabamos de crear lo guardamos por ejemplo con el nombre plantilla-correo.php

 

 Ahora tendremos que subir vía FTP este archivo plantilla-correo.php que acabamos de crear a nuestro servidor junto a los otros archivos del theme. Copiaremos este archivo en /wp-content/themes/nuestro_theme/

 

 En este paso, procederemos a crear la página desde WordPress que tendrá nuestro formulario de contacto. Vamos a nuestro panel de WordPress a Páginas > Añadir nueva.

Finalmente, si hemos hecho todos los pasos correctamente, a la hora de seleccionar la plantilla de la página que estamos creando nos aparecerá una llamada Contacto. Utilizamos esta plantilla, y al publicarla ya tendremos en ella un formulario de contacto básico sin la necesidad de utilizar un plugin.

 

Una vez tengamos nuestro formulario de contacto, podemos hacer uso de CSS para adaptarlo al diseño de nuestra web o dejarlo a nuestro gusto.

 



Relacionados



Deja una respuesta

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

Gonzalo

No está bien explicado. No se entiende dónde es que se sube el archivo. Es en la galería donde están las imágenes? Es creando una página nueva? Yo uso WordPress.com

Responder
    JoseManuelMoreno

    Gracias por el comentario Gonzalo. He añadido y editado alguna información para que se pueda entender mejor.

    Creo que la confusión viene de que estas utilizando WordPress.com como dices y no la versión de WordPress para hosting.

    En el punto que digo que hay que crear un archivo en wp-content/themes daba por entendido que se trata de la versión de hosting ya que la .com no permite subir archivos de código.

    Responder
Joan

Eso de plagiar a otros autores deberia estar castigado
Esta es la fuente original: No se permiten enlaces en los comentarios.

Responder
    Jose Manuel

    Opino lo mismo.
    Fíjate que en el post está el crédito(en forma de enlace) al código que por otra parte también procede de otra web.

    Responder
La Coruña, España Correo