Datatables-Shortcode for Formidable Forms
Formidable Forms is the most robust data-driven application-building software available (in my opinion). The sky really is the limit when it comes to what you can do, from simple contact forms to robust applications good enough for the government to use. Prior to Strategy 11 developing the visual views addon, many of us would code HTML Tables to display our data within a view. This was time-consuming and sometimes cumbersome. Now with Visual Views, you can create an HTML Table view at the drop of a hat, code written for you by FF. The problem is, now how can you search it in real-time? How can you export the view as a PDF, Copy the Contents of the filtered view or download the view as a CSV quickly?
All of these things were almost impossible with the old HTML Tables, without adding some custom code to each view, etc. While creating an application for a local governmental agency, and building views by hand time and time again, I decided I wanted to look for another option. I knew I wanted to use JQuery Data-Tables, but if you are not a developer, it can be complicated to implement onto your server. Chris Adams of FDM Digital wrote up a great tutorial a few years ago, but there had to be an even easier way to do it. So I set out to get a shortcode that could be implemented easily in a view and give me the same results. What started as a basic PHP Snippet from Andrew K, DSFF has morphed into what it is now, having been modified for much more functionality.
Now, here we are. Datatables-Shortcode for Formidable Forms is a .json file exported from the Code Snippets Plugin, that is implemented as a shortcode that turns any HTML table wrapped in the shortcode into a fully functional JQuery Data-Table. The shortcode allows for the pre-determined sort of a column and the order in which it will be sorted. It further allows you to export your filtered view as a PDF, PRINT, CSV, or copy the content to your notepad. The buttons can be turned off or on in the shortcode.
The best part is you can now search that HTML table in real-time and choose how many entries you want to see, in a fully responsive DATA-TABLE. We have also included the SearchBuilder button Integration giving you:
- More searching functionality
- Complex searching across multiple columns at once
- Easily changeable logic operators
- Custom conditions
- Fully internationalisable
Implementing JQuery Data-Tables into a Formidable Forms Table View has NEVER been this easy. You simply wrap the FF View ID in the shortcode on your wordpress page, or in the before and after fields of your actual view (either way works perfect).
For a one-time fee of $20, you can start implementing this shortcode on unlimited websites, making your user experience so much easier!
Simply purchase the file, then import it into the Code Snippets Plugin to activate the shortcode.
DEMO is presorted on “column 3” and ordered to “desc” using the shortcode on load.
The shortcode we use in WordPress to display the table below is:
|First Name||Last Name||Entry creation date||Entry updated date|
|Chris||Smithfirstname.lastname@example.org||August 3, 2022 at 8:39 pm||August 3, 2022 at 8:39 pm|
|Bill||Jonesemail@example.com||August 3, 2022 at 8:39 pm||August 3, 2022 at 8:39 pm|
|Cherry||Dayfirstname.lastname@example.org||August 3, 2022 at 8:39 pm||August 3, 2022 at 8:39 pm|
|Rocky||Hopsonemail@example.com||August 3, 2022 at 8:40 pm||August 3, 2022 at 8:40 pm|
|Mitchell||Smithfirstname.lastname@example.org||August 3, 2022 at 8:40 pm||August 3, 2022 at 8:40 pm|
|Candice||Johnsonemail@example.com||August 3, 2022 at 8:43 pm||August 3, 2022 at 8:43 pm|
|Ronald||McDonaldfirstname.lastname@example.org||August 3, 2022 at 9:13 pm||August 3, 2022 at 9:13 pm|
|Donald||Christemail@example.com||August 5, 2022 at 12:22 am||August 5, 2022 at 12:22 am|
|Candice||Dobsonfirstname.lastname@example.org||August 5, 2022 at 7:02 am||August 5, 2022 at 7:02 am|
|Johnny||Johnsonemail@example.com||August 9, 2022 at 7:30 pm||August 9, 2022 at 7:30 pm|
|Hhjh||Ffggfirstname.lastname@example.org||September 7, 2022 at 6:23 am||September 7, 2022 at 6:23 am|
|John||Doeemail@example.com||September 27, 2022 at 9:36 pm||September 27, 2022 at 9:36 pm|
|bill||November 19, 2022 at 10:06 am||November 19, 2022 at 10:06 am|
|Bill||November 19, 2022 at 10:06 am||November 19, 2022 at 10:06 am|
|firstname.lastname@example.org||November 19, 2022 at 10:07 am||November 19, 2022 at 10:07 am|
|Tester||Testeremail@example.com||November 22, 2022 at 4:27 pm||November 22, 2022 at 4:27 pm|
|Tester2||Tester2firstname.lastname@example.org||November 22, 2022 at 4:37 pm||November 22, 2022 at 4:37 pm|