How to style Contact Form 7

Why Contact Form 7

Contact form 7 in one of the most discussed, popular and user-friendly plugins of WordPress. Contact Form 7 lets you easily customize Mail contents that make your work faster. This form is currently used by over 5 million people worldwide! Doesn’t it sound nice? Let’s talk more about Contact Form 7 and how to customize the default style of Contact Form 7. 

Pros and Cons of Contact Form 7:

• You can create multiple contact forms at a time by using Contact Form 7.
• The form fields are easily customizable, so it is more effective than other form plugins. 
• You can use simple markup to alter the mail contents which makes your work faster and easy. 
• You can insert forms at any page or post or anywhere as you need by using the shortcode, which makes your working process simple. 

How to customize the default style of Contact Form 7

We are going to show you how to customize the default style of Contact Form 7. Let’s move forward. You’re using the default style of Contact Form 7. We are going o change the style of Contact Form 7 by CSS codes. Let’s do it step by step forward. Follow the instructions and look after the attached images to clarify everything. 

Step 1: Please go to WP Dashboard > Contact, Then copy the default shortcode and place it below the start writing or type/ to choose a block option. 

Step 2: Now you have a basic style of Contact Form 7. I’m using the 2020 theme of WordPress.now I’m going to find the unique ID of Contact Form 7 as it doesn’t look like other contact forms. To find the ID I’m using the INSPECT element tool of google chrome. 

Step 3: By using inspect tools you can find the ID of Contact Form 7. Now we’re going to make some unique change on Contact Form 7.

Step 4: To style Contact Form 7, I’m opening the inspector stylesheet at google chrome. First copy the ID, then past it below the inspector stylesheet. Then I’m changing the background color Transparent of all content including the text area. To change the background color of the text area copy the ID of the text area and paste it under the previous ID.

Styling With CSS

Step 5: To get rid of the border of the default Contact Form 7 we are going to use border: none, to give a single line of the border under the field type, we will use border-bottom: 1px, Solid and give a color code. To change the color of Texts you have to copy the ID again, and type Label and type again color: give a color code. Now we’re going to change the background color of the area type background-color: give a color code. To add some padding both sides of field type padding: 20px or how you want. Now set a border-radius over the outline border of Contact Form 7, type border-radius: 5px or how you wish. 

Step 6: To style the Input type of Submit, again you have to copy the ID, and go to the Inspector stylesheet. Past the ID and to set a background of the submit, type background-image: linear-gradient(  45deg, and color code as you need). To align the button you have to type display: block; max-width: 50%; margin: 0 auto; padding: 1em. 

Step 7: To change the background color of the Page, you have to find where you make the background color of the page. If you find the place where you give the page color just go to the inspector stylesheet and type background-image: linear-gradient(  45deg, transparent, and color code as you need): to fix the padding type padding: 20px or how you want. 

NOTE: To prevent the clash between the original WordPress theme class and the overwrite class you have to find the page ID, after finding the page ID, copy it and past it before the original WordPress theme ID and type before pasting body.pageID.class ID. 

Additional CSS adding:

Step 8: To make your Customize Contact Form 7, you have to prefix your CSS codes by using any Autoprefixer. It helps to make your codes and Contact Form 7 more browser-friendly. To do that, first, copy the codes from Inspector Stylesheet and paste it on the Autoprefixer field. It will generate the codes automatically. Then copy the prefixed codes for use. To prevent the default stylesheet of Contact Form 7 you have to do that, go to WordPress default style editor which named Additional CSS. Paste the Prefixed Codes. And have a fresh and unique Contact Form 7 view with specially designed.

Here are the CSS snippets that I have used

/* styling contact form 7 with custom CSS */
div#wpcf7-f2039-p2058-o1 {
    background-color: #FFF;
    padding: 20px;
    border-radius: 5px;
}
div#wpcf7-f2039-p2058-o1 input,
div#wpcf7-f2039-p2058-o1 textarea {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #b2adad;
}
div#wpcf7-f2039-p2058-o1 label {
    color: #b2adad;
}
div#wpcf7-f2039-p2058-o1 input[type="submit"] {
    background-image: -o-linear-gradient( 45deg, #F0386B, #F46E93 );
    background-image: linear-gradient( 45deg, #F0386B, #F46E93 );
    display: block;
    max-width: 50%;
    margin: 0 auto;
    padding: 1em 4em;
}
body.page-id-2058 .post-inner.thin {
    background-image: -o-linear-gradient( 45deg, #FF6282, transparent );
    background-image: linear-gradient( 45deg, #FF6282, transparent );
    padding-bottom: 2em;
}

If you would like to know why we should use WordPress, then you can check this out this cool article below :

Why we should use WordPress

Let me know if you have any issues styling your contact form.

Mohammad Saiful Islam

WPExtent