How To Open Fillable Forms Directly From Ninja Tables

  • Create a table and a form with the same input areas
  • Add a button link on the table connected to the form
  • Transfer the table columns’ value
  • Result
how to fill up forms in a table in WordPress

If you have any experience with Ninja Tables, you already know about creating tables with form entries. The integration with Fluent Forms makes it happen super smooth! But what about filling up a form with table data directly from a table? You’re lucky because Ninja Tables can help you fill up forms in a table just as well!

When a user connects Fluent Forms with Ninja Tables, it’s mostly to create a table with form entries. You only need to build a form and then a table with it by connecting Fluent Forms. After that, any changes made in the form will appear in a tabular structure.

However, there’s another trick to fill up and submit forms. Users might want to pass the table data to a form and connect that specific form to a column in the table.

Wanna know how it works? Let’s get to it!

Fill up forms in a table: Using Ninja Tables & Fluent Forms

It’s easy to import WordPress form entries to a table. But when it comes to using only WordPress tables to open a form related to a certain person, Ninja Tables Fluent Forms integration seems like a blessing!

Suppose you have a table and a form with ID, First Name, Last Name, and Email. There’s another column in the table, “Submit Form.”

The “Submit Form” column is where the form is connected, and each form is for a specific user with their ID, name, and email. Right after they click on the form link, they will be directed to the form.

Here’s how to fill up forms in a table with Fluent Forms and Ninja Tables.

If you know how to create forms or tables, skip the first jump link and go straight to the second one.

This process might come off as a bit challenging at first. We’ll walk you through all of it.

Step 1: Create a table and a form with the same input areas

submit forms in WordPress table

a) First of all, here’s a table made in Ninja Tables with ID, First Name, Last Name, Email, and a Submit Button column for 10 individuals.

The Submit column is empty for now because we haven’t added any buttons yet. If ID number 1, Butch, wants to fill up his form, he only has to click the button on this column.

Each form link will have each individual’s data. As a result, they don’t have to type their ID, names, or email address on the form.

Skim through Ninja Tables documentation if you’re a novice at creating data tables with this table plugin.

b) Secondly, we have created a form in Fluent Forms with the same table columns. There’s a text area where users can put any additional information and submit the form.

forms in WordPress

Have a look at Fluent Forms documentation to learn how to create a form.

Step 2: Add a button link on the table connected to the form

The first entry in the table, Butch, wants his personal details ready on the form to just proceed with submission.

The form is the receiver, and the table is the sender.

So, we need to create the button link that takes the user to the form.

  • The first thing to do here is to copy the form’s shortcode and publish it on a WordPress Page
  • Copy the published page’s URL and paste it on the Ninja Tables Transform Value box for the column “Submit button”
  • An HTML code (< a href= ……….) is used here
  • We also named the button “Fill-up form”
how to fill up forms in a table
  • <a href=”Form page’s URL“> Fill-up form </a>
  • After updating, open the table in a preview window
fill up forms in Ninja Tables
  • The last column now has a “Fill-up form” button link, and all are clickable. Users can open it in a new window and fill it up

But this form is still empty since we haven’t added any command to fetch users’ data. If the 8th user, Marisa, wants her information on the form and avoids typing, her form needs to be connected to the table.

Step 3: Transfer the table columns’ value to the form for each user

The sender table is ready, and now it’s time to connect the receiver form.

  • Open the form to edit the “Advanced Options” for each input field
Fluent Forms settings
  • Change the default value from the dropdown and pick “Populate by GET Param” for all the fields
  • The auto-generated shortcodes {get.numeric-field}, {get.first_name}, {get.last_name}, and {get.email} will fetch table data
  • Copy the parameter name and paste it on the form’s URL
  • For instance, we took numeric-field. Added it on the URL with a question mark and equal sign and pressed enter

What “GET Parameter” does is to bring the data from the table and display it on the form

  • Since we added value 5 for the ID field, the form’s ID field will show 5. You can test with anything else from the form
  • After repeating the process for all fields, the URL looks like this

-https://sandbox.wpninjathemes.com/4243-2/?numeric-field=5&first_name=Abe&last_name=Burton&[email protected]

filling up Fluent Forms

This is what the form will be after pressing the enter button-
1. ID=5
2. First Name=Abe
3. Last Name=Burton
4. [email protected]

  • We have copied the new URL and pasted it in Transform Value, replacing the previous URL

Then clicked “Update.”

Ninja Tables transform value feature
  • But this link only has static data, regardless of the users. So, all the forms for each user will have the same ID, names, and email we have used with GET Parameter

Simply put, everyone will see the same form

  • To turn it dynamic, we will use the Ninja Tables reference shortcodes. These codes will pass the value accurately for each row
link to submit button in Ninja tables

We have changed the following-
1. numeric-field=5 into numeric-field={{row.id}}
2. first_name=Abe into first_name={{row.firstname}}
3. last_name=Burton into last_name={{row.lastname}}
4. [email protected] into email={{row.email}}

That’s all there is to do!

Now the forms will bring data from each user and show distinct user information. Update it and check the preview.

Result

Here’s the user ID 7’s form that we opened from the table. This user now only has to put something in the text area and submit the form.

user form in Ninja Tables

It all might seem a bit tricky when you try it for the first time. Also, there’s no documentation on this functionality. But it’s very simple if you follow these steps.

Try clicking the demo forms yourself.

IDFirst NameLast NameEmailSubmit button
1ButchTowndrow[email protected]
2AbeFancet[email protected]
3OliveGepheart[email protected]
4PennSandifer[email protected]
6WilmarAthy[email protected]
7WinnBerecloth[email protected]
8KaterineDugan[email protected]
9BerniceHuikerby[email protected]
10MarisaConerding[email protected]

Endnote

As a user of both WordPress table plugin and form builder plugin, there must be times when you wanted to merge these two for your audience’s comfort. Fortunately, Ninja Tables and Fluent Forms’ correlation is way past creating forms and tables. It’s also possible to fill up a form connected to the table data!

Ninja Tables features are indeed smart and useful. Going beyond its key features is mostly for advanced-level users. So, we hope this article can guide you right.

With every update, there will be more secrets to unveil. Keep up with us, and let us know if there’s something else you would like to learn.

Ninja Tables price

Nusrat Fariha

Hi! I'm a creative content writer at WPManageNinja & Product Marketing Lead at Ninja Tables. I love to work on diverse topics. When I'm not writing, you'll find me going through my favorite books or drawing something!

Leave a Reply