You can integrate Gravity Forms with wpDataTables by installing and activating the Gravity Forms integration add-on. Once it is active, “Gravity Form” appears natively as a table type in the wpDataTables plugin, and you can create wpDataTables based on your Gravity Form entries using the “Create a table linked to an existing data source” page.
Table of Contents
Video tutorial
What is the Gravity Forms integration for wpDataTables and how does it work?
It is an add-on that adds “Gravity Form” as a native table type, so your Gravity Form entries can be displayed and managed as a wpDataTable. After you install and activate the Gravity Forms integration for wpDataTables plugin, “Gravity Form” appears as a table type, and you can build tables from your form entries through the “Create a table linked to an existing data source” page.
How do I create a table from a Gravity Form?
Prepare a Gravity Form with at least one entry, then link it to wpDataTables. Each field becomes a column and each entry becomes a row. The example uses a “Seminar Feedback Form” with 15 entries.
- Prepare a Gravity Form with entries.
- Go to wpDataTables -> Create a Table.
- Select “Create a data table linked to an existing data source”.
- Name the table and choose “Gravity Form” as the input source.
- Select the Gravity Form to use.
- Choose which fields to display as columns.
Form Fields are the custom fields added during form creation, and Common Fields are the default metadata fields (Entry Date, Entry Id, User, User IP). After selecting the fields and clicking “Save changes”, a preview displays with each row representing one form entry.
Where do I start creating the table?
When the form and entries are ready, you can begin creating a wpDataTable based on it. First, go to wpDataTables -> Create a Table, choose “Create a data table linked to an existing data source” option, and click “Next”.
Set a name for your new wpDataTable to help you 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. With this selectbox, you can choose a form, that will provide entries as data for your new table. In this tutorial we will use the “Seminar Feedback” form.
The fields are separated into two categories: Form Fields and Common Fields.
- Form Fields are fields that were added in the process of creating a Gravity Form. Here, the fields 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”.
- 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 fields are always the same: “Entry Date”, “Entry Id”, “User”, and “User IP”.
As mentioned above, it is not required to add all of these fields to create a wpDataTable — just choose the ones you would like to show in the table. In this example we add “Event Name”, “Event Venue”, “Date”, “Group/Association Name”, “Do you think this venue is appropriate?”, “Did you receive all the information you required?”, “How would you rate any workshops attended?”, “Would you like to attendee any further Conference?”, and “Entry Date” from the Common Fields category.
Once you’ve selected the fields/columns you want to show in the table, click “Save Changes”, and a wpDataTable will be created and displayed in the “Table preview and columns setup” card. Each row represents one form entry that was previously added in the form.
Can I load large Gravity Forms tables faster with server-side processing?
From version 1.1 there is an option to use Server-side processing with Gravity form based tables. This allows you to create a table from the form which has hundreds of thousands of entries.
Under DATA SOURCE tab you will find two more options:
- Server-Side Processing, or Lazy Loading – This switch defines whether the complete table data will be included in the page all at once, or if it will be loaded on request, with the sorting/filtering to be processed by server.
- Auto-refresh interval – If set to a value different from 0, tables will auto-refresh after each XX seconds interval.
Can I make a Gravity Forms table editable?
Yes. To allow front-end editing, open the “Editing” tab in the table configuration settings, click the “Allow editing” option, and click the “Apply” button. From the standard editing features in wpDataTables, for Gravity based tables you can use:
- Popover edit block – when this feature is enabled, you won’t see the “Add”, “New” and “Delete” buttons in their standard place (the top-right corner above the table, in the TableTools block); instead, when you click on any table row, you will see a popover.
- Editor roles – lets you select which WordPress user roles will be allowed to edit this table.
- Users see and edit only their own data – if this switch is enabled, every user will only see the rows that he/she entered.
- Show all rows in back-end – if “Users see and edit only their own data” is enabled, this option appears and allows users to see all data for this table in the admin area (available from version 2.7).
- Edit buttons to be displayed on the front-end – allows you to include only certain editing buttons on the front-end by selecting them from this drop-down; leave it unchecked to show all buttons.
- Show duplicate button – if this option is enabled, the Duplicate edit button will be available in the table’s Edit buttons. This option is unchecked by default.
When the table is saved and inserted in the post or page, the look of the table on the front-end is slightly different from a typical non-editable table. You will see three new buttons (unless you set it differently with the “Edit buttons to be displayed on the front-end” option) in the Table Tools section of the table.
On the other hand, if the “Popover edit block” option is enabled, you won’t see the “Add”, “New” and “Delete” buttons in their standard place; instead, when you click on any table row, you will see a popover with the edit buttons (unless you set it differently with the “Edit buttons to be displayed on the front-end” option) in the Table Tools section.
How do I add, edit, or duplicate entries?
After clicking the NEW button, you will see an editor popup. The popup is responsive, so it will work correctly on mobile and tablet devices as well. Multi-page forms will also work for adding new entries. Please keep in mind that we are using Gravity’s own form for adding new and editing entry functionality.
To edit an existing entry, click on the row that has the desired entry data and, after you select it, click on the EDIT button. The same popup will show up, with the same form in it, only this time populated with data. After entering the necessary changes, click the OK button to save it.
To duplicate an existing entry, click on the row that has the desired entry data and, after you select it, click on the Duplicate button. Before that, please make sure the “Show duplicated button” option is turned on on the Editing tab in the table settings. The same popup will show up, with the same form in it, only this time populated with data. After entering the necessary changes, click the OK button to duplicate it, and the edit modal will be closed.
How do I filter which form entries appear?
Each Gravity form-based wpDataTable receives an extra Gravity settings tab on the table configuration page, along with several additional table settings. These allow you to narrow the range of form entries to be displayed in the wpDataTable — by status and by date.
- Filter by status – you can toggle this option to show or hide entries that are deleted by the administrator.
- Filter by user – if you choose this option, the user will be able to see only their own entries in the table. This is the same option as “Users see and edit only own data” on the Editing tab, and it allows you to filter the table by the user for non-editable tables.
- Filter by date – by choosing one of the two possible filtering logic options in the Filter by date select-box, you can filter entries by their date. You can choose between Filter by date range and Filter by last X time period, or you can leave this drop-down empty if you don’t want to filter the form entries that are displayed in the table.
How does “Filter by date range” work?
Filter by date range – If you select this option, two input fields (“From” and “To”) will be displayed by the Filter by date selectbox. By choosing several date values in these datetimepicker input fields, wpDataTable rows will be updated by date range once entries have been added to the form.
How does “Filter by last X time period” work?
Filter by last X time period – If you choose this option, two additional input fields will be displayed by the Filter by date selectbox. In the first field, you can add a number of periods (e.g., 30), and in the second field, you can choose between (Day(s), Week(s), Month(s) and Year(s)). By selecting “30 Day(s)” for example, you will filter and display in the wpDataTable only those entries that were added in last 30 days in the Gravity Form that is used as the data source for this wpDataTable.
Which extra column and table settings should I set?
At this point, the table is prepared. But to improve its usability, we need to define some additional settings for the table and its columns. In this case, we defined these settings as:
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.
How do I add the table to a page or post?
When the configuration of your Gravity form-based wpDataTable is finished, you simply need to insert it in your post or page.
To open or create a new 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 Gravity wpDataTable 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). To add wpDataTable shortcodes on the page, please check out the section for Adding wpDataTables shortcodes on the page.
What are the limitations of Gravity based tables?
- Gravity Forms integration add-on is working with wpDataTables plugin and the core Gravity Forms plugin. However, integration with other Gravity Forms add-ons isn’t confirmed, so we cannot guarantee that it will work.
- Unavailable options – Because we are using Gravity’s own forms for editing functionalities, some features are unavailable in both table and column settings. These options are grayed out and disabled.
- Searching and sorting with Server-side processing – After turning on server-side processing, sorting and search may start to behave unexpectedly. We plan to work with Gravity team to improve it in future versions.
- Editing existing entry for multi-page form – Editing will work but it will be rendered as a single page form, the same way as it is on the Gravity forms edit page.
- No Duplicate option not working for editing existing entries – Gravity form doesn’t validate this option on editing existing entries.
- Configuring table relations (foreign key) – This option is not available for Gravity based tables
- Choosing editor input type – This falls under the first limitation. It is not possible to choose the editor input type because we are rendering the Gravity form in a pop-up edit modal
- Attachments are deleted when editing – At the moment, if your Gravity Forms have images or other attachments included, you will not be able to properly edit the table generated from the form since the uploaded file will be deleted upon editing. We do not recommend enabling the editing option when you have attachments in the form.
