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 change the aspect of the lightbox form button on squarespace?

    Asked by segesit on November 18, 2016 at 08:55 AM

    Hi,

    I'm having trouble with my lightbox form embed on squarespace. I can't figure out how to change the button's aspect.

     

    lightbox form squarespace form button how
  • Profile Image
    JotForm Support

    Answered by Chriistian on November 18, 2016 at 09:01 AM

    Hi there,

    If you can give us the link to the page where you embedded the form, we will be happy to assist. We will wait for your response.

    Regards.

  • Profile Image

    Answered by segesit on November 18, 2016 at 09:09 AM
  • Profile Image
    JotForm Support

    Answered by Chriistian on November 18, 2016 at 09:32 AM

    Hi there,

    Please try adding the CSS to the code you embedded.

     <script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript"> new JotformFeedback({ formId: "63223120956955", buttonText: "Clone of MOBIL_TIMEREGISTRERING_", base: "https://form.jotform.com/", background: "#F59202", fontColor: "#FFFFFF", buttonSide: "left", buttonAlign: "center", type: false, width: 700, height: 500 }); </script>

     

    <style>

    button#yui_3_17_2_1_1479478274688_461 {

    background-color: #FFF;

       color: #004238;

       border: 2px solid #004238;

       border-radius: 3px;

       width: auto;

       height: auto;

       padding: 0.75em 2.5em;

       text-transform: uppercase;

    }

     

    div#yui_3_17_2_1_1479478274688_462 {

    text-align: center;

    }

    </style>

     

    The result should be as follows.

    Let us know if you need further assistance.

  • Profile Image

    Answered by segesit on November 18, 2016 at 10:09 AM

    Sorry, maybe it's my fault but it doesn't work. I put your code below mine but it didn't change anything.

    This is my HTML code:
    <script src="https://form.jotformeu.com/static/feedback2.js?3.3.REV" type="text/javascript"> var JFL_63112704816349 = new JotformFeedback({ formId: '63112704816349', base: 'https://form.jotformeu.com/', windowTitle: 'Invia la tua candidatura', background: '#0a3b37', fontColor: '#FFFFFF', type: 'false', height: 500, width: 700, openOnLoad: false }); </script> <button class=" lightbox-63112704816349" style="margin-top: 16px"> Invia la tua candidatura </button>

    If i add your code: <style>

    button#yui_3_17_2_1_1479478274688_461 {

    background-color: #FFF;

       color: #004238;

       border: 2px solid #004238;

       border-radius: 3px;

       width: auto;

       height: auto;

       padding: 0.75em 2.5em;

       text-transform: uppercase;

    }

     

    div#yui_3_17_2_1_1479478274688_462 {

    text-align: center;

    }

    </style>

    The aspect doesn't change.

  • Profile Image
    JotForm Support

    Answered by Chriistian on November 18, 2016 at 10:27 AM
    As per checking, it seems the id for the fields on your site is dynamically changing and since I use the id to implement the css design, this might be the reason why the css code was not properly implemented. Can you try to add the following css code on your form and see if this will help?
     
    <style>
    button.lightbox-63112704816349 {
        background-color: #FFF;
        color: #004238;
        border: 2px solid #004238;
        border-radius: 3px;
        width: auto;
        height: auto;
        padding: 0.75em 2.5em;
        text-transform: uppercase;
    }
    .code-block {
        text-align: center;
    }
    </style>

    Do let us know if you need further assistance.
    Regards.

  • Profile Image

    Answered by segesit on November 18, 2016 at 10:38 AM

    Now it works perfectly. Thanks

  • Profile Image
    JotForm Support

    Answered by Chriistian on November 18, 2016 at 10:56 AM

    Glad to hear that the code works now. If you have any other concern, please feel free to contact us again. Regards.

  • Profile Image

    Answered by segesit on November 21, 2016 at 04:03 AM

    Sorry to bother you again. I would like to put this form in the same page more than once, but I've noticed that if I use that code more than once, the form doesn't work anymore. Is there something that I've to change in the code? Thanks in advance

  • Profile Image
    JotForm Support

    Answered by seth on November 21, 2016 at 06:37 AM

    Hello,

    In order to duplicate your buttons, write the script code once:

    <script src="https://form.jotformeu.com/static/feedback2.js?3.3.REV" type="text/javascript"> var JFL_63112704816349 = new JotformFeedback({ formId: '63112704816349', base: 'https://form.jotformeu.com/', windowTitle: 'Invia la tua candidatura', background: '#0a3b37  ', fontColor: '#FFFFFF  ', type: 'false', height: 500, width: 700, openOnLoad: false }); </script> 

     

    Then duplicate your buttons:

     

    <div align= "center";>

            <button class="lightbox-63112704816349" style="margin-top: 16px;"> Invia la tua candidatura </button> <br></br>

     </div>

     

    Here is what I ended up while building your web site from scratch:

    Here is the code:

    You need to be careful not to use your script twice on your page. Also make sure you used your styling. Here is the formal usage of multiple light boxes on a page:

    <script src="//www.jotform.com/min/g=feedback" type="text/javascript">

            new JotformFeedback({

            formId:'1111111',

            base:'http://www.jotform.com/',

            windowTitle:'Untitled Form',

            background:'#FFA500',

            fontColor:'#FFFFFF',

            type:false,

            height:500,

            width:700

            });

            </script>

            <a class="lightbox-1111111" style="cursor:pointer;color:blue;text-decoration:underline;">Untitled Form 1</a>

            <a class="lightbox-1111111" style="cursor:pointer;color:blue;text-decoration:underline;">Untitled Form 2</a>

            <a class="lightbox-1111111" style="cursor:pointer;color:blue;text-decoration:underline;">Untitled Form 3</a>

     

    I hope this answer helps. If you have any further queries please contact us again.

    Regards.