Form in Lightbox on Non-Marketo Page

[Anonymous]

Trying to embed a form into a lightbox on a WordPress site.

Everything is working fine except when the lightbox is activated on a mobile device, you can't scroll through the form (it scrolls the background page instead), which is an issue since we require quite a few fields and the form height is greater than that of the lightbox window.

Currently our developer is going through a lightbox plugin to open an html page (with form script on it) over the page using the lightbox embed code. Is there a better way to do it? I remember seeing all kinds of resources on this topic before the community update, but can't seem to find anything now.

Anyone have any suggestions on how to enable scrolling for forms embedded in a light box, or for the best practices in using Marketo form on a WordPress site?

Thanks in advance,

Ivan

[Anonymous]

Is the URL public? Sharing it could help us debug the issue

The "responsibility" is more than likely on the lightbox plugin rather than Marketo.

[Anonymous]

Thanks for the response Jason,

Yes, the url is public: 60 Day Evaluation - Resources

I had a feeling it's the plugin as well .. Any suggestions will be greatly appreciated.

Thanks,

Ivan

[Casey_Grimes]

Congratulations, Ivan--you have now learned why I advise everyone against mobile modal windows at all expenses possible. Unfortunately, screens that are shorter than 550px or so (i.e., iPhone4 and to a certain degree, iPhone 5) are going to have the modal wrap with their overflow the way you're seeing now. You have two options here:

1. You could remove your form's labels altogether and switch to using placeholders (what Marketo Forms 2.0 calls "Hint Text") to show what the field should hold. This will reduce the length in your case to likely be short enough to work.

2. You could switch to using CSS accordions to show/hide forms upon a button press, allowing for infinitely long and short forms and no need to use placeholders if this is not desired.

You can guess which one I prefer.

[Anonymous]

Thanks for the response Courtney, I gave #1 a try, but still too long so that the form submit button is unreachable.

Any way you'd be willing to share an example/any documentation of the CSS accordion form you mentioned? Sounds like an excellent option, not sure how I would go about implementing it though.

Thanks!

Ivan

[SanfordWhiteman]

As an experiment, try this in your CSS:

.nivo-lightbox-body-effect-fade {

    overflow: hidden;

}

[Casey_Grimes]

Hi Ivan,

There's several different ways to make an accordion in CSS, though I prefer this particular code snippet if you're only going to use one element, like a form, as it allows for showing and hiding. Remember to hit "View Compiled" in the CSS window to see the final CSS output rather than Sass.