Change the colour and shape of the button

Hi, is there a way to change the colour and shape (ie. rounded corners) of the button? Tried adjusting CSS but can't seem to get it right. I would like the button to be rgba(65,117,5,100) with the corner radius at 12px. Also, is it possible to have more than one pop up on the same form? Any help will be appreciated, thanks.

Hi Reanda,

Thanks for reaching out to Jotform Support. Yes, colour and shape can be changed for the "Submit" button. Can you share us your form so that we can see if we can replicate the issue?

Once we have a better idea of what’s going on, we’ll be able to come up with a solution.

Hi Reanda,

I saw your question here and wanted to help you as a fellow user. I understand that you are trying to change the color and shape of the buttons. You also want to know if it is possible to have more than one popup on the same form.

Change the color and shape of a button.

Can you share the link to the form so we can check the button that you want to customize? Assuming that you have added a submit button to a form with the default theme, you can customize it with the help of CSS code. Let me show you how:

1. In the Form Builder, click on the Paint Roller icon at the top right corner.
2. Click on the Styles tab.
3. Scroll down to the Inject Custom CSS section and paste the CSS code given below:

/* Submit button CSS*/

.submit-button {

  background-color: rgb(65 117 5);

  border-color: rgb(65 117 5);

  color: #fff;

  border-radius: 12px;

}



/* Save button*/

.form-sacl-button {

  background-color: rgb(65 117 5);

  border-color: rgb(65 117 5);

  color: #fff;

  border-radius: 12px;

}



/* Print button*/

.form-submit-print {

  background-color: rgb(65 117 5);

  border-color: rgb(65 117 5);

  color: #fff;

  border-radius: 12px;

}

To apply the same CSS to all buttons on the form, paste the CSS code given below:

/* All buttons on form*/

.jf-form-buttons {

  background-color: rgb(65 117 5);

  border-color: rgb(65 117 5);

  color: #fff;

  border-radius: 12px;

}

That's it. This CSS will change the color and shape of the submit, print, and save buttons, or all buttons on the form.

Here's a demonstration form that you can test.

Add more than one popup on the same form.

Yes, it is possible to have more than one popup modal window on the same form. Check out this guide to add paragraph fields, HTML code, and CSS code to your form. Assuming that you have added one paragraph field for a modal popup, adding more than one is easy. Let me show you how:

1. In the Form Builder, click on the Add Form Element menu on the left side of the page.
2. Click the Basic tab, and then click on Paragraph.
3. Click on Edit Text and then on >_ to open the source code editor.
4. Paste the HTML code given below and click save.

<p><a class="button" href="#openModal_2" rel="nofollow">Click Here!</a></p>

<div id="openModal_2" class="modalBox">

<div>

<p><a class="close" title="Close" href="#closeModal" rel="nofollow">X</a></p>

<h2>Hey there!</h2>

<p>Here's a modal window.</p>

<p>You can customize this with your own message.</p>

</div>

</div>

I modified the id property of the div from openModal to openModal_2 and the href attribute from #openModal to #openModal_2. Modify the rest of the texts as needed to show in the modal popup.

That's it. This will add another modal popup that will open on clicking the second link button.

Here's a demonstration form for a modal popup that you can test.

Give it a try, and let me know if there's anything else I can help you with.

Hi Reanda,

Please try the solution provided above and let us know if you're still having issues. If you need a user guide on how to inject custom CSS, kindly click here to open the page.

Hi, I was able to figure out the multiple modal pop up, and how to change their colour but I still can't seem to round their corners. I tried the 'round all buttons' suggestion above but it did not affect the modal pop up buttons. The CSS I am using follows the image, with the colour change working and the rounded corners valued at 12px but not showing that way on the form. The form address is:

https://form.jotform.com/AlmaguinAdultLearning/navigating-in-good-hands-food-safet

/* Style for target elements */

.modalBox:target {

   opacity : 1;

   pointer-events : auto;

}

/* Positioning of the child box */

.modalBox>div {

   width : 400px;

   position : relative;

   margin : 10% auto;

   padding : 5px 20px 13px 20px;

   border-radius : 12px;

   background : white;

}

/* Positioning and style of the close button */

.close {

   background : white;

   color : black;

   line-height : 25px;

   position : absolute;

   right : 1px;

   text-align : center;

   top : 1px;

   width : 35px;

   text-decoration : none;

   font-weight : bold;

   -webkit-border-radius : 12px;

   -moz-border-radius : 12px;

   border-radius : 12px;

   -moz-box-shadow : 1px 1px 3px #000;

   -webkit-box-shadow : 1px 1px 3px #000;

   box-shadow : none;

   border : none;

}

/* Style when mouse hovers on the close button */

.close:hover {

   background : black;

   color : white;

}

/* Default style of the open button */

.button {

   background-color : rgba(65,117,5,100);

   border : none;

   color : white;

   padding : 2px 10px;

   text-align : center;

   text-decoration : none;

   display : inline-block;

   font-size : 16px;

   margin : 4px 2px;

   cursor : pointer;

Hi Reanda, 

Thanks for getting back to us. I checked your form and it seems the Close button on the modal has a round corner. Check out the screencast below to see my result:

If you are referring to the buttons on your Paragraph fields, you can make it round by using the CSS code below instead:

/* Default style of the open button */

.button {

  background-color : rgba(65,117,5,100);

  border-radius : 12px;

  color : white;

  padding : 2px 10px;

  text-align : center;

  text-decoration : none;

  display : inline-block;

  font-size : 16px;

  margin : 4px 2px;

  cursor : pointer;

}

Result:

If that’s not exactly what you’re looking for, can you explain a bit more so I can help you better? 

Reach out again if you have any other questions.

Thank you so much! That worked. I didn't know exactly where to insert that border radius line in the CSS. This is great, I really appreciated your time