Embedded Form - onSubmit to open 2nd form in lightbox | Community
Skip to main content
A
Anonymous
January 28, 2015
Question

Embedded Form - onSubmit to open 2nd form in lightbox

  • January 28, 2015
  • 7 replies
  • 3319 views
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.
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

7 replies

SanfordWhiteman
SanfordWhiteman
Level 10
January 28, 2015
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.
A
Anonymous
January 28, 2015
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
SanfordWhiteman
Level 10
January 29, 2015
OK, that 's even easier in a way: http://jsfiddle.net/sanford/04xtuorz/5/
A
Anonymous
February 5, 2015
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
SanfordWhiteman
Level 10
February 5, 2015
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.
A
Anonymous
November 18, 2015

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

Grégoire_Miche2
Grégoire_Miche2
Level 10
November 18, 2015

Hi Mike and Sanford,

How many forms can you chain like this ?

-Greg

SanfordWhiteman
SanfordWhiteman
Level 10
November 18, 2015
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

A
AlokRa4
Level 10
November 19, 2015

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?

Terms & ConditionsAccessibility statement

Loading footer...