Lightbox: How to format button on Squarespace

  • Profile Image
    email@jamesselby.com
    Asked on December 15, 2017 at 09: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?

  • Profile Image
    aubreybourke
    Answered 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.

  • Profile Image
    aubreybourke
    Answered 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

  • Profile Image
    Richie_P
    Answered on January 03, 2018 at 08: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.


  • Profile Image
    jamesselby
    Answered on January 03, 2018 at 09: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!