Using Caldera Forms JavaScript Events and State

Caldera Forms provides JavaScript APIs for reacting to form and field events and accessing and manipulating the form’s state through an abstraction CF State. This article is for developers looking to use this object for creating add-ons that manipulate field values or react to their changes. For example, you could use this information for advanced analytics tracking or partial submission tracking.

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:

This is also a great time to bind a function to any field’s value. Doing it this way instead of using generic JavaScript or jQuery removes the need to think about the different events triggered by form field types or how Caldera Forms represents values in complex field types. Also, you don’t have to worry about programatic updates, conditionals removing values, etc.

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:

Setting Caldera Forms Field Values With Custom JavaScript

Caldera Forms has calculation fields that can be used to display the result of an equation created with our visual calculation editor or a manual formula. You may find that for your unique needs, you need to do your own math using JavaScript. In this example, we create a function that runs every time a field changes and then updates the value of a second field using custom logic created in the JavaScript:

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”.

Run JavaScript After A Caldera Forms Field Is Unhidden By Conditional Logic

The cf.add event is fired after Caldera Forms conditional logic runs and adds a field.

This event is also used basically whenever something that would require running another initialization function is needed. For example, after a calculation field’s equation is run. That’s kind of messy, and Josh doesn’t love that, but it’s super useful. If you need to run some JavaScript when the form loads, and then that functions stops working after conditional logic, calculations, changing pages, loading a new connected form, use “cf.add” it’s a semi-magical solution.

Run JavaScript After A Caldera Forms Field Is Hidden By Conditional Logic

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.

 

How To Load Custom JavaScript In WordPress