We can retrieve a CF state object for a form form window.cfstate, which is an object of all Caldera Forms state objects. The keys of this object are the ID attribute of the form. For example, if you’re form’s ID is CF12345678 and it is the only form on the page, it’s ID attribute is, ‘CF12345678_1’. You can get it’s state object using this code:
Keep in mind, ID attribute of the form is not predictable as that _1 could be _2 or _3 if there are more forms on the page that rendered first. This is not a concern, because events there are events you can bind to in Caldera Forms, such as validation events or the form submission event that expose the form’s ID attribute.
For example, to access the state of a form, when submission happens, you can do this:
Subscribing To Changes In Field Values
You might have noticed in the last code example while we solved the need to target the form by an unknown ID, we still had to assume the _1 in the field’s ID attribute to get it’s state. We can capture the field IDs when the form is loaded, using the “cf.form.init” event:
Instead, you can use the CFEvents object, which when used with specific instance provided by CFState’s event() function you can bind to changes of a field of that form and the form only.
Capturing Caldera Forms Field Values For Analytics Tracking
For example, let’s say you want to report a Google Analytics event when a Caldera Forms Field was changed for the first time, you could bind to the change event of all fields, like this:
Note that the form for this example uses two number fields. The first has the id of “fld_5986742_1”. We subscribe to changes of that field and then take its value multiplied by 1.07 and use it as the value of the second field, which has the id of “fld_7788423_1”.
The cf.add event is fired after Caldera Forms conditional logic runs and adds a field.
There is a also a “cf.remove” event that fires after a field is hidden by conditional logic:
Additional Conditional Events
In Caldera Forms 1.8.0 and later, an even is triggered on the form’s state object, after a field is enabled, disabled, hidden or shown by conditional logic.
Where Does This Code Go?
When using WordPress hooks to customize Caldera Forms or other plugins you should not modify the plugin files, or you will lose your changes when you update the plugin. Instead you should create a small plugin to hold the custom code. It's easy, learn how here.
Technically you can add the custom code to your theme's functions.php, but then you will not be able to change your theme and keep these customizations.