Change font color for CF7 Forms

Support
#1

Hi,

I have built a site using the Automotive Demo Template. The contact form is the default form. I’m using a lot of white text since the backgrounds are darker. Unfortunately, that means that my forms are trying to fill with white text on a white background. I have added the following code to the Customizer CSS, which came from the Contact Form 7 Styling Guide, but it doesn’t seem to change the font color…

.wpcf7 input[type=“text”],
.wpcf7 input[type=“email”],
.wpcf7 textarea
{
background-color: #fff;
color: #000;
}

What am I doing wrong? How can I make the text viewable in the forms?

Thanks,
Dawn

#2

Hello @isdg01,

Thanks for asking. :slight_smile:

On my end it’s working fine. Please see screenshot. Suggest you to please clear browser cache and then try again.

Thanks.

#3

Weird… I am on a different computer this morning. Have cleared cache. It seems to work in Chrome, but not FF or IE. My Creative CTA is not showing up today on any browser either. The link works, but it is just showing as a black box with no message or hover effect… Sorry for adding a second topic, but it’s all the same site.

#4

Hello There,

Thanks for writing in! Since you have installed a caching plugin WP Super Cache, please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

And also please clear your browser’s cache or use private browsing mode and test your site again.

Please let us know how it goes.

#5

I have disabled the Caching plugin, cleared my browsers, and reinstalled CF7. Something is definitely wrong…

For my Contact 7 Forms, in Firefox, I still cannot see any text typed into the Form fields. In IE, the form resizes as soon as I put my cursor into the form field and then it won’t even act like it is typing anything into the form fields. I can’t see any text and my cursor doesn’t move. it seems to be working fine in Chrome and Safari, but not IE and FF. My forms tests are coming through on email, I just can’t see what I am typing in…

For my Creative CTA, I can see them fine from Cornerstone, but they are not showing up on the live site. They appear as a black bar across the bottom of my pages. This seems to have just started late last week as I didn’t see any issues in my testing before then. It is showing in Safari, but does not show up in Chrome, IE or FF.

The client is ready to take the site live asap. Please help!
Dawn

#6

Regarding the text field, it’s because of the padding in this custom CSS of yours

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: #fff;
    padding: 20px 10px;
    border: none;
}

Please remove it and give us a screenshot of your CTA button but please try removing custom CSS first.

Thanks.

#7

Hi,

The custom CSS mentioned above came with the theme demo. That said, removing it did help with the form text across all browsers. The form is still resizing in IE. I am including 2 screenshots of the form on load and the form after a cursor is placed for typing.

I also found the following CSS for the CTA, which came with the theme demo.

/*
// Custom CTA.
*/

.custom-cta {
max-width: 600px;
margin: 0 auto;
border: 0;
color: #fff;
background-color: rgba(9, 49, 109, 1);
box-shadow: none;
}

.custom-cta:before {
border: inherit;
background-color: inherit;
box-shadow: inherit;
}

I have removed it but the CTA is still showing as a black box across all browsers. Screenshots are attached.

I appreciate your help with these issues,
Dawn

I

#8

Your form doesn’t resize on my end. Please clear your browser cache.

I don’t see a black bar in your home page. Please give us the exact URL where this is happening.

Thanks.

#9

Hi,
I took the site live yesterday but login is still the same. I have cleared cache both in WordPress and in all of my browsers. The black bar in place of the CTA is on all of the Product pages…here’s a link to review.


The CTA seems to be working now in IE and Chrome but still acting up in Firefox.
I’m happy to hear that the form in IE is working perfectly for you. It is still resizing on this side. Weird…

#10

Hi There,

Your CTA works well on firefox on my end, please see image below.

If you cleared your broweser cache, can you try in a different FF installation as it might be isolated to your browser?

Thanks!