How To Style Wp Forms

by

WP Forms is a well-known plugin utilized for form creation on WordPress sites. Although it comes equipped with numerous predefined styles, you might desire to personalize your forms’ appearance to align with your website’s aesthetic. This article will explore the methods for styling WP Forms with the use of CSS.

Introduction

Before we begin, it’s important to note that WP Forms has a built-in stylesheet that you can use to customize the appearance of your forms. However, if you want to make more advanced changes or create a completely unique style, you will need to use CSS.

Step 1: Enqueue Your Stylesheet

The first step in styling WP Forms with CSS is to enqueue your stylesheet. You can do this by adding the following code to your theme’s functions.php file:

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-custom-style', get_stylesheet_directory_uri() . '/css/custom-forms.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

This code will enqueue your custom stylesheet, which we will create in the next step.

Step 2: Create Your Stylesheet

Now that you have enqueued your stylesheet, it’s time to create it. You can do this by creating a new file called custom-forms.css in the css folder of your theme directory.

.wpforms-form {
    background: #fafafa;
    border: 1px solid #eaeaea;
}
.wpforms-field {
    margin-bottom: 20px;
}
.wpforms-submit {
    background: #4CAF50;
    color: white;
}

In this example, we have created a stylesheet that changes the background color of the form, adds some margin to the fields, and customizes the submit button. You can make any changes you want to the stylesheet to create your desired look.

Step 3: Apply Your Styles

Finally, we need to apply our styles to the form. To do this, we will add a class to the form element in the WP Forms settings. In the form builder, click on the “Settings” tab and then select “Form Settings.” From there, you can add a custom class to the form by entering it in the “Custom Class” field.

.my-custom-form {
    background: #fafafa;
    border: 1px solid #eaeaea;
}
.my-custom-form .wpforms-field {
    margin-bottom: 20px;
}
.my-custom-form .wpforms-submit {
    background: #4CAF50;
    color: white;
}

In this example, we have added the class “my-custom-form” to the form and then applied our custom styles to that class. This will ensure that only this specific form is affected by our changes.

Conclusion

Styling WP Forms with CSS can be a great way to create a unique look for your forms and make them match the design of your website. By following these steps, you can easily customize the appearance of your forms and create a seamless user experience.