Progressive Form Substitution... With a Twist

[SheilaB]

Marketing would like to create a 3-step process to get someone to register for a demo. Here's a simple outline. 

Step 1:

Email Address

Step 2:

First Name

Last Name

Solution Interest

Step 3 - depends on the answer to Solution Interest above:

Interest1: 

- Company Name

- Current Tool

- Timeline

- Team count

OR

Interest2:

- Company Name

- Number of Agents

- Digital Channel

OR

Interest3:

- Company Name

- Primary community

- Number of customers

- Timeline

You can see that steps 1 and 2 are straightforward. Step 3 shows some common and some different fields depending on the answer to "Solution Interest" in Step 2. For Step 3, I was originally thinking that I could just set up using visibility rules on the third form but there are some fields in common between the various options and for any given option, the fields in that area need to be required but you run into challenges if a required field is hidden. 

@SanfordWhiteman has this neat code that allows multiple forms to be strung together: Marketo Forms2:: Progress Form Substitution  but it doesn't quite get me there as I think that Step 3 needs to be a different form based on the answer to the Solution Interest question in Step 2. 

Clearly I'm looking for the least amount of Javascript coding. Thinking that Sandford's code is a good start but wondering if there is an easy way to change out the third form based on the Solution Interest field after the second form?

Suggestions are appreciated!

Thanks,

Sheila

[SanfordWhiteman]

---

... fields in that area need to be required but you run into challenges if a required field is hidden. 

---

That's true — if the field is actually hidden (Hidden type) and doesn't have a value. But Visibility Rules don't create Hidden fields! They don't include non-visible fields in the form at all, so they don't interfere with validation.

So at that level, I think you can use my Progressive Form Substitution code. Include the Solution Interest as a hidden field, and use that as the condition in your Visiblility Rules.

However, the remaining problem may be that you don't have native Pre-Fill available for that field Solution Interest. Is this on a Marketo LP?

[SheilaB]

Thanks @SanfordWhiteman 

The forms will be embedded on a non-Marketo landing page so native prefill won't be available. How can I make the Solution Interest field hidden on the 3rd form and still ensure it is populated with the right value going directly from form 2 to form 3?

Thanks again,

Sheila

[SanfordWhiteman · Accepted solution]

Glad you asked!

I just updated the code in the Progressive Form Substitution CodePen to help with your requirements.

Just add the fields you want to the forwardFields array in the config block.

In the CodePen you can see it has the example values:

forwardFields : ["Email", "Title"]

That will forward those 2 fields from form to form (as Hidden fields). Previously it was hard-coded to only pass Email.

[SheilaB]

@SanfordWhiteman Thank you!!

One clarifying question... since the 3rd form is using the "Solutions Interest" field for visibility of other fields on the form, I need to have "Solutions Interest" as a hidden field on form 3 when I'm designing the form so I am able reference it to set the visibility. Since the "Solutions Interest" value will be capture on form 2, will this cause any issues since your code is using the .addHiddenFields() function to also add "Solutions Interest" to form 3? Just not sure what happens if the field is already hidden and the .addHiddenFields() function is called. Am I worrying about nothing?

A hundred "thank yous" to you @SanfordWhiteman 

[SanfordWhiteman]

Nothing to worry about.

[SheilaB]

I just found a reference that said "Also, you can use .addHiddenFields() instead of .vals() to ensure that the fields are a) on the form b) as hidden fields and c) have the correct values that you want to pass into Marketo. If the fields already exist, this function will detect the fields and only set the values. Very handy."

OK, so now it is 1000 thank yous to @SanfordWhiteman 

[SanfordWhiteman]

I just found a reference that said "Also, you can use .addHiddenFields() instead of .vals() to ensure that the fields are a) on the form b) as hidden fields and c) have the correct values that you want to pass into Marketo. If the fields already exist, this function will detect the fields and only set the values. Very handy."

OK, so now it is 1000 thank yous to @SanfordWhiteman 

---

Exactly, although I wouldn't use vals(): the explicit method names are addHiddenFields() and setValues().

addHiddenFields() will inject hidden DOM elements if fields don't exist. setValues() will set values on existing elements only, whether hidden or not.

They're both useful, though, because in some cases you want to only set fields if the end user (Marketo user) has added them to the form explictly in Form Editor, which means setValues() is appropriate.

In your case the fields need to be added FE b/c otherwise they can't be used in Visibility Rules.

[SheilaB]

@SanfordWhiteman 

Hi again, so the team finally gave me a web page to try the 3 part demo form with... all of the code you have provided that pushes values between the forms work great. Thank you again!

I'm having a problem with spacing on the 3rd form. I know what is happening I just can't figure out how to fix. Here's a link to the test page: https://khoros.com/progressive-form-test

If you select "Community" or "Care" on the 2nd form solution question, when you get to the 3rd form, you see large spaces between the fields. These are places where there are field that are hidden because they aren't being asked for that specific solution. 

The form css is setting .mktoFormRow {margin-bottom: 20px !important; }. This is what has been used for all of the forms across the website. However, in this case there are .mktoFormRows that are really empty with a div class of .mktoPlaceholder but the margin-bottom is forcing the empty row to add in 20px for each.

There must be a way to force .mktoFormRow to have a margin-bottom of 0px for these empty  rows, but I can't figure out how to make it happen. Would so appreciate your advice on how to do this.

Thank you!