Adding lightbox link to my own button on wordpress

  • amirk647
    Asked on March 7, 2018 at 4:32 PM

    Hi there, I would like to add my own lightbox link to my own bustom button or link in wordpress, how can I achieve this?

  • Elton Support Team Lead
    Replied on March 7, 2018 at 4:53 PM

    Embed the lightbox code in your Wordpress site then use the class selector found in the lightbox code in your custom buttons to trigger the lightbox.

    Example:

    This is the lightbox embed code. Just copy the highlighted class selector and use it in your custom buttons to trigger the lightbox. You can also get rid of the a tag if you prefer

    <script src ="https://form.jotform.com/static/feedback2.js" type="text/javascript"></script><script type="text/javascript"> var JFL_80598300593966 = new JotformFeedback({ formId: '80598300593966', base: 'https://form.jotform.com/', windowTitle: 'Heading', background: '#FFA500', fontColor: '#FFFFFF', type: 'false', height: 500, width: 700, openOnLoad: false }); </script> <a class="btn lightbox-80598300593966" style="margin-top: 16px"> Heading </a>

  • amirk647
    Replied on March 7, 2018 at 5:43 PM
    IM a little confused as to how to achieve this as the button will require a URL. May you please guide me with this?
    Amir K
    amirk647@gmail.com
    ...
  • Kevin Support Team Lead
    Replied on March 7, 2018 at 6:53 PM

    You may use this "#" as link as the ligthbox embed method does not work with URLs, then you may add the class "lightbox-80598300593966" (or find it from the code you get from your form) to the button on your WordPress page, you may add the "class" attribute if it's not present or simply search it and add the JotForm class to the existing ones on the button. 


  • amirk647
    Replied on March 7, 2018 at 7:43 PM
    Hi,
    What do you mean by I amy use the “#” as a link as the lightbox embed method? What do I enter in the button’s URL field, as the link to the button?
    Amir K
    amirk647@gmail.com
    ...
  • Elton Support Team Lead
    Replied on March 7, 2018 at 7:53 PM

    You don't need a link to call the embedded lightbox, just its class selector.

    Example, if your button code is:

    <a href="#">My Button Text</a>

    it becomes:

    <a href="#" class="lightbox-80598300593966">My Button Text</a>

    If your button has an existing class, just add the class value separated by a comma.

    Example:

    <a href="#" class="myotherclass lightbox-80598300593966">My Button Text</a>

    I'd suggest you embed first the lightbox embed code on your website so you will understand how the included button on the lightbox embed code works.