How to Style WPForms Inside an OptinMonster Popup

Overview

Are you trying to style WPForms inside an OptinMonster? When using the form in a popup lightbox, the default CSS can appear differently than what you expect. In this tutorial, we’ll show you some CSS tweaks you can add to help make sure your WPForms look amazing inside the popup.

Setup

We will be solely focusing on the styling of the form inside the popup rather than the creation of the form and campaign itself. For assistance with creating a form and adding it to an OptinMonster popup, please review this tutorial.

For the purpose of this documentation, we’ve created a form with the Name, Email, Phone, Website, Dropdown, Checkbox, and Paragraph form fields. We’re also adding two-columns for a couple of the rows as well.

Before adding any CSS, our form has a few spacing issues we’ll need to address.

Before we style WPForms inside OptinMonster popup, our form has some spacing issues.

Any and all custom CSS can be added to your site using any of the methods listed in this tutorial.

For this specific tutorial, we’ve used the WordPress Customizer to add our custom CSS. You can also add your CSS there as well, just go to your WordPress Admin. Once logged in, navigate to Appearance » Customize » Additional CSS.

Don’t forget to click Publish after adding any CSS here in order to save the changes.

Styling the form field labels

First, let’s begin by styling the labels. We just want to add a little spacing above and below the form labels.

form#wpforms-form-1139 .wpforms-field-label {
    margin: 10px 0 !important;
}

This CSS will target our form specifically with the form#wpforms-form-1139. This way, we won’t affect the default styling on our other forms.

Styling the form field rows

Next, we’re going to add a little spacing in between the form fields themselves. To do this, use this CSS.

form#wpforms-form-1139 .wpforms-field-container .wpforms-field {
    padding: 10px 0 !important;
}

Now you can see we have added some defined spacing to the form fields as well.

Styling the form field sub labels

Anywhere in your form that you may have sub labels showing, you’ll need to add some spacing there too.

form#wpforms-form-1139 label.wpforms-field-sublabel {
    margin: 5px 0 0px 0 !important;
}

Styling the form field columns

You may also have columns set up in your form, whether that’s from the Name field format, the Address or even just separating form fields with the WPForms multi-column layout. You’ll need to add some spacing to the right of each of these CSS classes.

For more information on WPForms multi-column layouts, please see this tutorial.

form#wpforms-form-1139 .wpforms-one-third, 
form#wpforms-form-1139 .wpforms-one-half, 
form#wpforms-form-1139 .wpforms-one-fourth, 
form#wpforms-form-1139 .wpforms-one-fifth, 
form#wpforms-form-1139 .wpforms-one-sixth, 
form#wpforms-form-1139 .wpforms-two-thirds, 
form#wpforms-form-1139 .wpforms-two-fourths, 
form#wpforms-form-1139 .wpforms-two-fifths, 
form#wpforms-form-1139 .wpforms-two-sixths, 
form#wpforms-form-1139 .wpforms-three-fourths, 
form#wpforms-form-1139 .wpforms-three-fifths, 
form#wpforms-form-1139 .wpforms-three-sixths, 
form#wpforms-form-1139 .wpforms-four-fifths, 
form#wpforms-form-1139 .wpforms-five-sixths {
    margin-right: 2% !important;
} 

You don’t have to add all of that CSS if you were only using the one-half columns, for example. But we wanted to make sure we covered all the bases in this tutorial so that CSS will cover all columns in WPForms.

Styling the SmartPhone form field

For the Smart Phone form field, the flag dropdown will need a small CSS rule as well just to add some padding around the flag dropdown. To do this, use this CSS.

form#wpforms-form-1139 .iti__flag-container {
    padding: 5px !important;
}

Now when you view our popup form, you can see the changes made have given our form exactly the look and feel that we get from WPForms while keeping it all wrapped up inside the OptinMonster popup.

After we've styled the WPForms inside the OptinMonster popup, our form now looks as we intend it to.

And that’s it! Just a few lines of CSS and you can easily style your WPForms inside the OptinMonster popup! Would you like to style the Checkbox and Multiple Choice selections to appear like a button the user can click? Take a look at our tutorial on How to Customize Checkbox and Radio Fields to Look Like Buttons.