Docs

[Antony H]

Hi there, I’ve added a form to a lightbox [using an iframe because it’s on an external site] and it works perfectly on desktop, but on mobile there is too much margin around the lightbox window so not all of the form width is visible.

If you go to the site and click the ‘request a valuation today’ button on the homepage you’ll see what I mean.

How do I make the lightbox window bigger please?

Thanks in advance.

[Antony H]

This reply has been marked as private.

[Joao]

Hi Antony

Please try adding the following code to Appereance Customizer Custom CSS

@media(max-width: 769px) {
.ilightbox-holder.light {
    width: 100%;
    margin: 0;
    left: 0;
}}

Let us know how it goes, if that does not work, please provide your admin credentials so we can take a closer look on your setup

Thanks

[Antony H]

Thanks Joao, that did “something” but if you look on mobile it’s not quite right!

Thanks again.

[Joao]

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[Antony H]

This reply has been marked as private.

[Joao]

Hi There,

I would give you a different setup suggestion.

Create a page in X without header or footer , to do that when you create a new page, under the blue update button on wp classic editor, you will find > Page Attributes > Page Templates

Select: Blank No Container No Header No Footer

Place the form on this page.

—————-

On your home page

add a raw code element and add

[lightbox selector=”.lightbox-selector”]

Add a button element and link it to the page you have created.

Also add the class lightbox-selector to the button.

let us know how it goes,

Joao

[Antony H]

Thanks Joao, I appreciate your help and I’ll happily give that a go.

The form is on another website, so I’ll still need to use the iframe. The current code I’m using is

<div style="display:none;" id="my-content"> <iframe style="height: 500px;" src="http://real-etc.page.lettinglead.com/iframe-landing-page"></iframe> </div> <a href="#my-content" class="lightbox-selector x-btn" data-type="inline">REQUEST A VALUATION TODAY</a> [lightbox selector=".lightbox-selector"]

Please can you advise what the new code will be if I call the new page /valuation-form ?

Thank you

[Joao]

Hi Antony,

I did +- what I explained before, on this page i created, called iframe I placed the iframe.

I also added a css to customizer to hide the cart.

Take a look on how it works now, I believe it is much better

Your original lightbox code is here :

<div style="display:none;" id="my-content"> <iframe style="height: 500px;" src="http://real-etc.page.lettinglead.com/iframe-landing-page"></iframe> </div> <a href="#my-content" class="lightbox-selector x-btn" data-type="inline">REQUEST A VALUATION TODAY</a> [lightbox selector=".lightbox-selector"]

Hope it helps

Joao

[Antony H]

Wow Joao, thank you. You are a superstar and really went above and beyond to help me.

The only issue is that the form doesn’t show on mobile. The lightbox opens but there is no form and the there is just this weird shap showing. The shape also shows on desktop although the form also appears if I scroll the mouse wheel.

[Joao]

Hi,

Your form loads on my desktop and Android Phone perfectly.

It does take a few second…

If the strange shape is the loader on top, you can get rid of it by adding the following code to Appereance Customizer Custom CSS.

ilightbox-loader.horizontal div {
      display: none;
}

Please remember to clean your browser cache on desktop and mobile and try again.

Thanks

[Antony H]

Ah, thanks Joao you are correct! I see it now but it takes 10-15 seconds to load. Is there a way to improve this please? The old method loaded almost instantly.

Thanks again.

[Joao]

Hi,

We could try a complete different method if you agree. The lightbox is not exactly made for the purpose we are trying now.

Have you ever used X Addon, Convert Plug?

It is a popup addon.

You can launch it from a button and you also can place a custom form. I believe the Iframe should work fine there.

Embed custom form in ConvertPlug

You can try in a different page maybe if you prefer, just for testing purposes.

But you need >

1- Go to Addons Install Convert Plug.

2- Create a modal and place the de iframe in the custom form, the code will render live just not while in ConvertPlug Editor.

3- Add laucher class to your modal.

4- Go to Cornerstone create a button link it to # and ad the launcher class.

You will be ablet to achieve all that with the documentation above.

I guess this is a good strategy, but not 100% sure yet 🙂

Give it a try

Joao

[Antony H]

Cool, I’ll give it a go. Thanks again for all of your help.

[Joao]

Let us know if you need further help

Joao

[Author]

Posts