¿Cómo crear formularios y capturar los valores con WordPress y sin plugins?

Ya no me sorprende encontrar plugins como Contact Form 7, Gravity Forms o Ninja Forms para dar solución a simples formularios en el frontend: ya sea una suscripción a un newsletter, un formulario de contacto o una verificación de edad. Los plugins están muy bien, no lo voy a negar, pero agregan una carga al servidor, en la mayoría de los casos, innecesaria. Además, el tiempo que consume aprender a utilizarlos es a veces mayor al de aprender por única vez cómo funcionan las propias peticiones POST y GET del protocolo HTTP. Luego de leer este artículo tendrás los conocimientos necesarios para hacer lo que desees con los valores que cargan nuestros usuarios en los formularios de nuestras webs.

Videotutorial

¿Cómo crear un formulario en el frontend?

No hace falta saber programación para crear un formulario en el frontend, solo algunos conocimientos básicos de HTML y que son los mismos conceptos que se utilizan desde hace muchos años.

Para el ejemplo vamos a crear un formulario de contacto en el que pedimos al usuario su nombre y un mensaje.

<form action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" method="post">
    <label for="txtnombre">Nombre:</label>
    <input type="text" id="txtnombre" name="txtnombre">

    <label for="txtmensaje">Mensaje:</label>
    <textarea name="txtmensaje" id="txtmensaje" cols="15" rows="4"></textarea>

    <input type="hidden" name="action" value="contacto">

    <input type="submit" value="Enviar">
</form>

Puntos importantes del código:

  1. En esta línea abrimos la etiqueta form y todo los inputs que estén dentro de esta etiqueta se enviarán al servidor, puntualmente al fichero ‘admin-post.php’ a través de una petición POST de HTTP.
  2. Para que WordPress capture el formulario debemos indicar un nombre de acción, el cual guardaremos en un input del tipo oculto (hidden)
Ejemplo de formulario de contacto
Formulario de contacto de ejemplo

¿Cómo capturar correctamente los valores desde WordPress?

El fichero admin-post.php de WordPress define unas acciones muy fáciles de utilizar y que nos permite capturar los valores de las peticiones POST o GET de nuestro formulario. El nombre de los mismos se definen con un prefijo estándar más el nombre de la acción que hemos definido en nuestro formulario. Veamos el siguiente ejemplo en el fichero functions.php de nuestro tema:

<?php

/**
 * Funcion que captura los valores de una 
 * petición POST o GET de HTTP.
 */
function nombre_de_la_funcion(){
	
	// Nuestro código de manipulación de los datos
	
}
add_action('admin_post_nopriv_accion', 'nombre_de_la_funcion'); // Para usuarios no logueados
add_action('admin_post_accion', 'nombre_de_la_funcion'); // Para usuarios logueados

¿Por qué hay dos acciones para la misma funcionalidad? ¿Qué es eso de «admin_post_nopriv»?

Si te has fijado bien en el código estamos utilizando dos acciones para capturar los valores del formulario. Y es que WordPress nos permite tener el control sobre usuarios logueados y no logueados. Para el ejemplo que estamos trabajando nos da lo mismo si el usuario está logueado o no, y es por eso que debemos llamar a las dos acciones.

Una vez que nuestro formulario es enviado al servidor es capturado por la función donde tendremos 6 variables del tipo array con distintos valores para trabajar:

  • $_COOKIE: Un array con las cookies que genera WordPress y aquella que definamos nosotros para un determinado proyecto.
  • $_POST: Un array con los distintos valores del formulario (esta variable solo estará presente si se envía un formulario con el método POST).
    $_GET: Un array con valores pasados al servidor a través de variables GET (esta variable solo estará presente si se envían valores con el método GET).
  • $_REQUEST: Un array con los valores de $_POST, $_GET y $_COOKIE.
  • $_SERVER: Un array con todos los valores referentes a la petición HTTP (HTTP_REFERER, HTTP_USER_AGENT, REQUEST_TIME, etc).
  • $GLOBALS: Un array con todas las variables globales de WordPress (table_prefix, wp_query, wp_rewrite, etc).

Teniendo en cuenta la sintaxis de la acción y todas las variables con las que podemos trabajar tenemos las herramientas necesarias para definir el código final de nuestro ejemplo del formulario de contacto.

<?php

/**
 * Función para capturar los valores del
 * formulario de contacto del website.
 *
 * Los datos son enviados por email a mg@maugelves.com
 */
