What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I put a lightbox form onto a button on squarespace?

    Asked by simonyou on November 16, 2016 at 01:56 AM

    Hi,

    I'm having trouble putting my lightbox form onto a button in squarespace. I could just simply "insert code" on squarespace, but this means my form would just open up when the website opens up. Is there a way to make the Jotform open up only when someone presses a button first?

    I guess the question is, how can I create a button on squarespace that could fit this code below?

    (I attached a screenshot on my website, and the "apply" button is the one I want to replicate and put the jotform in.)

     

    This is the lightbox code from JotForm:

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

     

    Thank you!

    Simon

    Screenshot
  • Profile Image
    JotForm Support

    Answered by EltonCris on November 16, 2016 at 03:18 AM

    Just insert the lightbox class e.g. in your code it is lightbox-6319426971616 into your existing button under class attribute.

    Example:

    <button class="lightbox-6319426971616">My Button</button>

    Hope this helps!

  • Profile Image

    Answered by simonyou on November 16, 2016 at 02:12 PM

    Sorry, I'm kind of new at this. So using squarespace's template, there is no code present for buttons, so I would have to create a new button, then link the jotform lightbox to the button. 

    The apply button you see on the screenshot is just a regular squarespace button that links to another page; i can't edit it. Would you know how I can write a new code to create a button with the jotform inside? 

    Thank you!

  • Profile Image
    JotForm Support

    Answered by Kiran on November 16, 2016 at 03:50 PM

    You may try editing the page content and add the code widget on your SquareSpace web page.


    Then you can add the light-box embed script to the widget by choosing HTML.

    The form should be displayed in the light-box now when the button is clicked on your web page. Hope this information helps! 

    Let us know if you need any further assistance. We will be happy to assist.  

     

  • Profile Image

    Answered by simonyou on November 18, 2016 at 12:05 AM

    It works! Thanks Kiran.

    Just a quick followup question. If I wanted to edit how this button looks with custom CSS, it would just be 

    button {}

    right? And this would only edit this specific button, not the other default squarespace buttons right?

  • Profile Image
    JotForm Support

    Answered by seth on November 18, 2016 at 01:25 AM

    Hello,

    You need to find that buttons ID or you can use that buttons class to apply style to it. You can achive this by right clicking on the button and then selecting Inspect. You will see a window like this:

    You can see from the image that your button is already selected. We can use the button's class to apply CSS to it. You can use this class 'sqs-editable-button' to write your Css. However this style could be overwritten by other CSS code so you need to inspect and try this on your web site.

    You can call this class like this:

    .sqs-editable-button{

    property: value;

    }

    Give it a try! If it does not work, you need to contact your web page service support. This issue does not belng to JotForm.

    I hope this helps. Please don't hesitate to contact us about issues of JotForm.

    Cheers.