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 embed code not working using class name btn-primary

    Asked by rpete40819 on March 24, 2017 at 02:43 AM

    Hello,

     

    I am trying to use a button to invoke a lightbox from. I have been able to get the button to be generated but the link for the form does not appear to work.

     

    Here is what I have done:

     

    <a class="btn btn-primary" style="margin-top: 16px">Order</a> <script src="https://form.jotform.us/static/feedback2.js" type="text/javascript"> var JFL_61606396490158 = new JotformFeedback({ formId: '61606396490158', base: 'https://form.jotform.us/', windowTitle: 'Professional Development Workshop Registration Form', background: '#FFA500', fontColor: '#FFFFFF', type: 'false', height: 500, width: 700, openOnLoad: false }); </script>

     

    Any help to get this to work would be appreciated.

     

    Rod

  • Profile Image
    JotForm Support

    Answered by Charlie on March 24, 2017 at 04:58 AM

    Based on your code, you actually removed the class name that would trigger the Lightbox to open, this is your class class="btn btn-primary" for the <a> element. You are missing the correct class name.

    Here's my lightbox embed code by default:

     <script src="https://form.jotformpro.com/static/feedback2.js" type="text/javascript"> var JFL_70822413392957 = new JotformFeedback({ formId: '70822413392957', base: 'https://form.jotformpro.com/', windowTitle: 'Professional Development Workshop Registration Form', background: '#FFA500', fontColor: '#FFFFFF', type: 'false', height: 500, width: 700, openOnLoad: false }); </script> <a class="btn lightbox-70822413392957" style="margin-top: 16px"> Clone of Professional Development Workshop Registration Form </a>

     

    Noticed there's a special class name for the lightbox. I presume you are using Bootstrap and jQuery, please note that there's a possibility of a script conflict if you embed JotForm on a page where other JS libraries are loaded, like jQuery. However, I did try this on my end, here's an example HTML file with jQuery and Bootstrap loaded on it, my Lightbox embed code is also there, but I added the class name btn-primary on my <a> element and it is still working: 

    Edited lightbox embed code:

     <script src="https://form.jotformpro.com/static/feedback2.js" type="text/javascript"> var JFL_70822413392957 = new JotformFeedback({ formId: '70822413392957', base: 'https://form.jotformpro.com/', windowTitle: 'Professional Development Workshop Registration Form', background: '#FFA500', fontColor: '#FFFFFF', type: 'false', height: 500, width: 700, openOnLoad: false }); </script> 

     <a class="btn btn-primary lightbox-70822413392957" style="margin-top: 16px"> Clone of Professional Development Workshop Registration Form </a>

     

    Here's my sample HTML page: https://shots.jotform.com/charlie/lightbox-default.html. You can see the Lightbox is still working. 

  • Profile Image

    Answered by rpete40819 on March 24, 2017 at 02:23 PM

    Thank you, Charlie. It works! I really appreciate the help.

    Rod