function enviar_formulario_por_email(){

	// Verificamos que los 2 campos tengan valores
	if( empty( $_POST['txtnombre'] ) || empty( $_POST['txtmensaje'] ) ):

		// Enviamos al usuario a la misma página con una variable GET de error.
		wp_redirect( add_query_arg( array( 'errormsg' => "Campos incompletos" ), get_home_url() . '/contacto') );
		exit;

	endif;


	// SIEMPRE SE DEBEN SANITIZAR LOS VALORES
	$nombre     = sanitize_text_field( $_POST['txtnombre'] );
	$mensaje    = sanitize_text_field( $_POST['txtmensaje'] );


	/*
	Una vez que tenemos los datos del formulario podemos
	hacer con ellos lo que nuestro proyecto web necesite, ej:
	a)  Enviar un email con esta información
	b)  Guardar los valores en base de datos
	c)  Hacer una nueva llamada POST a otro servicio que necesita
		esta información.

	En nuestro caso vamos a mandar un email con el nombre y el mensaje del usuario.
	*/
	wp_mail( "mg@maugelves.com", "Formulario de contacto", $nombre . " envió este mensaje => " . $mensaje  );


	/* Una vez que hayamos trabajado con los datos debemos
	redireccionar al usuario a la misma u a otra nueva página.
	En nuestro ejemplo, vamos a redirigirlo a la misma página
	de contacto con una variable de éxito.*/
	wp_redirect( get_home_url() . '/contacto?exito=1'); exit;


}
add_action('admin_post_nopriv_contacto', 'enviar_formulario_por_email');
add_action('admin_post_contacto', 'enviar_formulario_por_email');

Conclusión

Como han podido ver la captura de los datos es muy simple, una vez que podemos acceder a los valores podremos hacer con ellos cualquier requerimiento que se nos pida. Recuerda agregar seguridad a todos los formulario ya que son puertas de acceso a nuestro servidor. Para ello valida los datos desde el cliente con javascript y también en el servidor como hemos detallado en el ejemplo.

Ya no hay vuelta atrás, la próxima vez que te pidan un formulario piensa dos veces si realmente necesitas instalar un plugin para realizarlo.


¿Qué te pareció el artículo?
No molaPobreMolaMuy bueno¡Excelente! (18 votos, promedio: 4,78 de 5)
Cargando…
Mauricio Gelves
Mauricio Gelves es Lic. en Informática y trabaja como Consultor Web Freelance con su marca personal MauGelves. Se especializó en WordPress para ofrecer soluciones personalizadas y rentables a medianas y largas empresas. Es Nómade Digital desde el año 2015, actividad que combina sus dos principales pasiones: la informática y los viajes, y refleja sus experiencias a través de sus hobbies audiovisuales en Instagram y YouTube.
10 Pasos para ser Freelance - eBook Gratuito

10 pasos para convertirte en Freelance

Descarga en forma totalmente gratuita mi eBook en donde explico los 10 pasos que he dado para convertirme en Freelance.

Ingresa tu email y recibe en tu bandeja de correo el enlace para descargarte el eBook.

(Te doy mi palabra que solo enviaré un email al mes con todas mis novedades)


50 thoughts on “¿Cómo crear formularios y capturar los valores con WordPress y sin plugins?”

  1. Hola Mauricio excelente post la verdad te felicito!!
    Te hago una consulta, una vez que tengo los datos ya limpios como hago para insertarlos en una tabla de mysql?

    Saludos!

  2. Està bien el POST, yo puse el archivo de las funciones en un plugin propio, aparte y va bien. Definitivamente este tipo de herramienta te pone en el verdadero camino de desarrollador y no de un simple administrador de WordPress.

  3. Excelente información Mauricio. No solo por que es adecuada a la necesidad de la construcción de formularios sino por que es clara y concisa. Man sencillo no se puede hacer, pero totalmente eficaz. Gente así da gusto encontrase cuando buscas alguna información que te ayude en el desarrollo de cualquier materia.
    Muchas gracias y te deseo muchos éxitos. No dejes de compartir tus conocimientos. Enhorabuena

  4. Hola Mauricio, primero te agradezco el gran post
    Te comento que estoy en la misma situación que TelecoMar, pero soy nuevo en este mundillo y no entiendo cómo se haría el formulario desde el lado del servidor
    ¿podrás orientarme de dónde podría consultar este tema? alguna referencia?
    Un saludo

    1. El formulario puede ser una página de WordPress a la que puedes llamar Contacto (slug => contacto). Luego necesitarías crear una nueva plantilla en tu tema llamada page-contacto.php. Es allí donde debes poner el HTML del formulario de contacto.

      Un saludo,
      Mauricio

  5. Hola!

    Me encantó el tutorial, ¡así es muy sencillo realizar un formulario!

    Pero tengo un problema, y es que cuando le doy al boton de enviar (o cuando hace la llamada a «admin-post.php») la pantalla se me queda en blanco, y no parece realizar nada.

    ¿Sabrías cual puede ser el problema?

    Muchas gracias de antemano!

    1. Buenas tardes!
      Lo más probable es que tengas algún error de PHP. Para poder ver el error debes cambiar el valor de la constante WP_DEBUG en el wp-config.php:
      define('WP_DEBUG', true);

      Fíjate cuál es el error y luego vuelve a cambiarlo por el valor false.

      Un saludo,
      Mauricio

Deja una respuesta

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

× ¿Puedo ayudarte?