-
rpete40819Asked on March 24, 2017 at 2: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
-
CharlieReplied on March 24, 2017 at 4: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.
-
rpete40819Replied on March 24, 2017 at 2:23 PM
Thank you, Charlie. It works! I really appreciate the help.
Rod