Display Gravity Forms form entries on the front end using DataTables and a shortcode

In this brief guide, I provide you with an example of how to create a plugin for WordPress and Gravity Forms that displays entries from a Gravity Forms form using the Datatables library and renders the table via a shortcode.

Step 1: Create a new plugin

The first thing you need to do is create a new custom WordPress plugin. You can do this by creating a folder with your plugin's name inside the “wp-content/plugins” directory. For example, if you want to name your plugin “mi-plugin-gravity-forms-datatables”, create a folder with that name.

Step 2: Add the necessary code to display Gravity Forms entries

Inside your plugin folder, create a new file named “mi-plugin-gravity-forms-datatables.php” and add the following code:

&lt;?php '','<table id="gf_entries_datatable">';'<thead>';'<tr>';'<th>' . $key . '</th>';'</tr>';'</thead>';'<tbody>';'<tr>';'<td>' . $value . '</td>';'</tr>';'</tbody>';'</table>';'<script>';
$salida .= 'jQuery(document).ready(function() {';
$salida .= '    jQuery("#gf_entries_datatable").DataTable();';
$salida .= '});';
$salida .= '</script>';

The code above uses the Gravity Forms API to retrieve entries from a specific form and builds a table with those entries using Datatables. It also adds the necessary CSS and JS files for Datatables and a script to initialize the table.

Step 3: Use the shortcode on a page or post

Now that you have created the shortcode, you can use it on any page or post of your WordPress website. Simply add the following code to the content of the page or post:

[gf_entries form_id="1"]

This code displays the entries of the form with ID “1” using the shortcode you created in step 2. Make sure to replace “1” with the ID of the form you wish to display.

Step 4: Style the table (optional)

If you wish to customize the style of the entries table, you can do so using CSS. For example, you can add the following code to the “style.css” file of your WordPress theme:

.dataTables_wrapper {

This code adds a bottom margin to the table, sets its width to 100%, and sets the border style for the table cells.

That's it! You should now be able to display entries from a Gravity Forms form using Datatables via the shortcode you created.