CF7 form field color

Support
#1

HI, I’ve got a CF7 form that also using their Design Grid tools to customize the form. The form fields are picking up the background color from the Integrity Dark theme. This makes it impossible to see what you are typing into the field. I need it to be transparent, not black. I’ve tried picking up the CSS to change using Chrome’s developer tools, but it’s not changing. Any chance you can help?

#2

Hi @isdg01,

Thanks for reaching out.

The form styling you’re seeing is controlled by the theme’s default CSS. If you’d like to override it, you can add the following custom CSS to either Global CSS or the Page CSS for the Contact page:

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  background-color: transparent !important;
}

Please note that this code should work as-is, provided it does not conflict with any existing styles on your site.

Also, keep in mind that the code above is offered as a general guideline to help you get started with custom CSS when no built-in option is available in the theme or bundled products. We’re unable to provide support for custom code, which means we can’t troubleshoot conflicts or extend this functionality further.

For more advanced customization, we recommend working with a third-party developer or checking out One, where we’re able to assist with questions beyond the scope of standard theme support.

Thanks!

#3

Worked like a charm! Thank you so much :slight_smile:

#4

Actually, I spoke too soon. It worked like a charm in Cornerstone but it’s still black on the front end. I have no caching plugins loaded on the site and have cleared my browser cache. It’s showing the same in both FF and Chrome. Have also checked it on multiple computers. Any ideas?

Footer menu link color
#5

Hey @isdg01,

The custom CSS code did not work because you have a broken CSS code found in the Global CSS:
image

The correct code should be:

/* left align dropdown sub-menus*/
.masthead-inline .x-navbar .desktop .sub-menu {
    left: 0;
    right: auto;
    margin-left: 0px;
}

I went ahead and change it to the correct code. Kindly check the contact page now.