Mostrar las entradas de un formulario de Gravity Forms en el Front-End usando Datatables y un Shortcode

En este pequeño te proporciono un ejemplo de cómo crear un plugin para WordPress y Gravity Forms que muestre las entradas de un formulario de Gravity Forms utilizando la librería de Datatables y mostrar la tabla mediante un shortcode.

Paso 1: Crear un nuevo plugin

Lo primero que debes hacer es crear un nuevo plugin personalizado de WordPress. Puedes hacerlo creando una carpeta con el nombre de tu plugin dentro de la carpeta “wp-content/plugins”. Por ejemplo, si deseas nombrar tu plugin “mi-plugin-gravity-forms-datatables”, crea una carpeta con ese nombre.

Paso 2: Agregar el código necesario para mostrar las entradas de Gravity Forms

Dentro de la carpeta de tu plugin, crea un nuevo archivo llamado “mi-plugin-gravity-forms-datatables.php” y agrega el siguiente código:

<?php
/*
Plugin Name: Mi Plugin Gravity Forms Datatables
Plugin URI: https://tu-sitio-web.com/
Description: Mostrar las entradas de un formulario de Gravity Forms en el Front-End usando Datatables y un Shortcode
Version: 1.0
Author: Tu nombre
Author URI: https://tu-sitio-web.com/
*/

// Agrega un shortcode para mostrar las entradas de Gravity Forms mediante Datatables
add_shortcode( 'gf_entries', 'gf_entries_datatable' );
// Función para mostrar las entradas de Gravity Forms mediante Datatables
function gf_entries_datatable( $atts ) {
// Obtiene los atributos del shortcode
extract( shortcode_atts( array(
'form_id' => '',
), $atts ) );
// Verifica que se haya proporcionado el ID del formulario
if ( empty( $form_id ) ) {
    return 'Debes proporcionar el ID del formulario de Gravity Forms.';
}
// Verifica si Gravity Forms está instalado y activo
if ( ! class_exists( 'GFFormsModel' ) ) {
    return 'Gravity Forms no está instalado o activo en tu sitio web.';
}
// Obtiene las entradas del formulario
$entradas = GFAPI::get_entries( $form_id );
// Verifica si hay entradas para mostrar
if ( empty( $entradas ) ) {
    return 'No hay entradas para mostrar.';
}
// Construye la tabla de las entradas mediante Datatables
$salida = '<table id="gf_entries_datatable">';
$salida .= '<thead>';
$salida .= '<tr>';
foreach ( $entradas[0] as $clave => $valor ) {
    $salida .= '<th>' . $clave . '</th>';
}
$salida .= '</tr>';
$salida .= '</thead>';
$salida .= '<tbody>';
foreach ( $entradas as $entrada ) {
    $salida .= '<tr>';
    foreach ( $entrada as $valor ) {
        $salida .= '<td>' . $valor . '</td>';
    }
    $salida .= '</tr>';
}
$salida .= '</tbody>';
$salida .= '</table>';
// Agrega los archivos CSS y JS necesarios para Datatables
wp_enqueue_style( 'datatables', 'https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css', array(), '1.10.25' );
wp_enqueue_script( 'datatables', 'https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js', array( 'jquery' ), '1.10.25', true );
// Agrega el script para inicializar Datatables
$salida .= '<script>';
$salida .= 'jQuery(document).ready(function() {';
$salida .= '    jQuery("#gf_entries_datatable").DataTable();';
$salida .= '});';
$salida .= '</script>';
return $salida;
}

En el código anterior se usa la API de Gravity Forms para obtener las entradas de un formulario específico y construye una tabla con esas entradas utilizando Datatables. También agrega los archivos CSS y JS necesarios para Datatables y un script para inicializar la tabla.

Paso 3: Usar el shortcode en una página o publicación

Ahora que has creado el shortcode, puedes usarlo en cualquier página o publicación de tu sitio web de WordPress. Simplemente agrega el siguiente código en el contenido de la página o publicación:

[gf_entries form_id="1"]

Este código muestra las entradas del formulario con ID “1” utilizando el shortcode que creaste en el paso 2. Asegúrate de reemplazar “1” con el ID del formulario que deseas mostrar.

Paso 4: Estilizar la tabla (opcional)

Si deseas personalizar el estilo de la tabla de las entradas, puedes hacerlo utilizando CSS. Por ejemplo, puedes agregar el siguiente código en el archivo “style.css” de tu tema de WordPress:

.dataTables_wrapper {
    margin-bottom: 1em;
}
#gf_entries_datatable {
    width: 100%;
    border-collapse: collapse;
}
#gf_entries_datatable th,
#gf_entries_datatable td {
    padding: 0.5em;
    border: 1px solid #ccc;
}

Este código agrega un margen inferior a la tabla, establece su ancho en 100% y establece el estilo de borde de las celdas de la tabla.

¡Eso es todo! Ahora deberías poder mostrar las entradas de un formulario de Gravity Forms mediante Datatables utilizando el shortcode que creaste.