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:
- En esta línea abrimos la etiqueta
formy 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. - Para que WordPress capture el formulario debemos indicar un nombre de acción, el cual guardaremos en un input del tipo oculto (
hidden)
¿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.
