Caldera Forms conditional logic allows you to hide and show fields dynamically based on user input. Using JavaScript you can bind to the events triggered by the Caldera Forms conditional logic system to create custom animations or otherwise manipulate the fields that being added or removed.
When a conditional is met and it causes fields to be shown, the “cf.add” event is triggered. When fields are hidden, the “cf.remove” event is triggered. When fields are enabled, the “cf.enable” event is triggered.
Here is an example that uses the cf.add event to cause the showing of fields to fade in slowly using jQuery’s fadeIn() method.
In this example $( e.target ).find('.form-group' ) is used to target the container wrapping the inputs and labels being shown. jQuery’s hide() method is being used so the elements are added to the DOM hidden and then are before being slowly faded in.
To see the rest of the ways in which Caldera Forms’s free conditional logic forms can make your site more powerful, see our full tutorial on all of its features here.