Form Password Protected Page: Change background and button color

My form can be found here https://form.jotform.com/241285088791163. It has a password protection on it. Is there a way to customize this password area? I'd like to change the black background to another color and also the green button to another color. Thank you.

Hello HanaBB,

To customize the password area and change the background color as well as the button color on your form, you will need to access the CSS of your form. Here are the general steps to achieve this:

1. Access Form Styles: Log in to your JotForm account and go to the form builder where you can edit your form.
2. Access Custom CSS: Look for the option to edit the CSS or inject custom CSS into your form. You can find it by clicking on Form Designer>Styles and scrolling to the end of the page.
3. Apply Custom Styling: Once you have access to the CSS editor, you can apply custom styles to the password area and button. Here's an example of CSS code to change the background color of the password area and the color of the button:

/* Change background color of password area */

.form-all input[type="password"] {

  background-color: #your_desired_color;

}

/* Change button color */

.form-submit-button {

  background-color: #your_desired_color;

  color: #your_desired_text_color;

}

Replace `#your_desired_color` with the hexadecimal or RGB value of the color you want for the background and button. Also, replace `#your_desired_text_color` with the color you want for the text on the button to ensure readability. Give it a try and let us know if you need any help.

I have added the below custom CSS to my form, but it didn't work. The black background on the password page is still black and the button is still green.

 .form-all input[type="password"] {

 background-color: #E4F2F7;

}

.form-submit-button {

 background-color: #434343;

 color: #FFFFFF;

}

Hello HanaBB,

It seems like there might be a specificity issue with your CSS code, causing it not to override the default styles. Let's adjust the CSS code slightly to ensure it targets the correct elements effectively:

/* Change background color of password area */

input[type="password"] {

  background-color: #E4F2F7 !important;

}

/* Change button color */

.form-submit-button {

  background-color: #434343 !important;

  color: #FFFFFF !important;

}

The `!important` rule ensures that the styles you define will take precedence over any other conflicting styles. Try applying this modified CSS code to your form, save the changes, and then preview your form to see if the background color of the password area and button color are updated as expected.

I've changed the CSS to the above, but it's still showing black background and green button

Hi HanaBB,

I'm very sorry to hear that. I understand the issue, but I'll need a bit of time to look into this. I will be back shortly.

Hi HanaBB,

Thanks for patiently waiting. After some tests, it looks like it's not possible to inject custom CSS Code to the Password-Protected Page. It only works on the form's main page. I've gone ahead and escalated your request to our developers, but when or if it's developed depends on their workload, how viable it is, and how many other users also request it. If there are any updates, we’ll circle back to this thread and let you know.

Thanks for your patience and understanding, we appreciate it.