Open lightbox on form submit

[Jo_Pitts1]

All,

I've got a Marketo form on a Marketo landing page.  I have progressive profiling enabled on the form.

What I'd love to be able to do is, when the user clicks the submit button, show a lightbox that says something like 'thanks for the info, feel free to keep right on 'fessing up, and tell us more'.  If they close the lightbox, the form needs to refresh with the new progressive fields displayed.

It seems that I need more access to the HTML than is provided.  It looks like I could use the jquery simple popup, but I believe that would need access to the HEAD tag of the page.  However, this isn't my area of expertise so I'd love some advice as to how to achieve my goal.

Cheers

Jo

[SanfordWhiteman]

Did you search on the title of your post?  I've provided a demo of lightbox-on-submit in the past.

If they close the lightbox, the form needs to refresh with the new progressive fields displayed.

You can't just refresh the form for this, you have to refresh the LP.*  In general, you must be careful w/assumptions about how fast form posts are reconciled with lead records. It's not a synchronous process: it's fast or fast-ish, but not immediate.

* Technically, you can manipulate the filled fields on the fly in the same page, but this doesn't

account for the full range of ProgPro cases (i.e. fields that where not present on the form but which are non-empty.

[Jo_Pitts1]

Sanford,

I'd googled the heck out of it, but hadn't searched the community itself (doh!)

I presume this is the thread you are talking about? Lightbox form open on click

I'm working through how to actually implement this.  Fingers crossed I'll get there.  I love your coding and energy.. I just need a few more comments in the code (things like /*Create a custom HTML block on your LP and put code from here to the next comment*/).. to make it extra easy for numpties like me

Cheers

Jo

[SanfordWhiteman · Accepted solution]

Look at MktoForms2 :: nation/43232

In the onSuccess, I'm replacing the content (using innerHTML, you could use a pure DOM method if you want). The content contains a link, which when clicked navigates to the Thank You URL (which would be the same page, if you were using the default behavior).

[Jo_Pitts1]

Sanford,

That sample code is awesome.  Even I can understand what is going on

I notice you are loading the form yourself rather than using a marketo LP.   I've been told this makes field pre-filling a bit tricky.  Any thoughts on how to handle that?

Cheers

Jo

[SanfordWhiteman]

All my CodePen demos have to use embedded forms, being non-Marketo LPs... you just need the whenReady call on a Marketo LP (put it before the closing </body> tag).

[Jo_Pitts1]

Gotcha. I have (of course) made things complicated by having the form being chosen by segment. I might back that out for now so I have a known form ID to work with.

I'm off to find the wizard, the wonderful wizard of oz (well, actually - I'm off to find the munchkin ID ).

Thanks for the help. I'm slowly getting my JS, HTML, CSS up to spec.

Cheers

Jo

[SanfordWhiteman]

Don't know if I would use the Form ID directly in this case (since if you clone forms things break).

Instead, output the segment name into JS and have the Forms API code switch on, f.e. countrySegmentationSegment.

[Jo_Pitts1]

Sanford,

it transpires I don't need the form ID at all.  you were using that to do your load.  the LP is doing the form loads for me.  All I need to do is wait for it to be ready.

I've got to this point with my code (unstyled by CSS thus far)

<Script>

MktoForms2.whenReady(function(form) {

var formEl = form.getFormElem()[0],

submitEl = formEl.querySelector('BUTTON[type="submit"]');

form.onSuccess(function(vals, thankYouURL) {

formEl.innerHTML = '<DIV><P>Thanks for sharing,  The better we know you the better we can help you.  If you have a moment, click the button to tell us a bit more about you.</P><A href="javascript:window.location.reload(true)">I would love more help</A></DIV>';

MktoForms2.lightbox(form).show();

return false;

});

});

</Script>

What in your infinite wisdom would you be doing differently?  I'm going add in styling for the lightbox itself, and then styling for the <P> and the <A> (to make it a CSS button).  Am I on the right track on mighty Jedi?

[SanfordWhiteman]

Glad it's working for you.

Couple of best practices pointers, though.

1. Please don't use javascript: URLs.  They're a technology of last resort, and aren't necessary here.

Do this:

<A href="' + thankYouURL + '">

2. Lower-case (or upper-case) <script>, not <Script>.