Conditional Progressive Form Substitution?

[dleopold]

I'm trying to create a form where if the user selects a certain value from a dropdown field, their information will be sent when they click Submit, but then a second form with appear with additional optional questions. If they select anything else, they'll just get redirected to a Thank You page.

Note: I've had the discussion with the team about using dynamic fields and just having the optional questions appear at the bottom of the first form if they meet the criteria, but since it's already a pretty long form, they think it will lead to greater form abandonment and would rather capture the required information first.

I have this working in pieces - when I load the first form the traditional way, the conditional logic works where the form is hidden upon Submit (prepping for the next form) or redirects. I also tried the code here (https://codepen.io/figureone/pen/wpXrvx?editors=1010) which is working correctly to load the second form, however it loads for everyone. I just need to figure out how to marry the two together and that's where I'm running into trouble.

Here is the code I'm using when it is just one form:

<script>

function loadMktoForm() {
( ( $ ) => {

let criteriaMet = false;

MktoForms2.loadForm(
domain_name,
munchkin_id,
form_id,
( form ) => {

form.onSubmit( () => {

// IF ORGANIZATION TYPE MEETS CRITERIA, SET VARIABLE TO CONTROL WHAT THE SUBMIT BUTTON WILL DO

var field_val = form.getValues()['Organization_Type__c'];

if ( (field_val === 'Medical Practice') || (field_val === 'Health System') ) {
criteriaMet = true;

}
} );

// Add an onSuccess handler
form.onSuccess( () => { // values, followUpUrl


if ( criteriaMet === true ) {
form.getFormElem().hide();

}

else {
// Take the lead to a different page on successful submit, ignoring the form's configured followUpUrl
location.href = "/thank-you/";

}


// Return false to prevent the submission handler continuing with its own processing
return false;


} );

}
);


} )( jQuery );
}

// Init the marketo form on page load
loadMktoForm();
</script>

Thank you!

[SanfordWhiteman]

Can you first take out the unnecessary IIFE that passes in an outside copy of jQuery? That's making the code harder to read and serves no purpose.

Also I wonder if you really need a new form, or if you want an intermediate submit button after which new fields are shown. This is generally smoother than coordinating multiple forms.

[dleopold]

Somebody else who worked at the company before me had written the initial code, so I'm just going in now to try to modify it for the new needs. I had edited some parts out when I posted so it wouldn't get too confusing and only show the relevant part of the code I was working with, but here it is in whole. I did try moving my criteriaMet variable into the loadForm section:

<script>
function GAFormSubmissionEvent() {

	// Track form submission on GA
	let lblGA = document.getElementById( 'mktoga_hRetsSCHkvKZ' ).value;
	if ( lblGA === 'Static Bar' ) {
		lblGA = lblGA + ' - ' + document.title;
	}
	ga( 'send', 'event', 'Request a Demo', 'Submit', lblGA );

}

function loadMktoForm() {
	( ( $ ) => {

		let rad_form_id = 4344;
        let other_form_id = 2840;
        let articleBody = document.querySelector("#primary article");

		switch ( window.location.pathname ) {
			default: 
                other_form_id = $( '#otherFormContainer').attr("data-value");
				rad_form_id = 4344;
                domain_name = '//connect.phreesia.com';
                munchkin_id = '508-AHM-437';
				break;
            case '/company/contact-us/':
				other_form_id = 2840;
                rad_form_id = 4344;
                domain_name = '//connect.phreesia.com';
                munchkin_id = '508-AHM-437';
				break;
            }
        
        if (articleBody.classList.contains('tag-payer')) {
                other_form_id = $( '#otherFormContainer').attr("data-value");
                rad_form_id = 4344;
                domain_name = '//memberconnect.phreesia.com';
                munchkin_id = '753-LZD-147';
        }

		$( '#demoFormContainer' ).prepend(
			'<form id="mktoForm_' + rad_form_id + '" class="mkto-desktop"></form>'
		);
        
        $( '#otherFormContainer' ).prepend(
			'<form id="mktoForm_' + other_form_id + '" class="mkto-desktop"></form>'
		);
                     

		MktoForms2.loadForm(
			domain_name,
			munchkin_id,
			rad_form_id,
			( form ) => {
                
                let criteriaMet = false;
                
				// stuffCookiesForm();
                if (domain_name == '//connect.phreesia.com'){
				let tabindx = 200,
					secondcolindx = 209;

				$( '#mktoForm_' + form.getId() + ' input:not([type=hidden]), #mktoForm_' + form.getId() + ' select, #mktoForm_' + form.getId() + ' textarea, #mktoForm_' + form.getId() + ' button.mktoButton' ).each( ( _key, value ) => {
					const prt = $( value ).closest( 'div.mktoFormCol' );
					if ( prt.is( ':first-child' ) ) {
						$( value ).attr( 'tabindex', tabindx );
						tabindx++;
					} else {
						$( value ).attr( 'tabindex', secondcolindx );
						secondcolindx++;
					}
				} );
                    


				form.onSubmit( ( stuff ) => {
					let source = false;
                    
					if ( stuff.getId() === '4344' ) {
						source = 'rad-desktop';
					}
					if ( stuff.getId() === '2146' ) {
						source = 'rad-mobile';
					}
					if ( source ) {
						window.history.pushState(
							'object or string',
							'Title',
							'/#' + source
						);
					}
                    
                    // IF ORGANIZATION TYPE MEETS CRITERIA, SET VARIABLE TO CONTROL WHAT THE SUBMIT BUTTON WILL DO
                    
                    var field_val = form.getValues()['Organization_Type__c'];
                    
                    if ( (field_val === 'Medical Practice') || (field_val === 'Health System') ) {
                            criteriaMet = true;
                            console.log("criteriaMet");

		                  }
				    } );

				// Add an onSuccess handler
				form.onSuccess( (values, followUpUrl) => { // values, followUpUrl
					
                    
                    if ( criteriaMet === true ) {
                        form.getFormElem().hide();
                        alert("second form to appear here");

                    }
                    
                    else {
                        // Use the default URL that is set up in Marketo
                        location.href = followUpUrl;

                    }
                    
                    if ( GAFormSubmissionEvent ) {
						GAFormSubmissionEvent();
					}
                    
                    // Return false to prevent the submission handler continuing with its own processing
                       return false;


				} );
                }
			}
		);
        
        MktoForms2.loadForm(
			domain_name,
			munchkin_id,
			other_form_id,
			( form ) => {
				
				// Add an onSuccess handler
				form.onSuccess( () => { // values, followUpUrl
					if ( GAFormSubmissionEvent ) {
						GAFormSubmissionEvent();
					}

				} );
			}
		);


		// Language switch in the disclaimer message
		$( 'a.disclaimer-text-switch' ).on( 'click', ( ev ) => {
			ev.preventDefault();

			if ( $( ev.currentTarget ).attr( 'id' ) == 'disclaimer-text-button-spanish' )
			{
				$( '#disclaimer-text-english' ).hide();
                    if ( '#disclaimer-text-english-contact' ) {
                        $( '#disclaimer-text-english-contact' ).hide();
                    }
				$( '#disclaimer-text-spanish' ).show();
                     if ( '#disclaimer-text-spanish-contact' ) {
                        $( '#disclaimer-text-spanish-contact' ).show();
                        }
			}
			else if ( $( ev.currentTarget ).attr( 'id' ) == 'disclaimer-text-button-english' )
			{
				$( '#disclaimer-text-spanish' ).hide();
                    if ( '#disclaimer-text-spanish-contact' ) {
                        $( '#disclaimer-text-spanish-contact' ).hide();
                    }
				$( '#disclaimer-text-english' ).show();
                
                    if ( '#disclaimer-text-english-contact' ) {
                        $( '#disclaimer-text-english-contact' ).show();
                    }
			}
		} );

	} )( jQuery );
}

// Init the marketo form on page load
loadMktoForm();
</script>

What exactly is an intermediate Submit button? The team has already decided they don't want all fields on the first form, even if they are dynamic, but if there is another way to do this without needing a second form, I can bring the idea to them and see how they feel about it.

[SanfordWhiteman]

Ah, seeing the rest of the code, you are using jQuery, although there’s still no need to pass it in.  MktoForms2.$ is a copy of jQuery that’s always available.

The Progressive Form Substitution JS is quite complex and while it could certainly be adapted to have more conditions, I don’t have the time to modify and QA test it at the present time.

What exactly is an intermediate Submit button? The team has already decided they don't want all fields on the first form, even if they are dynamic, but if there is another way to do this without needing a second form, I can bring the idea to them and see how they feel about it.

---

“Intermediate Submit” means there’s only one form but it’s submitted twice. To the end user, it should feel like two forms.

You do this by capturing the first onSuccess event and reenabling the Submit button (which is disabled by default).

In that same onSuccess, you also set a hidden field that governs visibility of other fields. This field should be a reusable string field like Form Visibility Manager A — letting you use it later for different tricks on different forms, as opposed to being dedicated to this particular trick.

Setting Form Visibility Manager A to “stage=2”, for example, can hide the original fields and show the 2 new optional fields. When they click the Submit button, it just sends the new updates. Again, the UX is like having 2 fields, but technically it’s one field that submits multiple times with different data. Much easier to manage than the whole Progressive Form Substitution thing.

[dleopold]

Ah ok, that's interesting and definitely easier than bringing a second form into the mix. Do you have an example of what the onSuccess code would look like to reenable the Submit button? I did a quick search but I didn't see anything in here. 

[dleopold]

@SanfordWhiteman I tried adding 'form.submittable(true);' to the onSuccess event, but the button still says Please Wait, so I'm guessing that's not the correct way to reenable the button. I don't see anything for it in the API documentation though. Am I missing something?

[SanfordWhiteman]

You need to remove the disabled and aria-disabled attributes and set the button HTML to the original value (which you can cache on the original whenReady).

[dleopold · Accepted solution]

Ok, I think I got it! It seems to be working correctly, but let me know if you see any glaring errors:

form.onSuccess( (values, followUpUrl) => {
					
                    
                    if ( criteriaMet === true ) {
                        
                        // RESET SUBMIT BUTTON
                        $mktoButton.prop("disabled", false);
                        $mktoButton.attr('aria-disabled', 'false');
                        $mktoButton.text($mktoButtonLabel);
                        
                        // UPDATE VALUES
                        form.vals({"secondForm":"Yes"});
                        criteriaMet = false;
                        
                        
                    }
                    
                    else {
                        // Use the default URL that is set up in Marketo
                        location.href = followUpUrl;

                    }
});

[SanfordWhiteman]

Seems reasonable, though I almost certainly wouldn’t use a generic name like criteriaMet. You’re really creating a form that progresses through multiple states (first fill in progress, first fill complete, second fill in progress, second fill complete).

[dleopold]

Agreed, I'm planning on going back and renaming some of the variables since I realized I may need one more since the second form will ultimately lead to a completely different Thank You page once it's made. Thanks for your help!