What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by JeronMusic on October 18, 2016 at 12:27 AM

    Hello,

    (1) The Lightbox works fine on desktop, however, it's not viewed well on mobile; it goes past the margins and cuts off.  Link included below.

     

    (2) Once that is resolved, I'd like to trigger the pop-up of the LightBox in various ways 'other' than just a text hyperlink. Preferably with the use of a (a) clickable customized button; (b) after a user enters preliminary text into a field; and/or (c) clicks an image that is linked to triggering the pop-up.  

     

    Please advise.  Thanks.

    Page URL:
    http://www.jeronmusic.com/getfreequote.html

    Screenshot
  • Profile Image
    JotForm Support

    Answered by EltonCris on October 18, 2016 at 02:22 AM

    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.

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 18, 2016 at 02:34 AM

    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

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 18, 2016 at 02:38 AM

    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

  • Profile Image

    Answered by JeronMusic on October 18, 2016 at 06:42 PM

    Please provide sample script for styling the button class.

  • Profile Image

    Answered by JeronMusic on October 18, 2016 at 07:07 PM

    Also - the button class you provided isn't working: <button class="lightbox-62756794322161">Open Lightbox</button>

     

    Please provide a working script with the button class integration; and one with the image class integrated.

     

    Thanks,

  • Profile Image
    JotForm Support

    Answered by Kiran on October 18, 2016 at 11:56 PM

    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. 

     

  • Profile Image

    Answered by JeronMusic on October 19, 2016 at 12:54 AM

    You didn't address the core of my question.  Changing it to FALSE will obviously disable it from popping-up upon loading.

     

    What I'm asking: I don't mind if it pop-ups upon loading, BUT if I close it, THEN, i want to re-trigger it to open again -- and right now, it doesn't do so.  See that page again.  www.jeronmusic.com/pricing

  • Profile Image
    JotForm Support

    Answered by Chriistian on October 19, 2016 at 01:54 AM

    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.

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 19, 2016 at 04:06 AM

    @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.