Re: Embedded Form - onSubmit to open 2nd form in lightbox

Anonymous
Not applicable

Embedded Form - onSubmit to open 2nd form in lightbox

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.
Tags (1)
10 REPLIES 10
SanfordWhiteman
Level 10 - Community Moderator

Re: Embedded Form - onSubmit to open 2nd form in lightbox

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.
Anonymous
Not applicable

Re: Embedded Form - onSubmit to open 2nd form in lightbox

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
Level 10 - Community Moderator

Re: Embedded Form - onSubmit to open 2nd form in lightbox

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

Re: Embedded Form - onSubmit to open 2nd form in lightbox

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
Level 10 - Community Moderator

Re: Embedded Form - onSubmit to open 2nd form in lightbox

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
Not applicable

Re: Embedded Form - onSubmit to open 2nd form in lightbox

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

Grégoire_Miche2
Level 10

Re: Embedded Form - onSubmit to open 2nd form in lightbox

Hi Mike and Sanford,

How many forms can you chain like this ?

-Greg

SanfordWhiteman
Level 10 - Community Moderator

Re: Embedded Form - onSubmit to open 2nd form in lightbox

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
Level 10

Re: Embedded Form - onSubmit to open 2nd form in lightbox

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?