CHANGE CONTACT FORM COLOUR

theartofintegralbeing · Member · Apr 18, 2016 at 4:39 pm
Copy link

Add topic to favorites
Hello!

I would like to change the contact form colour. I would like a solid dark coloured background, and the box fill to be white. Or I would at least like a border around the contact form and also to centre-align it.

Any CSS for that?

Thanks in advance!
Gabriella

The blog I need help with is: (visible only to logged in users)
carladoria · Member · Apr 18, 2016 at 8:44 pm
Copy link
Hi there,
Use the following CSS to change the colors in your contact form:

#main .entry-content div:last-of-type > form {
background: #163182;
}

And use the color you want instead of that code color. You can easily find rgb colors here: http://www.rapidtables.com/web/color/RGB_Color.htm

To change the boxes:
#page input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=button]):not([type=reset]):not([type=file]), {
background: white;
}

I hope this helps.
theartofintegralbeing · Member · Apr 19, 2016 at 3:17 pm
Copy link
Thanks for your help!

I’ve changed the colour now, but the only thing is, I wanted to change the boxes too, not the submit box, but the name/email/comment box. I want it to be white or a light colour. And also remove my email address and name from the box. Also, it is possible instead of (required) to just have an asterisk?

Thanks in advance!

Gabriella ;-)
thesacredpath · Member · Apr 20, 2016 at 6:08 am
Copy link
Gabriella, the following will change the name, email and comments, quetions or requests box to white.
```
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]), textarea {
    background-color: #fff;
}
```
There is also a “focus” color on the box that comes into play after you click in the box. To change that, add the following and edit my obnoxious red demo color.
```
input:focus:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]), textarea:focus {
    background-color: #cc0000;
}
```
On the “required” we can us a bit of CSS trickery to change that to a *, but typically when you do an asterisk to indicate a required field, you should have a line of text that tells the user that the asterisk indicates a required field. The first two rules below changes required to an asterisk, and the third adds a line of text below the comment box. You can use or delete that as you see fit.
```
#main .contact-form label span {
    display: none;
}
#main .contact-form label:after {
    content: " *";
}
.contact-submit:before {
    content: "* indicates required field";
    display: block;
    color: #000;
    position: relative;
    top: -30px;
}
```
Your name and email address appear because WordPress knows who you are. No one else will see your name and email address. If you log out of WordPress and clear your browser cache and cookies and don’t log back in and visit your contact page, you will see them blank. When I visit it, I see my name and email address because I’m logged in.

The following will center the contact form labels and text areas.
```
#contact-form-30 {
    text-align: center;
}
#contact-form-30 input, #contact-form-30 textarea {
    float: none;
    margin-left: auto !important;
    margin-right: auto !important;
}
#contact-form-30 form {
    padding-left: 10px !important;
}
```
theartofintegralbeing · Member · Apr 20, 2016 at 6:58 am
Copy link
Thanks so much!
All done, looks fabulous.

Kind regards to both,
Gabriella
thesacredpath · Member · Apr 20, 2016 at 9:03 am
Copy link
Hooray and you are welcome.

No items found.