Customizing Contact Form

thesevenyearhitch · Member · May 30, 2014 at 1:56 pm
Copy link

Add topic to favorites
Hello all,

I was wondering if it were at all possible to format the RSVP/contact form at all? If possible I’d like to:

1. Centre the form to the middle of the content area
2. Increase the size of the label font, and perhaps change the color
3. Increase the gap between the label text and the field type text (if that makes sense). It just seems so squished up on top of each other.
4. Change the colour of the white fields
5. Change the colour of the submit button and make it smaller.

It’s a lot, now I come to think about it. Not at all sure how much of this is possible, Grateful for any help. :)
Thanks!

The blog I need help with is: (visible only to logged in users)
adhesionawareness · Member · May 30, 2014 at 4:01 pm
Copy link
Where does the feedback from the contact form go? I assumed it would be to my email but i have run a test and now cant find it??? can anyone help??
jeremeylduvall · Member · May 30, 2014 at 5:44 pm
Copy link
Hi!

Give the following CSS a try! Please note, where it says #### you’ll need to input the hex code for the color you’re looking for.

Centre the form to the middle of the content area
```
div#contact-form-17 {
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}
```
Increase the size of the label font, and perhaps change the color. Increase the gap between the label text and the field type text (if that makes sense). It just seems so squished up on top of each other.
```
label.grunion-field-label {
font-size: 24px;
color: ###;
padding-bottom: 10px;
}
```
Change the colour of the white fields
```
input[type="text"], input[type="email"] {
	background-color: ###;
}
```
Change the colour of the submit button and make it smaller.
```
input[type="submit"] {
background-color: ###;
border: 1px solid ####;
color: ####;
font-size: 13px;
}

input[type="submit"]:hover {
	background-color: #000;
}

input.pushbutton-wide {
	height: 20px;
	width: 100px;
}
```
In that code above, background color refers to the light-grey background. Border is a light grey border that sits around the button. Color is the actual color of the text. The second background-color is the cover the button displays when hovered over.
timethief · Member · May 30, 2014 at 5:49 pm
Copy link
@adhesionawareness
This is a CSS editing forum thread. All CSS editing is theme specific editing. Yours is not a CSS editing question.

If you still have questions after reading the relevant support doc at http://en.support.wordpress.com/contact-form/ then use this link to create your own thread please https://en.forums.wordpress.com/?new=1
thesevenyearhitch · Member · Jun 1, 2014 at 1:58 pm
Copy link
@jeremeylduvall

Thanks for the help, that all worked really well!

I changed the color of the white fields. Would you know how to change the color of the textarea field as well so that the page is uniform? I have tried guesswork but have been unsuccessful so far…

Again, thanks very much for your help!
jeremeylduvall · Member · Jun 2, 2014 at 3:29 pm
Copy link
@thesevenyearhitch – Can you give this a try and let me know if this is what you’re looking for?
```
.contact-form textarea {
	background-color: #e6ba9d;
}
```
I believe you’re looking to turn the white background to the #e6ba9d color. Let me know if I misunderstood.
thesevenyearhitch · Member · Jun 2, 2014 at 5:55 pm
Copy link
Perfect, that was exactly it, thank you! :)
jeremeylduvall · Member · Jun 2, 2014 at 9:49 pm
Copy link
Not a problem! Happy to help.
thesevenyearhitch · Member · Jun 3, 2014 at 10:32 am
Copy link
@jeremeylduvall

Hi there, I’m not sure what I’m doing wrong regarding the input button. When I put this in I can only see the word ‘sub’. Is it perhaps because I added margin-top?

input[type=”submit”] {
background-color: ###;
border: 1px solid ####;
color: ####;
font-size: 13px;
margin-top: 10px;
}

input[type=”submit”]:hover {
background-color: #000;
}

input.pushbutton-wide {
height: 20px;
width: 100px;
}

Thanks!
jeremeylduvall · Member · Jun 3, 2014 at 3:32 pm
Copy link
Can you try adding this to the bottom?
```
p.contact-submit input.pushbutton-wide {
	font-size: 10px;
	padding-bottom: 20px;
}
```
That should help to fix the button layout!
thesevenyearhitch · Member · Jun 6, 2014 at 2:44 pm
Copy link
Looking good! Thanks!
jeremeylduvall · Member · Jun 6, 2014 at 3:41 pm
Copy link
Not a problem! Let me know if you need anything else.

No items found.