Fluent Forms Integration

Fluent Forms is an amazingly dynamic plugin that includes lots of awesome features. You can implement 25+ form input fields, multi-column & required integrations.

With Ninja Tables, you can show your Fluent Forms entries in a table format on the front end.

Let’s go through the article to learn how to accomplish that.

Both the Ninja Tables and Fluent Forms are installed beforehand in the dashboard we’re using

Create a form and display in a table #

• Go to the Fluent Forms dashboard, create a form (here’s a form named Contact Form) & put some entries into it.

• The above image shows that all the required data has been entered into the form.

• Then these entries will be displayed in the Ninja Tables. To configure the entries in the front end, go to the Ninja Tables dashboard and click on Add Table.

• A pop-up box will show up on the screen after that.

• Click Connect Fluent Forms from there, and give a title to your table. Then choose your preferred form using the box Select a Form like the below screenshot.

• After connecting your form, all fields of your selected form will now show just under the search box. From here, you can choose and save all fields or any unique field you wish to view in the table.

• Then you will notice that all the selected fields in your form are shown below.

• Edit the table’s name, data type & table style as well using Ninja Tables. Plus, Ninja tables also give you the option to customize table design, responsiveness, and table color.

• Further customization can be done, such as – adding another Your Message column name. Select the Edit button that is just above the table.

• After clicking there, you can notice all your form fields, like the screenshot below.

• After checking the Your Message box, update the setting by clicking on the Edit button, as shown below, and preview it.

• However, along with the Your Message column, it’s looking a little bit messy. Ninja tables have solutions for a cleaner look.

• Click on the Your Message column button, and there will be a new pop-up box on the screen.

• Now in the Responsive Breakpoint box, choose the option Initial Hidden Mobile, tab, and Regular computers. Save your setting afterward, and reload the preview tab.

• And then, you can see all the fields of the form together in one place.

Displaying your own submissions form only #

• If you choose to use Ninja Tables to display your submissions, activate that from the configuration settings for Table Rows.

Show your table data according to the Entry Type #

• You can also show table data based on the Entry type. To do this, go to the form where all the required data has been entered.

• Go to the Change Status field and select your entry type Read / Unread / Trashed.

• Now go to your Ninja Table, which is connected with Fluent Forms. Entry Type enables you to select what type of entries you want to show from fluent forms.

• Choose your Entry type as per your needs.

• Here is the result of the table data, which depends on the Status which was chosen.

This is the most powerful combination of Fluent Forms and Ninja Tables, and undoubtedly, it is very helpful in real life.