Listen to form events with JavaScript callbacks
Run your own code when a form loads, a field changes, a step advances, or a submission succeeds or fails.
On this page
Form Builder Pro exposes a small JavaScript API, appCBForm, so your own scripts can react to what happens in a form — for example to send analytics events, show a custom message or pass data to another tool.
Listen to form events
Add this code to your theme (or any page with a Form Builder Pro form), inside a <script> tag. Keep the first line: it queues your listeners even if the form script hasn't loaded yet.
(function($){
window.appCBForm = window.appCBForm||function(){(window.appCBForm.q=window.appCBForm.q||[]).push(arguments)};
appCBForm('inited', function(form){
// the form has initialised
console.log('inited', form)
});
appCBForm('loaded', function(form){
// the form has loaded
console.log('loaded', form)
});
appCBForm('onEnter', function(form, input){
// a field value was entered or changed
console.log('onEnter', form, input)
});
appCBForm('onNext', function(...args){
// the Next button was clicked (multi-step forms)
console.log('onNext..', ...args)
});
appCBForm('onError', function(...args){
// the form has a validation error
console.log('onError..', ...args)
});
appCBForm('onSubmit', function(...args){
// the form was submitted
console.log('onSubmit..', ...args)
});
appCBForm('onSubmitSuccess', function(...args){
// the form was submitted successfully
console.log('onSubmitSuccess..', ...args)
});
appCBForm('onSubmitError', function(...args){
// the submission returned an error
console.log('onSubmitError..', ...args)
});
})(window.jQuery)Available events
inited— the form has initialised.loaded— the form has loaded.onEnter— a field value was entered or changed; receives the form and the input.onNext— the Next button was clicked in a multi-step form.onError— the form has a validation error.onSubmit— the form was submitted.onSubmitSuccess— the form was submitted successfully.onSubmitError— the submission returned an error.
Log the arguments with console.log while you build, to see exactly what each event passes for your form.