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">×</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">×</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">×</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">×</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">×</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">×</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.
José Manuel M.
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.
Joan
Eso de plagiar a otros autores deberia estar castigado
Esta es la fuente original: No se permiten enlaces en los comentarios.
José Manuel M.
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.
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