Estamos acostumbrados a crear formularios de contacto usando el plugin Contact Form 7. Este tipo de formularios solo sirven para enviar correos y no guardan la información que el usuario rellena desde el front-end. Vamos a crear un formulario wordpress mediante código, que permita almacenar datos. Además, por motivos de seguridad, solo los usuarios registrados podrán acceder a él.
Punto de partida
Nuestro formulario permite a los usuarios crear peticiones de trabajo, indicando un título, una descripción, un tipo de petición: Demanda u Oferta, y por último un tema de ayuda. El aspecto del formulario sería el siguiente:
Por otra parte, la información que el usuario facilite debe quedar almacenada en forma de CPT. Con ayuda del plugin CPT UI o a través de código: register_post_type(), creamos un CPT ‘peticiones‘ con dos taxonomías: ‘tipos de peticiones‘ y ‘tipos de ayuda‘. El resultado que se persigue es este:
Ahora que sabemos los campos de nuestro formulario y la información que procesa, pasamos a la acción.
CREAR PLUGIN PARA MOSTRAR FORMULARIO EN FRONT-END
Para empezar creamos una carpeta dentro de la carpeta plugin, que en mi caso se llama ‘formulario-peticion‘. Dentro de esta carpeta, creo un archivo con el mismo nombre que su carpeta contenedora y escribimos nuestro código.
Configuración de la información del plugin
/** * Plugin Name: Formulario para hacer peticiones * Plugin URI: http://myhappycoding.com/formulario-peticion * Description: Este plugin permite a los usuarios registrados enviar peticiones que se almacenan en wordpress y quedan pendientes de aprobación por parte del administrador. * Version: 1.0 * Author: Alberto Marín * Author URI: http://www.myhappycoding.com */
El código de arriba, permite integrar nuestro plugin en wordpress.
A continuación nuestro código se divide en 4 funciones secuenciales donde cada una llevará a cabo una tarea:
- Presentar el formulario por pantalla
- Validar el envío del formulario cuando el usuario haga click en enviar.
- Guardar la información en el CPT.
- Función responsable de ejecutar las tres funciones anteriores.
De manera resumida, queda así:
/*
Presenta el formulario por pantalla, y recibe 3 parametros, porque hay 2 situaciones para mostrar el formulario: cuando se muestra por primera vez, o como resultado de un envio previo
*/
function registro_form ($titulo, $descripcion, $tema_de_ayuda) {
....
}
/*
Asegura que los datos que se envian no esten vacios o no existan.
*/
function validacion_envio_formulario ($titulo, $descripcion, $usuario, $tema_ayuda){
....
}
/*
Comprueba y asegura el guardado de los datos en el CPT
*/
function completa_solicitud() {
....
}
/*
Ejecuta la lógica de la aplicacion
*/
function ejecuta_todo() {
...
}
A continuación explico cada función con más detalle.
Mostrar el formulario
Para mostrar el formulario, creamos la estructura HTML, y lo imprimimos con un echo.
echo '
<div class="col-12 formulario">
<!-- TOMAMOS LA URL DEL SERVIDOR JUNTO CON LOS DATOS PASADOS POR PARAMETRO, EN CASO DE QUE LOS HAYA -->
<form action="' . $_SERVER['REQUEST_URI'] . '" method="post" >
<div class="form-group">
<label for="titulo-id">Título</label>
<!-- Pasamos el parámetro título: $titulo -->
<input class="form-control" type="text" name="titulo" id="titulo-id" value="'.(isset($_POST['titulo'])?$titulo:null).'">
</div>
<div class="form-group">
<label for="descripcion-id">Descripcion</label>
<!-- Pasamos el parámetro descripcion: $descripcion -->
<input class="form-control" type="text" name="descripcion" id="descripcion-id" value="'.(isset($_POST['descripcion'])?$descripcion:null).'">
</div>
<div class="form-group">
<!-- Pasamos la variable usuario: $user_login -->
<input class="form-control" type="hidden" name="usuario" id="usuario-id" value="'.$user_login.'">
</div>
<div class="form-group">
<label for="tipo_de_peticion-id">Tipo de petición</label>
<select id="tipo_de_peticion-id" name="tipo_de_peticion">
';
//Rellenamos los diferentes tipos de peticiones
foreach ($terms as $term) {
echo '<option value="'.$term->slug.'">'.$term->name.'</option>'; //Mostramos los tipos de peticiones disponibles
}
echo '
</select>
</div>
<div class="form-group">
<!-- Pasamos el parámetro tema de ayuda: $tema_de_ayuda -->
<label for="tema_de_ayuda-id">Tema de ayuda</label>
<input class="form-control" type="text" name="tema_de_ayuda" id="tema_de_ayuda-id" value="'.(isset($_POST['tema_de_ayuda'])?$tema_de_ayuda:null).'">
</div>
<!-- Indicamos en que CPT almacenamos la información e incluimos un campo oculto cpt_nonce_field para asegurar el envío desde esta fuente-->
<input type="hidden" name="cpt" id="post_type_id" value="peticiones" />
'. wp_nonce_field( 'cpt_nonce_action', 'cpt_nonce_field' ).'
<div class="form-group">
<input class="form-control" type="submit" value="Enviar" name="submit"/>
</div>
</form></div>
';
Previo al código anterior necesitamos seleccionar el usuario actual y los términos que hemos definido para los tipos de peticiones. En nuestro caso son dos: Oferta y Demanda.
//Seleccionamos el usuario actual
$current_user = wp_get_current_user();
$user_login=$current_user->user_login;
//Seleccionamos los terminos definidos para los tipos de peticiones
$terms = get_terms(
array(
'taxonomy' => 'tipo_de_peticion',
'hide_empty' => false,
'parent' => 0 )
);
Validar el Formulario
En la validación del formulario, nos creamos una instancia de la clase WP_Error y comprobamos si faltan algunos de los campos del formulario. Esta comprobación se hará al momento del envío, y el momento en que se hace la validación se lleva a cabo más adelante, lo importante ahora es abstraernos y validar los campos.
global $reg_errors;
$reg_errors = new WP_Error;
if (empty($titulo) || empty($descripcion) || empty($tema_de_ayuda)){
$reg_errors->add('field', 'Faltan los campos requeridos');
}
if (empty($usuario)){
$reg_errors->add('field', 'Debe estar registrado');
}
if (!isset($_POST['cpt_nonce_field']) || !wp_verify_nonce($_POST['cpt_nonce_field'],'cpt_nonce_action')){
$reg_errors->add('field', 'Falla la seguridad');
if (is_wp_error($reg_errors)){
foreach ($reg_errors->get_error_messages() as $error) {
echo '<div><strong>ERROR: </strong>'.$error.'</br></div>';
}
}
Comprobación y guardado de datos
Es el momento de realizar la validación y de guardar los datos. Si hemos llegado hasta aquí, es porque el usuario a pinchado en enviar y espera una respuesta ya sea de éxito o fracaso.
En el paso anterior creamos un objeto WP_Error que definimos como global precisamente para usarlo nuevamente. Además definimos el resto de variables que vamos a necesitar, también global
global $reg_errors, $titulo, $descripcion, $usuario, $tipo_de_peticion, $tema_de_ayuda;
Ahora es el momento de validar nuestro formulario a través de la función anterior y si todo es correcto guardamos la información dentro de nuestro CPT.
//Si no hay errores creamos la solicitud
if (count($reg_errors->get_error_messages())<1){
$solicitud = array (
'post_title' => $titulo,
'post_content' => $descripcion,
'usuario' => $usuario,
'post_status'=> 'pending',
'post_type'=>$_POST['cpt']
);
//Creamos el nuevo post
$new_post=wp_insert_post($solicitud, $reg_errors);
//Definimos los términos de su taxonomía a la que pertenece
$taxonomy = 'tipo_de_peticion';
$result=wp_set_object_terms($new_post, $tipo_de_peticion, $taxonomy);
$tags= 'tema_de_ayuda';
$result=wp_set_object_terms($new_post, $tema_de_ayuda, $tags);
//Definimos el usuario al que pertenece
$users = get_field('usuario', $new_post, false);
$user = get_user_by('login',$usuario);
if($user){
$new_user_id_to_add = $user->ID;
}
// add the users ID to the array
$users[] = $new_user_id_to_add;
// update the field
// $selector == the field key of the field to update
update_field('usuario', $users, $new_post);
//Actualizamos resto de campos
update_post_meta( $new_post, 'titulo', $titulo );
update_post_meta( $new_post, 'descripcion', $descripcion );
Ejecutar todo
El siguiente código, comprueba si el usuario ha pulsado el botón enviar del formulario mediante la variable $_POST[‘submit’] y en caso afirmativo valida el envío del formulario y almacena la información.
global $titulo, $descripcion, $usuario, $tipo_de_peticion, $tema_de_ayuda;
if (isset($_POST['submit'])){
validacion_envio_formulario(
$_POST['titulo'],
$_POST['descripcion'],
$_POST['usuario'],
$_POST['tema_de_ayuda']);
$titulo = sanitize_text_field( $_POST['titulo'] );
$descripcion = sanitize_text_field( $_POST['descripcion'] );
$usuario = sanitize_user($_POST['usuario']);
$tipo_de_peticion = sanitize_text_field( $_POST['tipo_de_peticion'] );
$tema_de_ayuda = sanitize_text_field( $_POST['tema_de_ayuda'] );
completa_solicitud(
$titulo,
$descripcion,
$usuario,
$tipo_de_peticion,
$tema_de_ayuda);
}
registro_form ($titulo, $descripcion, $tema_de_ayuda);
CREAR SHORTCODE
Por último, solo queda crear el shortcode que nos permita colocar nuestro formulario en la página que queramos:
// Registrar nuevo shortcode: [cr_custom_solicitud]
add_shortcode( 'cr_custom_solicitud', 'custom_registration_shortcode' );
// Función callback
function custom_registration_shortcode() {
ob_start();
ejecuta_todo();
return ob_get_clean();
}
Y hasta aquí todo por hoy. Espero que os haya gustado esta publicación sobre como crear un formulario wordpress mediante código y si es así me lo podéis indicar a través de los comentarios o de las redes sociales.
Happy coding!!