Flavonto Forms documentation, version 1.0.0

Developers

JavaScript events

Events forms dispatch in the browser, cancelling a submission, and the FlavontoForms object.

Every form element (.flvf) dispatches bubbling CustomEvents. event.detail.form is the form's controller object.

Event When detail
flvf:ready The form is set up form
flvf:change An answer changed (after logic and calculations updated) form
flvf:step A step is shown form, index, id (step id)
flvf:validate Answers were checked (a step or the whole form) form, errors (list of id, row, msg)
flvf:submit Just before sending. Call event.preventDefault() to stop it form
flvf:success The server stored the entry form, response (entry, reference, message, redirect and so on)
flvf:error Sending failed or answers were refused form, code, errors (by field id)
flvf:reset The form was reset after a confirmation form
flvf:upload A file finished uploading uuid, name
flvf:upload-removed The visitor removed an uploaded file (the temporary copy is deleted on the server) uuid, name 
document.addEventListener( 'flvf:success', function ( e ) {
	var form = e.target.closest( '.flvf' );
	console.log( 'Entry', e.detail.response.reference, 'from form', form.getAttribute( 'data-flvf-form' ) );
} );

document.addEventListener( 'flvf:submit', function ( e ) {
	if ( ! window.confirm( 'Send your answers?' ) ) {
		e.preventDefault();
	}
} );

The server checks everything again, so stopping or changing things in the browser never weakens validation.

Analytics

With Send events to Google Analytics or Tag Manager on (form settings, Analytics), successful submissions push an event (default form_submit, with the form id and entry reference) to dataLayer or gtag, using the code already on your site. Step events are optional. The plugin loads no analytics code of its own.

The FlavontoForms object

window.FlavontoForms holds version, forms (the controllers on the page) and boot(), which sets up forms added to the page later (for example in content loaded by another script):

window.FlavontoForms && window.FlavontoForms.boot();

Forms printed by the server are set up automatically, including forms in popups.