Lightbox embed code not working using class name btn-primary

  • Profile Image
    rpete40819
    Asked 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
    Charlie
    Answered 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
    rpete40819
    Answered on March 24, 2017 at 02:23 PM

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

    Rod