From Dud To Dynamite: Customizing your WPForms Contact Form

WPForms is an amazing form builder for WordPress, you can check out this review we did: WPForms, the Best Form Builder for WordPress. You can quickly and easily build just about any kind of form you want within minutes. There's a flip side to this though.... while they've definitely made it the best out there, they forms often look pretty generic with how they are styled by default. Thankfully you can change all that! This post is going to give you a list of some of the most common CSS selectors that WPForms uses, and then we are going to give you some demo examples along with the CSS we used. This way you will be able to duplicate what we've created. Remember that the "Inspect" tool is your friend, you can learn more about the Inspect tool and a basic run through on how to use it in our post: Get Your Inspect On: Viewing a Sites CSS and More. Let's get started.

Simple Contact Form

This is one of the most commonly used forms and layouts used for a contact page, and also the quickest to make. You can view this example live on our Contact Us page.

This example uses 5 different CSS selectors to achieve this look, so we will explain them in the order they are listed in the picture above. One thing to keep in mind is that your fields may have different numbers for them.

/*** Styles First Name Field ***/
#wpforms-373-field_0 {
border-radius: 20px;
}
/*** Styles Last Name Field ***/
#wpforms-373-field_0-last {
border-radius: 20px;
}

/*** Styles Email Field ***/
#wpforms-373-field_1 {
border-radius: 20px;
}

/*** Styles Comment Field ***/
#wpforms-373-field_2 {
border-radius: 20px;
}

/*** Styles Submit Button ***/
#wpforms-submit-373 {
display: flex;
justify-content: center;
margin: auto;
border: solid 3px white;
border-radius: 50px;
background-color: darkslateblue;
color: white;
font-weight: 900;
height:100px;
width:100px;
}

/*** Styles Submit Button on Hover ***/
#wpforms-submit-373:hover {
background-color: darkgray;
border: solid 3px darkslateblue;
color: darkslateblue;
}

/*** Styles Form Body ***/
#wpforms-373 {
padding: 30px 20px;
background-color: lightskyblue;
border-radius: 10px;
}

All the CSS combined

Here's all the CSS combined in case you just want that. Keep in mind that you're still not done, as you cannot just copy/paste the CSS and your form will magically look like ours does. So once you copy/paste keep reading.

/*** Styles First Name Field ***/
#wpforms-373-field_0 {
border-radius: 20px;
}
/*** Styles Last Name Field ***/
#wpforms-373-field_0-last {
border-radius: 20px;
}

/*** Styles Email Field ***/
#wpforms-373-field_1 {
border-radius: 20px;
}

/*** Styles Comment Field ***/
#wpforms-373-field_2 {
border-radius: 20px;
}

/*** Styles Submit Button on Hover ***/
#wpforms-submit-373:hover {
background-color: darkgray;
border: solid 3px darkslateblue;
color: darkslateblue;
}

/*** Styles Form Body ***/
#wpforms-373 {
padding: 30px 20px;
background-color: lightskyblue;
border-radius: 10px;
}

What's Next?

As we stated before, you can copy/paste the CSS above but it most likely won't work. Why? Because you need to update the form ID number.

In the screenshot above, our form ID number is..... 373. Does that look familiar? It should because our CSS selector used that same number.

Now that you have the ID number of the form you're wanting to style, replace our 373 with yours, and you're all set. If you're not seeing the changes, be sure to flush your browser cache and also you can view the form using Incognito to confirm the changes took.

Have a comment or a question? Post it below. Like what you read, share it using the buttons below.