Como integrar formularios en wordpress

Formularios WordPress mediante código

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:

Formulario wordpress hecho sin plugin
Formulario que vamos a hacer en wordpress sin ayuda de plugins

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 CPTpeticiones‘ con dos taxonomías: ‘tipos de peticiones‘ y ‘tipos de ayuda‘. El resultado que se persigue es este:

Custom post type registrado con plugin CPT UI
Tipo de contenido que almacena el formulario

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!!

Deja un comentario

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