Lightbox: How to format button on Squarespace

  • email@jamesselby.com
    Asked on December 15, 2017 at 9:32 AM

    I've been hunting for a form solution that can tell me the source of the enquiry (PPC for example) and the referrer widget seems to work a treat. 

    I want to use the form code though within a Lightbox but I use Squarespace. If you use the code Jotform outputs for a Lightbox, it works but the button has no formatting.

    I've tried to fix and followed other threads on here but can't seem to get it working.

    Has anyone managed it?

  • aubreybourke
    Replied on December 15, 2017 at 11:03 AM

    You can style the button with CSS code.

    For example:

    <!DOCTYPE html>

    <html>

    <body>

    <script src ="https://form.jotform.com/static/feedback2.js" type="text/javascript"></script><script type="text/javascript">

            var JFL_73484644446970 = new JotformFeedback({

              formId: '73484644446970',

              base: 'https://form.jotform.com/',

              windowTitle: 'Lightbox test',

              background: '#FFA500',

              fontColor: '#FFFFFF',

              type: 'false',

              height: 500,

              width: 700,

              openOnLoad: false

            });

        </script>

          <a class="btn lightbox-73484644446970" style="padding: 5px; background-color:lightgray; color:black; border: 1px solid black; margin-top: 16px;">

            Lightbox test

          </a>

    </body>

    </html>

    Here we set the padding inside the button to five pixels on each side.

    The background color of the button to lightgray.

    The color of the text to black.

    The border width to be one pixel and black.

    Then the space above the button to sixteen pixels.

  • jamesselby
    Replied on December 15, 2017 at 11:10 AM

    The code Jotform provides for a Lightbox is this:

    <script src ="https://form.jotform.co/static/feedback2.js" type="text/javascript"></script><script type="text/javascript"> var JFL_73482934027864 = new JotformFeedback({ formId: '73482934027864', base: 'https://form.jotform.co/', windowTitle: 'Request a call back', background: '#b91d1d', fontColor: '#FFFFFF', type: '0', height: 500, width: 700, openOnLoad: 0 }); </script>

  • aubreybourke
    Replied on December 15, 2017 at 12:13 PM

    No, that's not the code for the lightbox. 

    Please follow this guide:

    How-to-Create-a-Lightbox-Form

  • jamesselby
    Replied on January 3, 2018 at 6:36 AM

    This is the code JotForm provides when I click Embed as per that link:

    <script src ="https://form.jotform.co/static/feedback2.js" type="text/javascript"></script><script type="text/javascript"> var JFL_73482934027864 = new JotformFeedback({ formId: '73482934027864', base: 'https://form.jotform.co/', windowTitle: 'Request a call back', background: '#b91d1d', fontColor: '#FFFFFF', type: '0', height: 500, width: 700, openOnLoad: false }); </script> <a class="btn lightbox-73482934027864" style="margin-top: 16px"> Request a call back. </a>


    The form works but the button isn't styled so I'm guessing I need to add something to the CSS injection. Do I need to simply add the CSS above but change the formID to my ID?


  • Richie JotForm Support
    Replied on January 3, 2018 at 8:08 AM

    You can add the css code given by colleague and place it directly into your html code.

    Just replace your btn class with inline css,

    <a class="btn lightbox-73482934027864" style="padding: 5px; background-color:lightgray; color:black; border: 1px solid black; margin-top: 16px;">

    Let us know how it goes.


  • jamesselby
    Replied on January 3, 2018 at 9:33 AM

    Thanks I got it working unfortunately the referrer functionality isn't good enough on JotForm so looks like I'm back to square one. I never thought it would be so difficult to track PPC enquiries as it is!