Gravity Forms integration for wpDataTables

Video versionA video overview of Gravity Forms as a new table type

After installing and activating Gravity Forms integration for wpDataTables plugin, “Gravity Form” as a table type will appear natively in the wpDataTables plugin. You will be able to create wpDataTables based on your Gravity Form entries using the “Create a table linked to an existing data source” page.

Gravity Forms integration for wpDataTables is an add-on and like that requires installed and activated wpDataTables and Gravity Forms plugins on your WordPress website to be able to work!

Please note that tables created with Gravity Forms integration are NOT editable. We are currently working on adding the feature to edit the entries directly from data, but the current version does not support that. Subscribe to our newsletter to receive the notification when the feature will be released!

Example of a Gravity Form based table

The first thing you would need to do to create a Gravity Form-based wpDataTable is to prepare a Gravity Form, and to add at least one form entry in it. In this tutorial we will create a wpDataTable based on dummy “Build A Pizza” form that has 3 entries. Each form field will be shown as a wpDataTable column and each form entry will render one row in wpDataTable. On the left side you can see a dummy form that will be used in this tutorial.

Form fields that can be displayed in wpDataTable as columns are: “Your Name“, “Your Phone Number“, “Is This Pick Up or Delivery?“, “Delivery Date“, “Delivery Time“, “Delivery Address“, “Product Name“, “Select Your Size“, “Select Your Crust“, “Choose Your Toppings”, “Instructions or Additional Comments” and “Your Order Total” but it is not required to show all of them in the table.

When the form and entries are ready you can get to creating a wpDataTable based on it. To do that first go to wpDataTables -> Create a Table, choose “Create a table linked to an existing data source” option, and then click “next”.

Set some name for your new wpDataTable that will help you to find the table later, then choose “Gravity Form” as the Input data source type. After you choose “Gravity Form” as a table type, a new selectbox “Choose a Gravity Form” will appear. Using this selectbox you can choose a form, which will serve entries as the data for your new table. In this tutorial we will use “Build A Pizza” form.

After this step you will see a selectbox “Choose fields to show as columns” which allows to choose the form fields that can be used as columns. Using this selectbox you can choose form fields that will be used in the table, fields are separated in two categories: Form Fields and Common fields.

Common Fields are the default metadata fields that exist for every Gravity Form entry, and can be added in every Gravity Form based wpDataTable. These are always same: “Entry Date“, “Entry Id“, “User” and “User IP“.

As mentioned above it is not required to add all these fields to create a wpDataTable – just choose the ones that you would like to show in the table. In this example we will add “Your Name“, “Your Phone Number“, “Is This Pick Up or Delivery?“, “Delivery Date“, “Delivery Time“, “Delivery Address“, “Select Your Size“, “Select Your Crust“, “Choose Your Toppings”, “Your Order Total” “Entry Date” from the Common Fields category.

When the fields/columns that you want to show in the table are chosen, just click Apply and a wpDataTable will be created and displayed in the “Table preview and columns setup” card. You can see on the image on the left that the new wpDataTable has 11 columns: 10 columns created from Form Fields and one created from Common Fields (“Entry Date”). Each row represents one form entry that was previously added in the form.

Gravity form table settingsGravity form based table has additional settings

Each Gravity form based wpDataTable receives an extra Gravity settings tab on the table configuration page with some additional table settings. Using it you’ll be able to narrow down the range of form entries that will be displayed in wpDataTable – by status and by date.

You can toggle Show form deleted records to show/hide entries that are deleted by the administrator.

By choosing one of the two possible filtering logic options in the Filter by date selectbox you can filter entries by the date. It is possible to choose between Filter by date range and Filter by last X time period options or you can leave this dropdown empty if you don’t wish to filter form entries that are displayed in the table.

Filter by date range – If you select this option, two input fields (“From” and “To”) will be displayed right to the Filter by date selectbox. By choosing some date values in these datetimepicker input fields, wpDataTable rows will be updated by date range when entries have been added to the form.

Filter by last X time period – If you choose this option, two additional input fields will be displayed right to the Filter by date selectbox. In the first one you can add number of periods (e.g. 30), and in the second one you can choose between (Day(s), Week’s, Month’s and Year’s). By selecting e.g. “30 Day(s)” you will filter and display in wpDataTable just entries that are added in last 30 days in the Gravity Form that is used as data source for this wpDataTable.

(Optional) - Define additional column and table settings

At this point table is already prepared. But to improve the usability we need to define some additional settings for the table and for its columns. In this case we defined these settings:

1. Enabled Limit table width checkbox and disable Table title checkbox on “Display” tab.
2. Set the Filter type for “Created at” as “DateTime range”.
3. Add “$” character in Cell content suffix input field for “Your total order” column.

Insert the wpDataTable in your page or post

When configuration of your Gravity form based wpDataTable is finished, you just need to insert it to your post or page.

Open (or create a new) a WordPress post or page, place the cursor in the position where you would like to insert your table, click the “Insert a wpDataTable” button in the MCE editor panel, and choose the CSV-based table that you prepared.

Or, if you prefer to do things manually, you can just copy&paste the wpdatatable shortcode (you can find it in the wpDataTables browse page, or in wpDataTable edit page).

Read moreRelated documentation articles

Never miss new features!

Join 2000+ newsletter subscribers

Never miss notifications about new cool features, promotions, giveaways or freebies - subscribe to our newsletter! We send about one mail per month, and do our best to keep our announcements interesting.