CSS to customize built-in contact form?

RapidWeaver Classic
1

I’m using a very simple version of the built-in contact form, just a few fields for contact info and a message. The form works perfectly, but I’d like to make some adjustments to the look of the page.

How do I adjust the width of the input fields (right now they run off the sides of the page) and change the size/color of the text? I’ve played around with the CSS but can only figure out how to change the top line of text. I’m guessing there are easy fixes for both of these, but I can’t seem to figure it out!

Here’s the form as it looks at the moment:
http://www.becky-frey.com/contact/contact-form/index.php

2

I don’t have the theme but it’s obviously possible because they do it in the demo project.

Have you tried downloading the tutorial project from here to see if that helps?

Rob

3

@Tapdance42

I don’t have the theme either and I would always recommend using theme/vendor provided customisations before resorting to custom CSS.

But… if you can’t find any, you could try adding this CSS to the page level CSS container. Maybe it will get the form closer to your liking?

form.rw-contact-form {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

label {
    font-size: 1em;
    color: white;
}

.message-text {
    text-align: center;
    text-transform: uppercase;
    font-size: 1.2em;
}
5 Likes
4

This CSS worked perfectly, and the contact form now looks exactly as I want it to look. Thank you so much!!!

2 Likes
5

My pleasure entirely.
Greetings from yuzoolthemes!
http://www.yuzoolthemes.com/

1 Like