WP Fluent Form Integration
You can show your WP Fluent Form entries as a tabular form in your front-end.
It is likely. Because, WP Fluent Form– a fantastic and dynamic form builder plugin which has myriads of amazing fields and features. It can give you the chance to use more than 25 form input fields, multi-column and essential integration.
On the other hand, Ninja Tables is the number 1 WordPress table plugin which is able to give you 100% responsive table for your website.
See it in action:
You can see that WP Fluent Form and Ninja Tables are pre-installed in WordPress dashboard.
For the tutorial purpose, we are going to create a form named “support form” by using WP Fluent Form and we will put some entries in it.
You can see on the above picture that we have already created the support form with necessary entries. Now, lets show those entries in Ninja Tables so that we can set those entries in the front end.
For this purpose, we will go to Ninja tables plugin and click on “Add table”.
After that, a pop-up window will appear on the screen. From there, click on “Connect Fluent Form” and give your table a title. Then, select your desired form by using “Select a form” box same as below image.
Now, all fields of your selected form will appear just below of the search box. From there, you can select all fields or any particular fields that you want to exhibit in the table and save it.
This is really an amazing and smart feature of Ninja Table. Now, you can see all fields of your form are displayed as column same as below picture.
In the Ninja table, you can customize your table’s column name, data type and table style too. What is more, Ninja tables can give you the opportunity to customize table design, responsiveness and table color too.
Let’s do some more customization such as- include another column name “description”. To do that, click on the “Edit” icon which is just above of the table.
After clicking there, you can see all fields of your form as below image.
After ticking off the “Description”box, update the setting by clicking on the “Update” button as below image and preview it.
But, it looks little bit messy along with “Description” column. Ninja tables has solution to give it a tidy look.
Click on the “Description” column button, a new pop-up window will appear on the screen.
Now, select the “Initial hide mobile, tab and regular computers” option in the “Responsive Breakpoint” box. After that, save your setting and reload the preview page.
Thus the magic begins. You can see all fields of your form in one place.
Now, go back to Fluent Form and open your support form by clicking on “Preview” button.
After that, fill up the form by giving inputs there as below image and submit the form.
Now, reload the table’s preview page again and see another magic over there.
You can see in the above image that our given last entry (New Entry) successfully updated in the Ninja table.
This is the most powerful combination of WP Fluent Form and Ninja Tables and undoubtedly, it is very helpful for the real life.