Adding lightbox link to my own button on wordpress

  • Profile Image
    amirk647
    Asked on March 07, 2018 at 04: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?

  • Profile Image
    EltonCris
    Answered on March 07, 2018 at 04: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>

  • Profile Image
    amirk647
    Answered on March 07, 2018 at 05: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
    ...
  • Profile Image
    Kevin_G
    Answered on March 07, 2018 at 06: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. 


  • Profile Image
    amirk647
    Answered on March 07, 2018 at 07: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
    ...
  • Profile Image
    EltonCris
    Answered on March 07, 2018 at 07:53 PM

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

    Example, if your button code is:

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

    it becomes:

    <a target="_blank" 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 target="_blank" 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.