How to change the back and next button colors

Hi-

I went into the advance designer and tried to make sure each Back/Next button had the same color #ec9947 but now almost all the button are different colors.

Please adivse.

https://form.jotform.com/251205626594155

Hi Michael,

Thanks for reaching out to Jotform Support. If I understan, when having a look to your form, it seems that you already tried to set some CSS code, which has a mistake underlined below:

You just need to change it to the following code:

#form-pagebreak-back_49, #form-pagebreak-back_52, #form-pagebreak-back_46, #form-pagebreak-back_99 {

    background-color: #ec9947

}

As a result, we get the same color on each page:

Give it a try and let us know how it's going.

That seems simple enough, but i put that new code in and it doesn't update the "next" on the second page or the "back" on the third page.

Please advise, as I am very limited in the knowledge of updating the CSS codes.

I simply have clicked on the corresponding boxes and or sections and chosen "color" and changed things manually this way.

I am not sure if/how to input the code correctly to over write any existing code; I think this is where the problem lays.

Hi Michael,

I checked your form, one next and back button color was not updated. You can try adding this CSS code to fix it. Let me show you how:

1). First, copy this code:

#form-pagebreak-next_99,#form-pagebreak-back_26{
    background-color: #ec9947;
}

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.

Check out this screenshot of my result:

Give it a try and let us know if this works for you.

Yeah- im still not able to understand where to remove bad code and how to add it in. Can you just make all the buttons the same color #ec9947?

Hi Michael,

You can set the color for the buttons by deleting the existing code in your form styles settings. Take a look at the screenshot below:Once done, Inject the CSS Code below:

#form-pagebreak-back_49, #form-pagebreak-back_52, #form-pagebreak-back_46 {

  background : #ec9947 !important;

  color: #ec9947 !important;

}

#form-pagebreak-next_99,#form-pagebreak-back_26, #form-pagebreak-back_99{

 background-color: #ec9947 !important; 

}

Take a look at the screencast of the result below: Give it a try and let us know how it goes.

I did what you said- and still no success as you show.

Hi Michael,

Upon checking, the codes in your form is not working because it has a missing bracket '}'. Take a look at the screenshot below:Let me show you how:

1. Click on the Paint Roller icon on the upper right side of the panel to open the Form Designer Menu.
2. Go to the Styles tab, scroll down to the Inject Custom CSS input box and add a space at the end of the this code: .form-submit-button-simple_grey.form-pagebreak-back, .form-submit-button-simple_grey.form-pagebreak-next, .form-submit-button-simple_grey.submit-button {background-color : #eb9846;
3. Then, add the Closing Bracket '}' in the space you created.

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

That worked. Thank you