...

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

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:

  • Create a New Table
  • Adjust Options and Settings
  • View a Table Preview and Setup Columns

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…

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.

    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 Optionsour documentation. And for more insight on creating pie charts and graphs, be sure to explore wpDataTables extensive documentation.

    Forminator and wpDataTables.

    Your WordPress tables will be set!

    Source: wpmudev.com

    Discover more from WIREDGORILLA

    Subscribe now to keep reading and get access to the full archive.

    Continue reading