Embedded Form - onSubmit to open 2nd form in lightbox

[Anonymous]

Hi -

I am looking for anyone with JS knowledge that would know how to manipulate the embed code for Froms 2.0 to open an iframe in a lightbox when the MKTO "submit" button is clicked?

Anyone tried something like this?  I have an embedded form on our site that when the submit button is clicked, I have a MKTO landing page with an additional small form that prefills the fields for validation and presents the user with an additional checkbox for T&C agreement. I would like for this landing page to be called into a lightbox feature as an iframe.

I tried various tricks in the developers API area, but none of them work just right or as needed. This is a request from legal, or else I would just do the 'visibility' rule in Forms 2.0.

Any insight would be greatly appreciated.

[Grégoire_Miche2]

Hi Mike and Sanford,

How many forms can you chain like this ?

-Greg

[SanfordWhiteman]

How many forms can you chain like this ?

An unlimited number!

The more modern demo of progressive forms is here: MktoForms2 :: Progressive Form Substitution - JSFiddle

[Alok_Ramsisaria]

I just saw the example you share for progressive forms. Quick question - when I click form on Step 1, is the information submitted to MKTO or it is submitted at the last step?

[SanfordWhiteman]

The information is submitted at each step, so if someone abandons at step 3 you still get the earlier fields.

[Anonymous]

Neither option works when I embed the code into our Drupal page.

[SanfordWhiteman]

Should be easy to do given the API.  Though you should figure out if you mean load the next form vs. show the next form.  If it were me I'd probably render both forms at start but only reveal (visibility/display) the second one later.  Otherwise you end up putting the whole form.render() inside your callbacks, which isn't a problem but might be less manageable.

[Anonymous]

im glad i found this!
im looking to create a 2-step form, doing something like this (onsuccess, load the next form)

you could EASILY do something like this : http://jsfiddle.net/hozm5akt/1/

that way you never have to modify the code, the second "form" (checkbox) is a marketo form.

[SanfordWhiteman]

OK, that 's even easier in a way: http://jsfiddle.net/sanford/04xtuorz/5/

[Anonymous]

Sanford - that is awesome, however, I was hoping for the original form data to actually be submitted to Marketo at the same time opening the lightbox with the secondary form in it.

[SanfordWhiteman]

This will get a JS developer started: http://jsfiddle.net/sanford/hd22114r/4/

In this example, I am writing the iframe contents at runtime instead of loading an external src, but it's exactly the same process if you use "src=blah.html".  What lightbox library you use to load the iframe is up to you -- that is really immaterial as you need to be able to coordinate the iframe's checkbox and the form process.

I never looked at the Forms API until 15 minutes ago so there may be some other tricks, but this appears to be the direction you describe. Oh, also you should use late-model Firefox or Chrome to look at it as I didn't proof it against older browsers.