How to add a mobile friendly lightbox form?

I have a number of pop up forms across our websites. I use the Lightbox embed code, as I want the form to pop up from an image on the website (acting as a button)

BUT these forms don't appear correctly on a mobile - they are impossible to fill in - you can't scroll to reach the submit button...

An example of one of these forms can be seen here: http://www.jotform.com//?formID=53143282385960

and here http://www.globalscapesoftware.co.uk/eft/ (linked to the "Get The EFT Starter Pack)

What can I do?

Thanks

Michelle

I believe I understand that you would like to make your embedded lightbox form mobile responsive.

Here is what I currently see when viewing your site from my iPhone 6 as seen below.

However, currently lightboxes are not optimized for mobile resposiveness since there is no support with this as of yet. So this means you have to do this manually by adjusting some of your lightbox code to work around that problem.

Additionally, I've opened up a feature request since this should be allowed as currently the default lightbox embed code is set to fixed.

You can try setting your lightbox width to " 100% " to see if that will help.

If it does not then at that point please try using this custom script below:

<script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript">

    var parentWidth = window.innerWidth;

    if(window.innerWidth <= 499) {parentWidth = window.innerWidth;} else {parentWidth =  500;}

     var FL_53143282385960 = new JotformFeedback({

       formId: '53143282385960',

       base: 'https://form.jotform.com/',

       windowTitle: 'Download EFT Information Pack',

       background: '#FFA500',

       fontColor: '#FFFFFF',

       type: '1',

       height: 500,

       width: parentWidth,

       openOnLoad: true

     });

</script>

How do I get this script to work with a button, instead of just popping up...

I tried adding the button code in after this script and changed openOnLoad to false not true, but it still isn't working?

openOnLoad: false

would be all that you have to set up to have it not open when the page loads.

It is important however to note that openonload, openOnload and openOnLoad are different things, so it is best to just change the value.

Also if no code is after it (as in the comment by my colleague), then there should not be comma afterwards.

I did check your website: http://www.globalscapesoftware.co.uk/eft/ and the popup was not shown until I clicked on the DOWNLOAD button, do let us know if it is still opening for you or if we should check some other page.

Sorry - but I am a little confused...

The additional coding you provided has enabled the lightbox form to work properly from a mobile from the following pages;

http://www.globalscapesoftware.co.uk/dmz-gateway/

http://www.globalscapesoftware.co.uk/advanced-workflow-engine-eft-module/

http://www.globalscapesoftware.co.uk/as2-eft-module/

But the exact same code does not work from these pages;

http://www.globalscapesoftware.co.uk/eft/

http://www.globalscapesoftware.co.uk/business-activity-monitoring-eft-module/

http://www.globalscapesoftware.co.uk/content-integrity-control-cic-eft-module/

http://www.globalscapesoftware.co.uk/sftp-ssh-eft-module/

This is the code I have used (on the EFT Starter Pack Advert) - the same code is used on all pages...

<script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript"> var JFL_53143282385960 = new JotformFeedback({ formId: '53143282385960', base: 'https://form.jotform.com/', windowTitle: 'Download EFT Information Pack', background: '#FFA500', fontColor: '#FFFFFF', type: '1', height: 500, width: 700, openOnLoad: false }); </script> <a class="btn lightbox-53143282385960" style="margin-top: 16px"><img src="//www.globalscapesoftware.co.uk/wp-content/uploads/2015/03/EFT-Info-Pack-Ad4.png" alt="EFT Info Pack Ad40" width="499" height="853" class="aligncenter size-full wp-image-2873"></a>

Do you have any idea why it works on some and not on others?

Unfortunatley, on my end it appears to still be the same issue for all of the above links on my iPhone 6 as I've shown you in a screenshot for my previous reply to you about this problem.

If it's working for the few you first mentioned but not the others you said on your end then that sounds like it is probably interference with between your website and your form scripts.

Please allow us some more time to look into this a bit more to try to find out more about what's going on with it and if we're able to find a better workaround we'll notify you as soon as possible.

Hey Michelle & everyone else,

Our UI developers fixed this situation, where the lightbox embedded forms were not responsive.

You do not need any workarounds anymore. And also, since the lightbox embed code's updated through fetched JS files, you do not need to re-embed anything again. It should just work as responsive, still when you delete the workaround CSS codes.

We will be still waiting for your response and feedback,

Cheers.