Cómo crear un formulario personalizado en WordPress (sin plugins)

En WordPress encontramos un gran número de ventajas y desventajas. Es un CMS increíblemente polivalente con el que podemos crear cualquier web sin tener apenas conocimientos en desarrollo. Pero no nos engañemos, el trabajo en código cuenta con unas ventajas que no las encontraremos de otro modo.

Motivos por los que crear un formulario en WordPress sin plugins

Puede haber infinidad de razones por las que optar por esta vía, algunas de ellas son:

1. Tener un control absoluto sobre la estructura, diseño y funcionalidad
2. Mejorar el rendimiento de la web
3. Evitar depender de plugins de terceros y sus actualizaciones, así como de sus agujeros de seguridad
4. Tener un control absoluto sobre los datos que se gestionan en los formularios
5. Aprender diferentes caminos para hacer las cosas y profundizar en las tripas de WordPress

Cómo funciona un formulario en WordPress

En WordPress, los formularios funcionan como en cualquier página hecha en PHP, pero con ligeras diferencias. La típica secuencia de un formulario en WordPress es la siguiente:

1. Rellenar formulario
2. Se envía a admin-post.php
3. Se activa el hook relacionado a la acción que identifica al formulario
4. Verificamos la acción así como el nonce asociado al formulario
5. Se obtienen los datos mediante GET o POST
6. Saneamos los datos para evitar posibles malas intenciones o errores
7. Se ejecuta la funcionalidad que deseemos
8. Redireccionamos a la URL que queramos

Elementos en un formulario de WordPress

Ahora que conocemos la secuencia que siguen los formularios, podemos entrar en detalle con los elementos que forman parte del proceso.

El archivo admin-post.php

Este archivo es el que se incluye siempre en el atributo action de cualquier formulario de WordPress. Como supongo que ya sabemos, el atributo action es en el que se especifica el archivo donde se usarán los valores añadidos en cada campo.

En realidad, admin-post.php es un archivo que funciona de enlace entre el formulario y el hook final con las funcionalidades que hayamos definido.

En el archivo se verifica si estamos logueados y si hay una acción definida.

Hooks usados en los formularios

Principalmente contamos con 2 hooks que dependen de si estamos logueados o no.

1. admin_post_action: Este hook es el que se usa para usuarios logueados
2. admin_post_nopriv_action: Para formularios en páginas para no logueados usaremos este hook

En ambos hooks tendremos que cambiar la palabra action por el valor que hayamos definido en el atributo action de nuestro formulario HTML.

Nonces

Nonce viene del inglés “Number used ONCE”. Es un valor aleatorio para dar una capa de seguridad. Este valor es creado cada vez que, por ejemplo, cargamos la página donde se encuentra un formulario. Este valor se verificará dentro del hook admin_post que hayamos definido para estar seguros de que no se ha accedido sin saltarnos el primer paso.

Saneamiento

Una vez que nos encontramos en el hook final, podremos acceder a los valores proporcionados en el formulario. Para evitar posibles riesgos, hay ciertas funciones que nos permitirán verificar que los datos introducidos en el formulario son los que deberían.

WordPress proporciona algunas de estas funcionalidades, pero también existen otras de PHP perfectamente válidas. Aquí os presento unas pocas:

• sanitize_email()
• sanitize_url()
• sanitize_text_field()
• sanitize_textarea_field()
• intval()
• htmlspecialchars()
• trim()
• strip_tags()

wp_redirect()

Cuando hayamos terminado de gestionar los valores del formulario tendremos que redireccionar al usuario a la página deseada. Aquí es donde entra la función wp_redirect(), que no hace otra cosa que redireccionar a la página que le especifiquemos.

 

Un uso muy común si tenemos el mismo formulario en varias páginas es añadir el ID de la página en un input del tipo hidden para después redireccionar a esa página concreta.

 

Otro uso frecuente es redireccionar a una página añadiendo unos valores en la URL para, después, cuando cargue la página final, obtener esos valores con $_GET y mostrar un contenido u otro dependiendo del valor. Por ejemplo, podemos mostrar un texto de éxito si las funciones se han ejecutado correctamente o, por el contrario, un texto de error si no se han podido ejecutar.

Ejemplo de formulario personalizado en WordPress

Para que todo quede más claro, os presento un ejemplo en el que, desde el front, un usuario puede rellenar un formulario con su nombre, edad y correo. Nuestra funcionalidad guardará esos datos en una tabla personalizada llamada webheroe_users.

 

Por un lado mostraremos el formulario en el front:

<?php

$nonce = wp_create_nonce('my_nonce');

?>

<form id="my-form" action="<?php echo esc_url( admin_url( 'admin-post.php' )); ?>" method="post">

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

    <input type="hidden" name="nonce" value="<?php echo esc_attr($nonce); ?>">

    <input type="text" name="nombre" id="nombre" placeholder="Nombre">

    <input type="number" name="edad" id="edad" placeholder="Edad">

    <input type="email" name="email" id="email" placeholder="email">

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

</form>

Y por otro lado tendremos la función que gestionará estos datos. Esta función podría estar, por ejemplo, en nuestro archivo functions.php o bien se puede incluir a través de Code Snippets:

<?php

function webheroe_form(){

    //Verificamos el action de nuevo y también el nonce

    if($_POST['action'] == 'webheroe_action' && wp_verify_nonce($_POST['nonce'], 'my_nonce')){

        //Saneamos los valores recibidos

        $name = sanitize_text_field($_POST['nombre']);

        $age = intval($_POST['number']);

        $email = sanitize_email($_POST['email']);

        //Guardamos los datos en nuestra tabla

        global $wpdb;

        $table = $wpdb->prefix . 'webheroe_users';

        $inserted = $wpdb->insert(

            $table,

            array(

                'name' => $name,

                'age' => $age,

                'mail' => $email

            )

        );

        if($inserted){

            //Si se ha guardado en la base de datos redirigimos a la página de inicio

            wp_redirect(home_url());

            exit;

        }else{

            //Si no se ha guardado redirigimos a la página de inicio con una variable de error

            wp_redirect(home_url() . '?wherr=1');

            exit;

        }

    }

}

//Usamos admin_post_nopriv_ porque el formulario está en el front

add_action("admin_post_nopriv_webheroe_action", "webheroe_form");

Como podemos ver, al final de la función webheroe_form, en caso de existir error se redirecciona a la página de inicio con una variable en la URL. Desde la página de inicio podremos comprobar a través de $_GET si esta variable existe y, en el caso que sí, podríamos avisar del error del modo que deseemos. Por ejemplo, se puede crear un pop-up con position: absolute; para que aparezca en el centro de la pantalla.

Conclusión

Aunque la comodidad de los plugins en WordPress nos facilite la vida, hay muchos casos en los que crear un formulario mediante código nos dará un control que no tendremos de otro modo. A partir de aquí las posibilidades son infinitas.

Compartir este Articulo