Support » Plugin: Contact Form 7 » Change input text font colour

  • For reasons unknown (but possibly a recent update to my Sixhours theme) my Contact Form 7 font has changed from white to black and the background to the boxes has changed from black to dark grey.

    This makes the text from enquirers difficult for them to read when typing.

    I have looked through loads of previous posts but cannot find an answer that fits.

    All I want is high contrast text to show in the boxes preferably white text on black or dark grey.

    Does anyone have a very simple solution please?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Both of the following code segments go in your theme style.css file.

    This will control the formatting of the CF7 itself. Delete or change what you want to meet your requirements.

    .(your form){
        background: #E0E0E0;
        margin: 10px auto;
        margin-left: 0;
        position: relative;
        border: 2px solid #D4F4FF;
        box-shadow: 10px 10px 5px #888888;

    and this will set the color of the labels (you can change the label color to whatever you want).

    label {
    	color: #808080;

    Thanks Dave, but for me this is very complicated.

    Had a look at style.css and cannot see where to put this code at all.

    In addition, the opening line refers to (your form) what does this mean? Do I have to substitute something here? If so, what?

    What also confuses me is the references to ‘labels’ when all I want to do is change the font colour in the name, email, subject and message boxes so that the person writing the message can see what they have written. The titles of the boxes are OK.

    First question: The code goes IN the theme style.css. I usually add to the bottom of the stylesheet. Just so I remember at a later date what the code does, I usually add a comment such as /* added by (your name) on 13 Nov 2012 to blah, blah, blah */ and this at the end /* end of added code */. WHAT you add doesn’t matter, but you must add the comment between /* and */. After you make the change to the stylesheet, click the blue ‘Update file’ button.

    Second question: Yes, you need to substitute something for (your form). We’ll make it simple, use ‘contact-us’. Then, add <div class = "contact-us"> at the top of the form code, and </div> at the very bottom. This lets you add the (possibly) unique formatting to a specific form in the case where you have more than one form. If you have 10 forms, you can uniquely identify each them and therefore format each form however you want.

    Question three: ‘label’ refers to the text that preceeds the input field on the form. In this example: <label>Name
    [text* contact-Name]</label>, the label is Name (what is outside the [] symbols and can be whatever you want. What is inside the [] symbols is the field name of what is entered.

    Hope this helps.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change input text font colour’ is closed to new replies.