Change Contact Form 7 Labels & Buttons

Hello,

On this page: http://m62.siteground.biz/~contenta/kaivenemore.com/contact/
I would like the field labels: "Your Name" "Your Email" etc. to be white.
Also the "Send" text at the bottom of the form to be #e1be60 (and font slightly bigger on "send" text.

Thanks in advance,
Casper

  • Luís

    Hi @Casper,

    I hope had been good today!

    Please, try this CSS code:

    .wpcf7 form p {
        color: #fff;
    }
    .wpcf7 form input[type="submit"] {
        color: #e1be60;
        font-size: 18px;
    }

    @faydra_deon inline CSS is a bad practice and you should always avoid, unless you don't have other option.

    If you don't know, you should always avoid change the original CSS files too, in order to don't lose it all when you make an update.

    So, we recommend use a plugin to add custom CSS:

    https://wordpress.org/plugins/simple-custom-css/

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • faydra_deon

    @Luis, I've been doing web design/development since 1999, so I know when to use inline CSS and when not to. I've also been working with WordPress since 2005, and I know that you don't change original CSS files.

    When working with Contact Form 7, I always use inline CSS, so that changes to one form do not affect every, single form I create with that plugin, especially since CF7 is designed to allow you to use different styles for different forms. This is not true of any other forms plugin I've used, since none of the other forms plugins I've used allow you to control the HTML and CSS directly as you create the form elements. CF7 is unique in that regard.

    @Casper, first let me apologize for missing the part where you mentioned that you wanted the text to be slightly bigger for the Submit button. If you use the inline CSS I provided, then you would use the following inline style on the P tag:

    <p style="background:#e1be60; font-size: 18px;">

    @Casper, please also note that if/when the CF7 plugin is updated, nothing will happen to the inline CSS you use per form, and using inline CSS with your CF7 forms will keep you from needing to add another plugin to your WordPress site.

    If you want the same CSS changes on every, single form, then you can duplicate the one form so you do not have to start from scratch with the next form, and all the CSS will already be there for you.

    Since you specifically said "On this page," I made the leap of logic that you only wanted to change the form on that one, specific page, which is why I provided inline CSS. If this is not the case, and you want every form to have the exact, same CSS modifications, then use the external CSS that @Luís provided.

    Faydra...

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.