forms.js

forms.js

import { getSection, getTitleGroup } from './util/get-content-elements';
import DOMPurify from 'dompurify';

/** Marketo forms */
export const initForms = ( dataLayer, initDataLayer ) => {

	// eslint-disable-next-line no-undef
	MktoForms2.whenReady( function( form ) {
		form.onValidate( function( valid ) {
			const formEl = form.getFormElem();
			const button = formEl.find( 'button[type="submit"]' );
			const contentSection = getSection( formEl[0] );

			const fields = form.getValues();
			const allFields = Object.keys( form.getValues() );

			const invalidFields = [];
			allFields.forEach( ( key ) => {
				if( !fields[key] && !key.includes( 'clearbit' ) && !key.includes( 'mkto' ) && !key.includes( 'Google' ) ) {
					invalidFields.push( key );
				}
			}
			);

			if ( !valid ) {
				dataLayer.push( {
					'event': 'form_interaction',
					'eventInfo': {
						'eventAction' : 'form_error',
						'eventName' : 'Form Error'
					},
					'form': {
						'form_id' : form.getId(),
						'form_name' : ( fields.mktoFormParticipationtype ) ?? button.text(),
						'submit' : form.submittable(),
						'error': invalidFields.join( ', ' ),
						'complete' : false
					},
					'page': initDataLayer.page,
					'content': {
						'content_section': contentSection,
						'content_name' : getTitleGroup( formEl[0] ),
						'url': DOMPurify.sanitize( window.location.href )
					}
				} );
			}
		} );

		form.onSubmit( function handleSubmit ( thisForm ) {
			let event = 'form_submit';
			let eventName = 'Form submission';

			const formEl = form.getFormElem();
			const button = formEl.find( 'button[type="submit"]' );
			const fields = form.getValues();

			let contentSection = getSection( formEl[0] );
			let contentName = getTitleGroup( formEl[0] );

			switch( thisForm.getId() ) {
					case 9925:
						event = 'newsletter_signup';
						eventName = 'Newsletter Submitted';
						contentName = 'Subscribe to our newsletter',
						contentSection = 'Footer';
						break;
					case 11431:
						event = 'demo_request_submitted';
						eventName = 'Demo Request Submitted';
						contentSection = 'Hero Unit';
						break;
					case 6463:
						event = 'contact_submitted';
						eventName = 'Contact Submitted';
						contentSection = 'Hero Unit';
						break;
					default:
						break;
			}

			dataLayer.push( {
				'event': event,
				'eventInfo': {
					'eventAction' : 'submit',
					'eventName' : eventName
				},
				'form': {
					'form_id' : thisForm.getId(),
					'form_name' : ( fields.mktoFormParticipationtype ) ?? `${button.text()  } form`,
					'submit' : thisForm.submittable(),
					'complete' : true
				},
				'page': initDataLayer.page,
				'content': {
					'content_section': contentSection,
					'content_name' : contentName,
					'url': DOMPurify.sanitize( window.location.href )
				}
			} );

			form.submitable( true );
		} );
	} );
};