How can I change the aspect of the lightbox form button on squarespace?

Hi,

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

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.

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.

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.

Now it works perfectly. Thanks

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

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

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.