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.
Got all three? Great! Once installed and activated, you’ll be ready to go.
Let’s go ahead and…
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.
You’ll then want to select the Create a data table linked to an existing data source option and hit Next.
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.
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:
- Creating the Perfect Contact Form with Forminator
- Create an Easy Payment Form (for free!) with Forminator
- How To Create A WordPress Quiz That Delights Your Audience And Drives Sales
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.
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.
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)
- Select (Single and Multiple)
- Datepicker (Calendar, Dropdowns, and Text input)
- Timepicker ( Dropdowns and Number input)
- File Upload (Single and Multiple)
- Post Data
- Hidden Field
- 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…
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
- Sorting and Filtering
- Table Tools
- 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.
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.
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.
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.
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!
If you ever need to adjust or change anything, you can always go back to this area and alter accordingly.
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.
There are also line charts, bubble charts, donut charts, and more that can be created!
As you can see, there are a ton of possibilities when it comes to customization.
The dynamic table duo of Forminator and wpDataTables puts them at the top of their game when creating tables!
They’re easily customized, edited, and enabled for the perfect table(s) for your WordPress site (for free!).
Your WordPress tables will be set!