WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Contact Form 7 - Text content or Field entry box colour change (6 posts)

  1. hells379
    Member
    Posted 11 months ago #

    Hi,

    I have read all the posts on here relating to the changing the colour of the text input and none of these methods work with my theme.

    Black website, white text throughout. The text is appearing white on the contact input fields. Changing the CSS (on the theme and within contact form 7) to black text changes the text colour on the whole contact page therefore none of the other text can be seen.

    Currently I have white text input boxes which hover grey. I would be happy with white text input if I could change the background colour of the input boxes to permanent grey?

    Any help would be appreciated, I have been trying different ways to achieve this for several days now.

    Thanks

    https://wordpress.org/plugins/contact-form-7/

  2. buzztone
    Member
    Posted 11 months ago #

    Please include a link to your Contact Form 7 form so we can examine your form in detail.

    Once we understand how the HTML and CSS is configured in your CF7 form, we should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

  3. hells379
    Member
    Posted 11 months ago #

    Hi,
    The link to the contact page is below.

    http://www.decandolecapital.com/contact-us/

    Any advice would be greatly received.
    H

  4. buzztone
    Member
    Posted 11 months ago #

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS.

    There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

    To avoid the problem you describe you can target your CSS to apply only within CF7 forms as follows:

    .wpcf7-form input {
       background: grey;
    }
  5. hells379
    Member
    Posted 11 months ago #

    Hi,

    Thank you for the assistance. I am concerned however that with this code, some of the text input boxes are reacting differently.

    The telephone number box was a tag generated by me, but the message box was existing, I just changed the heading. Why does the CSS not effect these boxes too? It works perfectly for Name and Email address.

    The ccs I have added to the theme is:

    .wpcf7-form input {
    background: white;
    color: black;
    }

    Many thanks

  6. buzztone
    Member
    Posted 11 months ago #

    RE: Why does the CSS not effect these boxes too?


    Because​ your Telephone field is based on the input [type="tel"] form element (you used Tel as your CF7 tag) and your Enquiry field is based on the textarea standard form element.

    ​​You will need to supply CSS for these elements - something like:

    .wpcf7-form input,
    input[type="tel"],
    textarea​ ​{
    background: white;
    color: black;
    }


    Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

Reply

You must log in to post.

About this Plugin

About this Topic