Lightbox doesn't work in mobile/Other Lightbox Trigger options needed.

n/a

Our lightbox forms are not yet mobile responsive but there are workarounds for that.

In your lightbox embed code, simply put this script right after the open script tag.

var parentWidth = window.innerWidth;

if(window.innerWidth <= 480) {parentWidth = window.innerWidth;} else {parentWidth =  700;}

Then replace the width value with parentWidth

Example:

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

var parentWidth = window.innerWidth;

if(window.innerWidth <= 480) {parentWidth = window.innerWidth;} else {parentWidth =  700;}

      var JFL_62756794322161 = new JotformFeedback({

        formId: '62756794322161',

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

        windowTitle: 'FREE QUOTE FORM',

        background: '#FFA500',

        fontColor: '#FFFFFF',

        type: 'false',

        height: 500,

        width: parentWidth ,

        openOnLoad: false

      });

    </script>

To call the lightbox forms using custom buttons or images, just use the lightbox-xxxxxx class.

Example:

Button:

<button class="lightbox-62756794322161">Open Lightbox</button>

Image:

<img class="lightbox-62756794322161" src="your image link" />

If you need further assistance, let us know.

By the way, please don't forget to make your mobile form responsive first. Here's a guide: http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive

You can also use the following script.

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

var parentWidth = window.innerWidth;

if(window.innerWidth <= 600) {parentWidth = window.innerWidth-40;} else {parentWidth =  700;}

      var JFL_62756794322161 = new JotformFeedback({

        formId: '62756794322161',

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

        windowTitle: 'FREE QUOTE FORM',

        background: '#FFA500',

        fontColor: '#FFFFFF',

        type: 'false',

        height: 500,

        width: parentWidth,

        openOnLoad: true

      });

    </script>

<a class="btn lightbox-62756794322161" style="margin-top: 16px">Jeron Music Price Estimate</a>

Demo: https://shots.jotform.com/elton/testing_lightbox_demo963656.html

n/a

n/a

Could you try changing the value of openOnLoad to false in the embed script?

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

var parentWidth = window.innerWidth;

if(window.innerWidth <= 600) {parentWidth = window.innerWidth-40;} else {parentWidth =  700;}

      var JFL_62756794322161 = new JotformFeedback({

        formId: '62756794322161',

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

        windowTitle: 'FREE QUOTE FORM',

        background: '#FFA500',

        fontColor: '#FFFFFF',

        type: 'false',

        height: 500,

        width: parentWidth,

        openOnLoad: false

      });

</script>

<button class="lightbox-62756794322161">Open Lightbox</button>

The buttons can be styled using CSS as per your requirement. Please take a look at the following web page that might help you in styling the buttons.

http://www.tyssendesign.com.au/articles/css/styling-form-buttons/

Hope this information helps! Let us know if you need any further assistance. We will be happy to assist. 

n/a

You are correct that changing the OpenOnLoad to false will disable it from popping upon loading. I checked the code on your button and it looks like it has duplicate sets of quotation marks, which may be why the button isn't working.

Please update the button code on your website and make sure that there is only one set of quotation marks for the class.

<button class="lightbox-62756794322161">Open Lightbox</button>

If the issue still persists, please let us know.
Regards.

@JeronMusic

I was able to reproduce the problem you've reported when openonLoad is true. The button should still trigger the lightbox form when clicked which is currently not working. I have opened a bug ticket about this here https://www.jotform.com/answers/964920. We'll let you know via this thread once this is resolved.

If you like, you might want to switch to the prototype lightbox version in which openonLoad and lightbox button are both working. To do that, just remove the number 2 after the feedback found on the first line of your lightbox embed code.

Example:

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

Remove the number 2 (in red color)

---------------------

With regards to styling the lightbox button, that's pretty easy using CSS codes. You can append the following below your lightbox embed code, this should style the lightbox button a bit.

<style>

  .lightbox-62756794322161{

    background:#fff;

    border:1px solid #ccc;

    border-radius:10px;

    box-shadow:inset 0 0 4px #ccc;

    padding:10px;

    cursor:pointer;

    outline:none;

  }

</style>

Result:

Let us know if you have any other questions.