How do I change the contact Form font background color and the send button color

  • Unknown's avatar
    lcrohr · Member ·

    Hi there,

    I am losing my mind about this and I couldn’t find any questions exactly regarding this topic.
    I am using the them “Coutoire” and I want to change the inside-background color of the contact form as well as the style of the send button.

    Can anybody assist me with that?

    Best!

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there,

    By “inside-background color”, do you mean the form fields themselves, currently appearing as white? Or do you want the form as a whole to have its own background to make it stand out from the page?

    To change the form fields, you can add this CSS code in the Customizer:

    #contact-form-209 input, #contact-form-209 textarea {
	background-color: red;
}

    Substitute the colour for whatever you want.

    If you want the form as a whole to have a different background from the page, you can use this instead:

    #contact-form-209 {
	background-color: red;
	padding: 10px;
}

    Or you can edit the page, and place the contact form block inside a Cover block, and change the background for the Cover block.

    What exactly would you like to change regarding the Send button? You can change the button color and text color using the color options for the contact form block in the editor itself:

    https://wordpress.com/support/wordpress-editor/blocks/form-block/#form-block-settings

    An aside, your Premium Plan includes live chat support for help with questions like these. You can find live chat by clicking the question mark icon bottom-right on all the My Sites pages, or at https://wordpress.com/help/contact

  • Unknown's avatar
    lcrohr · Member ·

    Hey,

    great! So i used this

    #contact-form-209 input, #contact-form-209 textarea {
    background-color: red;
    }

    and it only changed the boxes of “name” and “email” but not the “Message” box. How do I do that? And on top, how do I know that the CSS code I have to apply is 209? I mean where do I get this information from, if it wasn’t from you :D

    Now the send button appears in orange, I was wondering if I could possibly change the color or shape, maybe if I hover a different color.

    Last but not least, how do I get rid of the red underlines regarding the dress and phone information?

    Thanks so much!

  • Unknown's avatar
    lcrohr · Member ·

    the adress and phone information*

  • staff-blorbo · Staff ·

    and it only changed the boxes of “name” and “email” but not the “Message” box. How do I do that?

    Assuming you want the same background color as the other fields, that’s:

    #contact-form-comment-g209-ihrenachricht {
    background: #FFF8DC;
}

    And on top, how do I know that the CSS code I have to apply is 209?

    Each form has a unique ID as part of its CSS selector. For finding CSS selectors, please see https://wordpress.com/dailypost/2013/07/25/css-selectors/

    Now the send button appears in orange, I was wondering if I could possibly change the color or shape, maybe if I hover a different color.

    I recommend changing that in the form block itself: https://wordpress.com/support/wordpress-editor/blocks/form-block/#customizing-your-form

    Last but not least, how do I get rid of the red underlines regarding the address and phone information?

    This is how your theme styles links, so any change to that would have to apply to links site-wide.

  • Unknown's avatar
    lcrohr · Member ·

    Thank you so much!

    One more question. I uploaded the logo to the HOME site and unfortunately it appears with a white background. Is it possible to switch this to the same site-background by CSS?

    Best!

  • fstat · Staff ·

    Hi there,

    No, that’s not possible with CSS. You have to either upload an image with a transparent background or replace the white color on that image with your site’s background color. All that can only be done on your computer with an image manipulation program.

    Here’s your site’s background color converted in multiple formats:

    https://www.color-hex.com/color/d2c29d

  • Unknown's avatar
    lcrohr · Member ·

    Thanks so much, that tool gave me the solution!

    Is there a possibility to change the grey frame of the contact form?

  • staff-zinnia · Staff ·

    I’m not seeing any frame on the contact form. Rather, it’s a gray background for the entire page – is this what you’re referring to?

    This is an example that would change that background color on the contact form. Change aqua to whatever color you’d like to use.

    .entry-content {
    background-color: aqua;
}
  • The topic ‘How do I change the contact Form font background color and the send button color’ is closed to new replies.