{"id":1941,"date":"2023-04-11T10:00:00","date_gmt":"2023-04-11T16:00:00","guid":{"rendered":"http:\/\/racmanuel.dev\/?p=1941"},"modified":"2023-04-03T20:40:04","modified_gmt":"2023-04-04T02:40:04","slug":"mostrar-las-entradas-de-un-formulario-de-gravity-forms-en-el-front-end-usando-datatables-y-un-shortcode","status":"publish","type":"post","link":"https:\/\/racmanuel.dev\/en\/mostrar-las-entradas-de-un-formulario-de-gravity-forms-en-el-front-end-usando-datatables-y-un-shortcode\/","title":{"rendered":"Display Gravity Forms form entries on the front end using DataTables and a shortcode"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">En este peque\u00f1o te proporciono un ejemplo de c\u00f3mo crear un plugin para WordPress y Gravity Forms que muestre las entradas de un formulario de Gravity Forms utilizando la librer\u00eda de Datatables y mostrar la tabla mediante un shortcode.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"684\" src=\"http:\/\/racmanuel.dev\/wp-content\/uploads\/pexels-photo-1181280-1024x684.jpeg\" alt=\"woman using laptop computer\" class=\"wp-image-2004\" title=\"\" srcset=\"https:\/\/racmanuel.dev\/wp-content\/uploads\/pexels-photo-1181280-1024x684.jpeg 1024w, https:\/\/racmanuel.dev\/wp-content\/uploads\/pexels-photo-1181280-600x401.jpeg 600w, https:\/\/racmanuel.dev\/wp-content\/uploads\/pexels-photo-1181280-300x200.jpeg 300w, https:\/\/racmanuel.dev\/wp-content\/uploads\/pexels-photo-1181280-768x513.jpeg 768w, https:\/\/racmanuel.dev\/wp-content\/uploads\/pexels-photo-1181280-1536x1025.jpeg 1536w, https:\/\/racmanuel.dev\/wp-content\/uploads\/pexels-photo-1181280.jpeg 1880w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Photo by Christina Morillo on <a href=\"https:\/\/www.pexels.com\/photo\/woman-using-laptop-computer-1181280\/\" rel=\"nofollow noopener\" target=\"_blank\">Pexels.com<\/a><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"paso-1-crear-un-nuevo-plugin\">Paso 1: Crear un nuevo plugin<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 &#8220;wp-content\/plugins&#8221;. Por ejemplo, si deseas nombrar tu plugin &#8220;mi-plugin-gravity-forms-datatables&#8221;, crea una carpeta con ese nombre.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"paso-2-agregar-el-codigo-necesario-para-mostrar-las-entradas-de-gravity-forms\">Paso 2: Agregar el c\u00f3digo necesario para mostrar las entradas de Gravity Forms<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Dentro de la carpeta de tu plugin, crea un nuevo archivo llamado &#8220;mi-plugin-gravity-forms-datatables.php&#8221; y agrega el siguiente c\u00f3digo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\/*\nPlugin Name: Mi Plugin Gravity Forms Datatables\nPlugin URI: https:\/\/tu-sitio-web.com\/\nDescription: Mostrar las entradas de un formulario de Gravity Forms en el Front-End usando Datatables y un Shortcode\nVersion: 1.0\nAuthor: Tu nombre\nAuthor URI: https:\/\/tu-sitio-web.com\/\n*\/\n\n\n\/\/ Agrega un shortcode para mostrar las entradas de Gravity Forms mediante Datatables\nadd_shortcode( 'gf_entries', 'gf_entries_datatable' );\n\n\/\/ Funci\u00f3n para mostrar las entradas de Gravity Forms mediante Datatables\nfunction gf_entries_datatable( $atts ) {\n\/\/ Obtiene los atributos del shortcode\nextract( shortcode_atts( array(\n'form_id' =&gt; '',\n), $atts ) );\n\n\/\/ Verifica que se haya proporcionado el ID del formulario\nif ( empty( $form_id ) ) {\n    return 'Debes proporcionar el ID del formulario de Gravity Forms.';\n}\n\n\/\/ Verifica si Gravity Forms est\u00e1 instalado y activo\nif ( ! class_exists( 'GFFormsModel' ) ) {\n    return 'Gravity Forms no est\u00e1 instalado o activo en tu sitio web.';\n}\n\n\/\/ Obtiene las entradas del formulario\n$entradas = GFAPI::get_entries( $form_id );\n\n\/\/ Verifica si hay entradas para mostrar\nif ( empty( $entradas ) ) {\n    return 'No hay entradas para mostrar.';\n}\n\n\/\/ Construye la tabla de las entradas mediante Datatables\n$salida = '&lt;table id=\"gf_entries_datatable\"&gt;';\n$salida .= '&lt;thead&gt;';\n$salida .= '&lt;tr&gt;';\nforeach ( $entradas[0] as $clave =&gt; $valor ) {\n    $salida .= '&lt;th&gt;' . $clave . '&lt;\/th&gt;';\n}\n$salida .= '&lt;\/tr&gt;';\n$salida .= '&lt;\/thead&gt;';\n$salida .= '&lt;tbody&gt;';\nforeach ( $entradas as $entrada ) {\n    $salida .= '&lt;tr&gt;';\n    foreach ( $entrada as $valor ) {\n        $salida .= '&lt;td&gt;' . $valor . '&lt;\/td&gt;';\n    }\n    $salida .= '&lt;\/tr&gt;';\n}\n$salida .= '&lt;\/tbody&gt;';\n$salida .= '&lt;\/table&gt;';\n\n\/\/ Agrega los archivos CSS y JS necesarios para Datatables\nwp_enqueue_style( 'datatables', 'https:\/\/cdn.datatables.net\/1.10.25\/css\/jquery.dataTables.min.css', array(), '1.10.25' );\nwp_enqueue_script( 'datatables', 'https:\/\/cdn.datatables.net\/1.10.25\/js\/jquery.dataTables.min.js', array( 'jquery' ), '1.10.25', true );\n\n\/\/ Agrega el script para inicializar Datatables\n$salida .= '&lt;script&gt;';\n$salida .= 'jQuery(document).ready(function() {';\n$salida .= '    jQuery(\"#gf_entries_datatable\").DataTable();';\n$salida .= '});';\n$salida .= '&lt;\/script&gt;';\n\nreturn $salida;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">En el c\u00f3digo anterior se usa la API de Gravity Forms para obtener las entradas de un formulario espec\u00edfico y construye una tabla con esas entradas utilizando Datatables. Tambi\u00e9n agrega los archivos CSS y JS necesarios para Datatables y un script para inicializar la tabla.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"paso-3-usar-el-shortcode-en-una-pagina-o-publicacion\">Paso 3: Usar el shortcode en una p\u00e1gina o publicaci\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora que has creado el shortcode, puedes usarlo en cualquier p\u00e1gina o publicaci\u00f3n de tu sitio web de WordPress. Simplemente agrega el siguiente c\u00f3digo en el contenido de la p\u00e1gina o publicaci\u00f3n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">[gf_entries form_id=\"1\"]\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Este c\u00f3digo muestra las entradas del formulario con ID &#8220;1&#8221; utilizando el shortcode que creaste en el paso 2. Aseg\u00farate de reemplazar &#8220;1&#8221; con el ID del formulario que deseas mostrar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"paso-4-estilizar-la-tabla-opcional\">Paso 4: Estilizar la tabla (opcional)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si deseas personalizar el estilo de la tabla de las entradas, puedes hacerlo utilizando CSS. Por ejemplo, puedes agregar el siguiente c\u00f3digo en el archivo &#8220;style.css&#8221; de tu tema de WordPress:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.dataTables_wrapper {\n    margin-bottom: 1em;\n}\n\n#gf_entries_datatable {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n#gf_entries_datatable th,\n#gf_entries_datatable td {\n    padding: 0.5em;\n    border: 1px solid #ccc;\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Este c\u00f3digo agrega un margen inferior a la tabla, establece su ancho en 100% y establece el estilo de borde de las celdas de la tabla.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00a1Eso es todo! Ahora deber\u00edas poder mostrar las entradas de un formulario de Gravity Forms mediante Datatables utilizando el shortcode que creaste.<\/p>\n\n\n<style><\/style><style><\/style>\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading has-large-font-size\" id=\"necesitas-ayuda-con-un-proyecto-web\">\u00bfNecesitas ayuda con un proyecto web?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Si \u00bfNecesitas ayuda con alg\u00fan proyecto web? No dudes en contactarme desarrollo soluciones completas y personalizadas con WordPress y PHP, con herramientas y procesos modernos, utilizando HTML, CSS, SCSS, PHP, JavaScript, Bootstrap y m\u00e1s\u2026 Si \u00bfEst\u00e1s listo? \u00a1Env\u00edame un mensaje y hablemos de tu proyecto web!<\/p>\n\n\n<div class=\"wp-block-groundhogg-forms\">\n\t<div class=\"gh-form-wrapper\"><form method=\"post\" class=\"gh-form gh-form-v2\" target=\"_parent\" enctype=\"multipart\/form-data\" name=\"Formulario de Contacto\" id=\"gh-form-24\" data-id=\"24\"><div class=\"gh-form-fields\"><div class=\"gh-form-column col-1-of-2\"><label for=\"first_name\">Nombre <span class=\"required\">*<\/span><\/label><div class=\"gh-form-input-field\"><input type=\"text\" name=\"first_name\" id=\"first_name\" class=\"gh-input gh-first-name\" value=\"\" required\/><\/div><\/div><div class=\"gh-form-column col-1-of-2\"><label for=\"last_name\">Apellido(s) <span class=\"required\">*<\/span><\/label><div class=\"gh-form-input-field\"><input type=\"text\" name=\"last_name\" id=\"last_name\" class=\"gh-input gh-last-name\" value=\"\" required\/><\/div><\/div><div class=\"gh-form-column col-1-of-1\"><label for=\"email\">Correo electr\u00f3nico <span class=\"required\">*<\/span><\/label><div class=\"gh-form-input-field\"><input type=\"email\" name=\"email\" id=\"email\" class=\"gh-input gh-email\" value=\"\" required\/><\/div><\/div><div class=\"gh-form-column col-1-of-1\"><label for=\"primary_phone\">Tel\u00e9fono o WhatsApp <span class=\"required\">*<\/span><\/label><div class=\"gh-form-input-field\"><input type=\"tel\" name=\"primary_phone\" id=\"primary_phone\" class=\"gh-input\" value=\"\" required\/><\/div><\/div><div class=\"gh-form-column col-1-of-1\"><label for=\"nombre_de_tu_negocio_o_empresa\">Nombre de tu Negocio o Empresa<\/label><div class=\"gh-form-input-field\"><input type=\"text\" name=\"nombre_de_tu_negocio_o_empresa\" id=\"nombre_de_tu_negocio_o_empresa\" class=\"gh-input\" value=\"\"\/><\/div><\/div><div class=\"gh-form-column col-1-of-1\"><label for=\"link_de_tu_pagina_web\">Link de tu pagina web<\/label><div class=\"gh-form-input-field\"><input type=\"url\" name=\"link_de_tu_pagina_web\" id=\"link_de_tu_pagina_web\" class=\"gh-input\" value=\"\" placeholder=\"Si tu negocio o empresa tiene p\u00e1gina web ingresa aqu\u00ed el link.\"\/><\/div><\/div><div class=\"gh-form-column col-1-of-1\"><label for=\"question_type\">\u00bfQu\u00e9 tipo de pregunta tienes? <span class=\"required\">*<\/span><\/label><div class=\"gh-form-input-field\"><select name=\"question_type\" id=\"question_type\" class=\"gh-input\" required><option value=\"Cotizaci\u00f3n\">Cotizaci\u00f3n<\/option><option value=\"General\">General<\/option><option value=\"Soporte\">Soporte<\/option><\/select><\/div><\/div><div class=\"gh-form-column col-1-of-1\"><label for=\"message\">Pregunta <span class=\"required\">*<\/span><\/label><div class=\"gh-form-input-field\"><textarea name=\"message\" id=\"message\" class=\"gh-input\" rows=\"7\" placeholder=\"Tu pregunta o duda...\" type=\"text\" required><\/textarea><\/div><\/div><div class=\"gh-form-column col-1-of-1\"><div class=\"consent gh-gdpr\" id=\"gdpr_consent\"><div ><label class=\"gh-checkbox-label\"><input type=\"checkbox\" name=\"data_processing_consent\" id=\"data-processing-consent\" class=\"\" value=\"yes\" required\/><span class=\"checkbox-label\">I agree to racmanuel.dev&#8217;s storage and processing of my personal data. <span class=\"required\">*<\/span><\/span><\/label><\/div><div ><label class=\"gh-checkbox-label\"><input type=\"checkbox\" name=\"marketing_consent\" id=\"marketing-consent\" class=\"\" value=\"yes\"\/><span class=\"checkbox-label\">I agree to receive marketing offers and updates from racmanuel.dev.<\/span><\/label><\/div><\/div><\/div><div class=\"gh-form-column col-1-of-3\"><button type=\"submit\" class=\"gh-submit gh-button primary\" value=\"\">\u00a1P\u00f3ngase en contacto!<\/button><\/div><\/div><\/form><\/div><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>En este peque\u00f1o te proporciono un ejemplo de c\u00f3mo crear un plugin para WordPress y Gravity Forms que muestre las entradas de un formulario de Gravity Forms utilizando la librer\u00eda de Datatables y mostrar la tabla mediante un shortcode.<\/p>","protected":false},"author":1,"featured_media":2004,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"footnotes":""},"categories":[48],"tags":[50,42],"niveles":[39],"class_list":["post-1941","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","tag-gravity-forms","tag-wordpress","niveles-avanzado"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/posts\/1941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/comments?post=1941"}],"version-history":[{"count":3,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/posts\/1941\/revisions"}],"predecessor-version":[{"id":2005,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/posts\/1941\/revisions\/2005"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/media\/2004"}],"wp:attachment":[{"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/media?parent=1941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/categories?post=1941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/tags?post=1941"},{"taxonomy":"niveles","embeddable":true,"href":"https:\/\/racmanuel.dev\/en\/wp-json\/wp\/v2\/niveles?post=1941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}