Styling Contact Form 7

Support
#1

Hi Guys,

I was wondering if you would be able to help me style Contact Form 7.

I would like to make the input boxes a particular background colour (#f1f5f5).

I would also like to increase the font size of the Submit button (16px) , as well as choose the font family (Monserrat Semi Bold) and remove the shadow below the text.

Would you mind offering some advice of how I could achieve this?

Thanks a million!

#2

This is really a general CSS styling question.

Here is a good place to start: https://contactform7.com/styling-contact-form/

#3

Hi There @billy.rooney

Thanks for writing in! Try adding the following CSS rules into your Contact form page’s custom CSS area or you can add into your Theme Options > Global CSS area.

.wpcf7-form .wpcf7-text {
    background-color: #1D4D80;
}
.wpcf7-form .wpcf7-textarea {
    background-color: #1D4D80;
}
.wpcf7-form .wpcf7-submit {
    font-size: 17px !important;
    font-family: Monserrat Semi Bold;
    text-shadow: none !important;
}

@medievilmusician … Thank you for your contribution as well :slight_smile:

Thanks!

#4

@ mldarshana

Thank you so much for that, I really appreciate it. Just a couple of things, the font doesn’t seem to be changing, and when I hover over the button the size of the button shrinks vertically, any suggestions? It might have something to do with CSS code that I have there already which is:

.wpcf7-submit {
display: block;
width: 20% !important;
}

Also, would you know how I could vertically centre align the text in the button?

@medievilmusician thanks for your input there.

#5

Hey Billy,

Thanks for the update, to fix the hover issue and vertically align the text in the button, just add the following code:

.wpcf7-form .wpcf7-submit, .wpcf7-form .wpcf7-submit:hover {
    font-size: 17px !important;
    font-family: Monserrat Semi Bold;
    text-shadow: none !important;
    padding: 10px !important;
}

Let us know how this goes!

#6

Thank you so much for that, and it did sort out the button hover effect, but the Monserrat font isn’t taking for some reason.

#7

Hi There,

Please change the font family to this:

font-family: "Montserrat",sans-serif;

Hope it helps :slight_smile:

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.