Create Amazing Free Frontend Tables, Graphs, and Charts with Forminator and wpDataTables

Turning form data into insightful tables, graphs, and charts just got easier with the introduction of wpDataTables Integration for Forminator Forms.

This add-on to our popular 5-star Forminator plugin will allow you to create responsive, sortable tables & charts based on Forminator’s form, quiz, and poll submissions from your WordPress site’s frontend.

This feature is great for:

Public Directories – The Forminator form collects the data and displays it in a searchable, sortable table.
Data Dashboards – Similar to above, this can have different charts and tables.
Quiz Leadership Board – Use to create a leadership board to display the quiz score of everyone who has taken the quiz and sorted based on their rank (number of correct answers).
Polls – Can be used to display the poll data in a graph when a poll has ended and you can have changed the original poll to draft state.

And it’s all free and easy to do!

In this article we’ll show you just how easy, by creating a simple data table that draws straight from an existing Forminator form.

More specifically, we’ll look at how to get this collaboration set up for your WordPress site and show you how to:

We’ll then show off a few bonus examples of other tables and charts that are possible.

By the end of this article, you’ll see how Forminator and wpDataTables cannot be (table)topped!

Install These Plugins and Follow Along

To get started, you’ll need to install three plugins. It’s a bit different than other installs because this uses an addon plugin to function.

First off, it’s pretty obvious, but you’ll need Forminator. You can also use the Pro version of Forminator (the same goes for wpDataTables), but it’s not required.

forminator image — None of this happens without Forminator.

You’ll also need to download wpDataTables AND the addon plugin, wpDataTables Integration for Forminator Forms.

Image of Forminator and wpDataTables. — wpDataTables addon is the next crucial element.

Got all three? Great! Once installed and activated, you’ll be ready to go.

Let’s go ahead and…

Create a New Table

To create a new table, you’ll be hopping into wpDataTables to do so. Simply go to wpDataTables from the WordPress menu and click on Create Table.

You can do this from the dashboard or menu.

Where you create a table at in wpDataTables. — There are two places to create a table.

You’ll then want to select the Create a data table linked to an existing data source option and hit Next.

Where you create a data table linked to an existing data source. — This option is one of the first ones at the top.

WPDataTables lets you create tables from Excel, CSV, JSON, XML, serialized PHP arrays, and even MySQL-query-based tables.

As we’re creating a new table using Forminator, however, at the new screen, you’ll select Forminator Form from the Input data source type.

Where you implement Forminator. — It’s easy to spot in the dropdown.

Oh did I mention you’ll need an existing Forminator form, quiz, or poll to draw from?

If you need help with this, here are a few of our previous form building posts to help you out:

Next, choose what form, poll, or quiz you’d like to use to create a table where it says Choose a Forminator Form.

This area shows you all the forms you have available that were created in Forminator.

For this article, I’ll go with one that I created called wpDataTables Test Form.

Where you choose a Forminator form. — I have several options to pick from, but I’ll go with an example I created just for this article.

It’s worth noting that the form, poll, or quiz you want to use must have at least one submission stored in your database, or you won’t be able to create a table with it.

If there are no submissions, you’ll get an error message indicating that the table in the data source has no rows.

Error message you get when a table has no rows. — Uh-oh! No rows. This is the error message that you’ll get.

With that being said, the next step in the process is to Choose fields to show as columns.

This pulls up every field you have in the Forminator form that you chose to use. Select the fields that you want to show as columns.

Choose all of the fields at once or individually.

When it comes to supported form fields, there’s a ton of them. You can include:

Name (Single and Multiple)
Email
Phone
Address
Website
Input
Textarea
Number
Radio
Checkbox
Calculations
Select (Single and Multiple)
Datepicker (Calendar, Dropdowns, and Text input)
Timepicker ( Dropdowns and Number input)
File Upload (Single and Multiple)
Post Data
Hidden Field
Currency
Paypal
Stripe
E-Signature (only available in Forminator PRO)

Something to keep in mind is that fields like reCaptcha, HTML, Page break, Section, and GDPR Approval are excluded from tables.

Once you have all of your fields set, click Save Changes. It will give you the opportunity to…

Adjust Options and Settings

These other options and settings allow you to customize the new table even further!

Keep in mind that some of these additional settings are only available with the Pro version of wpDataTables; however, most are available for the free version.

Here’s a rundown of what all can be tweaked and settings:

Data Source
Display
Sorting and Filtering
Table Tools
Placeholders
Customize
Forminator Settings

Let’s take a look at each one in more detail.

1. Data Source: This is the initial screen we just went over where you Input Data Source Type for Forminator. You can always revisit this area if you want to change the source and fields.

The data source tab. — This is the same tab that we went over previously.

2. Display: You can adjust the layout of your table for the frontend display.

There are options, such as Table Title, Info Block, Pagination, Scrollable, and more.

The display tab. — Want a table title? Do that and more in this area.

There are many different adjustments in this section, so be sure to check out this area and change accordingly.

3. Sorting and Filtering: This tab gives you options to allow your users to filter and sort the data that’s on your frontend display. Check the boxes of what you’d like to include.

Sorting and filtering tab. — Note that advanced custom filters are a Pro feature only.

4. Table Tools: Here is where you can enable copy & save options in your table. Once enabled, the dropdown gives you options for print, PDF, CSV, and more.

The dropdown menu reveals all of your options.

When saved, your users will have your selected options to choose from.

5. Placeholders: This is a Pro option, and all of the features for the placeholders category cannot be used with tables generated from Forminator data.

6. Customize: This is a table styling option that is only available for Pro.

7. Forminator Settings: An option area for Forminator, where you can filter by entry ID range and entry date.

The Forminator settings tab. — Filter by entry ID range and entry date.

Once you have all of your settings configured, you can copy the shortcode.

This works on any page, post, or acceptable widget. When pasted on your WordPress site, you’ll be all set!

The shortcode that you use for wpDataTable — Click the icon next to the shortcode to copy it automatically.

If you ever need to adjust or change anything, you can always go back to this area and alter accordingly.

View a Table Preview and Setup Columns

Now that you have the foundation set up with the data source, the Table preview and columns setup will appear.

Here, you can view what your table will look like, sort by the number of entries, search, and edit.

By clicking on the gear icon in each category is where Column Settings is found.

In this area, you have the option to change column positions, rename displayed header, add cell content suffix, and more.

Each category has customization options.

You can create so many options and variations with wpDataTables and Forminator, so it may take several attempts to perfect your table.

Examples of Tables and Charts

Beyond the table we just created, here’s a look at a couple more examples of what can be created.

You’re able to set up a pie chart…

…a colorful bar chart.

A graph with poll results. — The results are in.

There are also line charts, bubble charts, donut charts, and more that can be created!

Various charts. — There are many charts to choose from.

As you can see, there are a ton of possibilities when it comes to customization.

To check out some more examples, view our documentation. And for more insight on creating pie charts and graphs, be sure to explore wpDataTables extensive documentation.