How to Change the Color of the Save button

Where does the Save button come from and how do I change its colour?

Hi Colin,

I'll need a bit of time to look into this. I'll get back to you as soon as I can.

Thanks for your patience, we appreciate it.

Hi Colin,

Changing the color of the Submit button is really easy. There are two ways to do it. Let me first walk you through it in Form Builder:

1. Open your form in Form Builder, and click on the Submit button to select it.
2. Click on the Gear icon on the right side of the Submit button. 
3. Under the General tab, click on Change Button Style and select any of the ready-made styles. 

The second one is injecting a CSS code to your form. Let me show you how:

1. First, copy this code:

.submit-button {

   background-color: #000000;

   border-color:#c2ff7c;

   color: #c2ff7c;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

You can change the background color, border color, and text color by customizing the CSS code with your own hex code.

Give it a try and let us know how it goes.

I meant the Save button, not Submit. It shows up white in the page break below.

Hi Colin,

You can use CSS code to change the color of the Save button on your form. Let me show you how to do it:

1. Copy the CSS code below:

/*Changing the color of the Save button*/

.form-submit-button {

  background: #2639aa !important;

  color: white !important;

}

/*Ends here*/

2. In Form Builder, click on the Paint Roller icon on the upper right side of the page.

3. Click on the Styles tab on the upper right side of the page.
4. In Inject Custom CSS on the right side of the page, paste the CSS code that I've provided.

You can also clone my demo form as a reference. After that, can you check your Save button to see if it was changed?

Once we hear back from you, we'll be able to help you with this.

Hi I've pasted the code in and there has been no effect sorry.

Hi Colin,

When I checked your form, the Save button already appeared in blue, matching the other Save buttons. But if you're still encountering inconsistencies, you can try using the custom CSS below to ensure all your Save buttons display the same color consistently:

.form-pagebreak-save-container .form-sacl-button.js-new-sacl-button {

  background-color: #2639aa !important; /* deep blue */

  color: #ffffff !important;           /* white text */

Here's the sample result:

Let us know if you need any more help.

Seems to be fixed now, thank you.