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

    How to open the Lightbox form with a custom button?

    Asked by happybicycle on July 05, 2016 at 12:22 PM

    Please check the url page.

    I'm trying to have a button that shows a lightbox form, the first one you see is a common button from wordpress, but don't know how to set it to open my jotform.

    The second button is the one I included following Jotform instructions from other support
    (https://www.jotform.com/answers/295127-how-i-can-create-a-lightbox-form-with-a-button-instead-of-text-to-open)

    But isn't working for me, nothing happens when we click the button.

    I'm sending my code in an attached image.

    Thank you

    Page URL:
    http://www.happybicycle.pt/produto/bicicleta-mala-bolsa-city-bag-basho<br/>/

    can't a can lightbox form JotForm uploads check
  • Profile Image
    JotForm Support

    Answered by Kevin_G on July 05, 2016 at 02:49 PM

    I have checked your code and indeed only the text is working, both the first and the second button you've added are not working.

    I have tested this on my end and I can get it working fine, here are the steps I followed.

    First I copied the code as it is given by the publish wizard, so I got this code: 

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

          var JFL_50943465814662 = new JotformFeedback({

            formId: '50943465814662',

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

            windowTitle: 'Subastar.com.ar',

            background: '#FFA500',

            fontColor: '#FFFFFF',

            type: 'false',

            height: 500,

            width: 700,

            openOnLoad: false

          });

        </script>

          <a class="btn lightbox-50943465814662" style="margin-top: 16px">

            Subastar.com.ar

          </a>

    Then I copied the first form from your webpage with its style and added it into the same page where I pasted the Lightbox form code, this is the code for your button: 

    <a class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-flat vc_btn3-icon-left vc_btn3-color-black" target="_blank" href="#" title="" ><i class="vc_btn3-icon fa fa-pencil"></i> INQUIRY FORM</a>

    Now if you want to use a custom button to show the Lightbox form then you only need to copy this class "lightbox-50943465814662" and add it to the custom button, so your button should look like this: 

    <a class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-flat vc_btn3-icon-left vc_btn3-color-black lightbox-50943465814662" target="_blank" href="#" title="" ><i class="vc_btn3-icon fa fa-pencil"></i> INQUIRY FORM</a>

    Do note that this is the only change I made in the code, only added the class and it worked.

    You can see my embedded form working on this link: CLICK HERE.

    If you have access to the code for the button that you've added from Wordpress then you can simply add this class, if you want to use your custom code, please do the same and if it still does not work you may provide us the source code for your button, we will be glad to help you to get it working. 

    Please do let us know how it goes.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on July 05, 2016 at 03:05 PM

    I have also found that there are some errors in the web console, this will not allow the form to work properly: 

    I have also found that the code looks different, also the ID set in the JavaScript code is not the same like the ID in the <a> tag, ensure it is the same ID to get it working:

    So I would suggest you to get the code again and make sure it is being properly embedded, once you embedded the form make sure you're using the correct form ID in the HTML <a> tag, it should be this one 50943465814662.

    I have fixed it and it works fine, this should be the button's code fixed: 

    <a class="lightbox-50943465814662" style="cursor:pointer">

    <p><input id="form_button" type="button" value="Inquiry Form" class="btn"></p>

    </a> 

    With the corrected ID works, please test it and let us know if you have questions. 

  • Profile Image

    Answered by happybicycle on July 06, 2016 at 10:16 AM

    Thanks for your help,
    but it didn't work!

    When I thought I've got it working, I looked bellow, and the rest of the content was messed up, the pictures and the tabs are not working properly.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on July 06, 2016 at 10:42 AM

    I have checked your webpage and I can see the code is fine now, in fact the form is working now, see what I got when tested the button: 

    Seems like you were able to resolve the issue; however, if you still need more help, please let us know, we will be glad to further assist you. 

  • Profile Image

    Answered by happybicycle on July 07, 2016 at 05:17 AM

    Hi Kevin,

    No, is not working properly, because something in the code must have messed up the rest of the page.

    if you look bellow in the page, the grey boxes are pictures that are not showing, and the tabs are also wrong :-/

     

  • Profile Image
    JotForm Support

    Answered by Kevin_G on July 07, 2016 at 08:59 AM

    Yes, I can see the same on my end; however, I have checked the web console and I can see there are some conflicts , please see my screenshot: 

    So if there is something in the code that messed up your website, I would suggest you to remove it, check the web console and find if the errors are still there, please fix the JavaScript errors shown in the web console and then try re-embedding the form using the code given in the wizard. 

    After we've checked that all is working fine we should change the button that triggers the Lightbox form.

    These keyboard shortcuts will help you to get the console if you're using Google Chrome:

    Mac: Command + Option + J

    Windows: Control + Shift + J