Data, Maps, Usability, and Performance

Repeatable Field Creation and Inline Edit with Fromidable Forms

Last updated on June 14, 2016 in Development

Formidable Forms Repeatable Field PHP

Last year I wrote an article on Gravity Forms and now I want to follow up with something on Formidable Forms. Instead of doing a comparison between these two WordPress plugins, I will write about two problems that I have encountered with FormidableForms and explain how I have resolved them. The first one is based on the backend, PHP code that will create repeatable fields inside a form and the second one goes into the front end, JavaScript code that helps hooking into “in-place” edit.

Programmatically create a Repeatable Section in a Form

The Repeatable Section is a pro-only feature of Formidable Forms that allows you to repeat a group of fields unlimited times with a plus/minus or add/remove buttons. Seems like a common use case, but it was not easy to understand how that works in the backend from current documentation. I had to create a form entry from PHP (functions.php, template page, or a separate plugin) and while simple creation use cases are outlined, I have not seen an example of using FrmEntry::create to create a repeatable section programatically. Digging into the code as well as looking at the Formidable MySQL tables has helped me solve this problem and learn a little bit more about the WordPress plugin.

Imagine a simple form that asks for your name and then it has a repeatable section where you can add your children and their names and ages. This section has to repeat as number of children is unknown. How can you populate this repeatable section with PHP?

So, our form (lets say it has an ID 1) has one field for a name (lets say ID 5) and a repeatable section (ID 10), which inside has 2 fields (ID 11 for name and ID 12 for age). Now we want to create a new repeatable section with data and add that to the form entry. Take a look at this code below to see how it works:

That code should be easy to understand but why is “form_id” set to 2? This is because a repeatable section is actually a new form, a child of the parent form.

So, we are storing the names and ages of the children in a separate form (form ID 2), which is a child of the parent form (form ID 1) and then we need to update that connection in the repeatable section (ID 10) of the parent form. Considering that Formidable uses 2 tables for storing data, 1 table for all the forms and another table for all the field data, this does make sense. However, it is not well documented and the UI will not show the “hidden” form used for the repeatable section so you have to find it in the database or the source code of the page.

Formidable does come with a lot of good docs, and some creation examples are covered but this one seems missing so far.

Call to a callback function for Formidable In-Place Edit

Another common feature of a modern website is inline edit, which is supported in Formidable as a pro-only feature called in-place edit. It works well out of the box but I think there is room for improvement in terms of supporting customizations. Fundamentally, it is missing a call to some functions after it renders so that you can run some code or load a script right after the form is loaded with Ajax.

If you take a look at the code of this function you can see that it could be easily added to the success function of the Ajax request. Here is an example:

It’s not ideal to modify the original formidable.js source code file (keep in mind the minified version is served in production) but otherwise, it would be hard to know when to run your front end logic which has to do with a form being loaded inline.

Hope this helps if you are working with Formidable Forms.

Tags: , , ,

Facebook Twitter Hacker News Reddit More...