¿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! (10 votos, promedio: 5,00 de 5)
Cargando…
Mauricio Gelves
Mauricio Gelves es Lic. en Informática, trabaja como Consultor Web Freelance, es Brand Evangelist de GoDaddy Pro, ponente internacional de WordPress y organizador del Meetup y WordCamp de Madrid. Desde el 2015 es Nómade Digital, actividad que combina sus dos principales pasiones: la informática y los viajes.

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

  1. Hola Mauricio.
    Vengo de desarrollar aplicaciones WEB en JAVA y me inicio en el mundo WordPress donde quiero aplicar funcionalidades de tratamiento de datos.
    Este tutorial es perfecto para entrar en materia y te lo agradezco.
    Muy buen nivel y mejor actitud profesional.
    Te voy a seguir.
    Un abrazo.

  2. Una pregunta de buenas prácticas.
    ¿Es mejor crear esta función, teniendo ten cuenta que cuando cambie de theme , este no tendra la función? o ¿Es mejor crear un plugin con esta funcionalidad y poderlo instalar en cualquier theme ?

  3. Gran tutorial, tengo una duda, necesito mandar también una imagen por correo, como lo haría. que puedo utilizar para enviar a un correo determinado, la imagen que le requerí al cliente.

    1. Buenos días Marcelo:
      Monta el formulario HTML en la plantilla de página de WordPress que desees. Luego quita el action para que el formulario vuelve siempre a la misma página y luego tendrás que trabajar con las variables de $_POST[].
      Un saludo,
      Mauricio

  4. Gracias Mau. Entiendo que comentas modificar el Action en el formulario. Entonces ya no podríamos tratar los datos tal y como lo planteas. Me refiero a una vez que estamos en la función que envía el email. Ahí inidicas en un comentario que se puede hacer una nueva llamada post a otro servicio que lo necesite. Gracias de nuevo!!

  5. Hola Mauricio, gracias por tu artículo, de gran calidad. Me surge una duda. Una vez que estoy tratando los datos del formulario, como podría hacer para enviarlos por POST a una URL externa. Por mucho que busco no encuentro una solución adecuada.

    Muchas gracias

  6. ¡Mucho nivel y mucha calidad en estos articulazos que te estás marcando últimamente Mauricio! Felicidades, y este especialmente útil e interesante.

    Y de los videos, pues estupenda esa forma de presentar un videotutorial. Divertida y diferente para un tema que suele ser más espeso y complicado de enseñar. ¡Diez!

  7. Genial el tutorial, Mauricio. Muy completo y muy bien explicado. La verdad es que muchas veces nos obsesionamos con instalar plugins para hacer cualquier función cuando se podría solucionar con unas simples líneas de código… pero claro, requiere su tiempo.

    Nos seguimos leyendo, un abrazo!

Deja un comentario

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