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.
Customized WPForms Contact Form
Simple Contact Form

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. 

  • 1
    Name Field
    This name field is broken down into two sections, First Name and Last Name. The same selector is used for both, however in order to target the Last Name field, you have to add one additional part. The border-radius CSS is what rounds the ends of the input field for both.

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

  • 2
    Email Field
    The email field uses a similar selector as the Name Field except you may notice that the field number it references (1) has changed. This also should correspond with the field number on the actual form if you were to go look at it. The border-radius CSS also rounds the ends of this input field.

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

  • 3
    Comment Field
    The comment field also uses a similar selector as the Name and Email Fields except you may notice that the field number (2) has changed once again. This also should correspond with the field number on the actual form if you were to go look at it. The border-radius CSS rounds the corners of this input field.

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

  • 4
    Submit Button
    The default submit button for WPForms is pretty boring, so this little tip will help you to dress it up some. This CSS will center the button on the form and then to create the "round" button we added height and weight, and then set the border radius to 50px. From there we wanted to button to change colors when our pointer was on it, so we added some styling on hover as well. You may notice the :hover added to the end. This indicates this CSS will only show on hover on the element it's applied to.

/*** 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;
}

  • 5
    Form Body
    This selector styles the body of the form itself, meaning the light sky blue in the background and rounded corners, is the form body.

/*** 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 ***/
#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;
}

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.
WPForms 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.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

This is an Elementor Popup triggered by Text.

built with love using elementor pro

codevertical.com

Code Vertical Icon

Customizing the Elementor Popup Close Button