Topics
Noptin allows you to use custom CSS to further style your email opt-in forms. This feature is only available for forms made with the Opt-in Form Editor.
To add custom CSS to a form:-
- First, click on the form to open it in the Opt-in Form Editor.
- Click on the Design section of the editor sidebar then scroll down to the Custom CSS panel.
- Open the panel then insert your custom styles.

By default, the styles you enter will affect all opt-in forms found on your website. This is a feature of the CSS specs.
The Workaround The Workaround
Noptin provides a workaround. All you have to do is prefix all your styles with .noptin-optin-form-wrapper
.
For example,
The following code will change the padding of your forms input fields:-
.noptin-optin-form-wrapper . noptin-form-field {
padding: 4px !important;
}
Notice the !important
keyword in the above snippet. This tells the browser to give more weight to your CSS rules.
Assuming your post has an ID of 1837
, Noptin will then transform the above code into something like:-
.noptin-form-id-1837 .noptin-optin-form-wrapper . noptin-form-field { padding: 4px !important; }
This way, your styles will only affect that specific form.
The guys at w3schools.com have a pretty comprehensive CSS Tutorial. Be sure to check it out.
Examples Examples
Below are a couple of examples that you can try out. Copy and paste any that you like into the custom CSS editor area.
Rounding the form fields Rounding the form fields
With the CSS border-radius
property, you can give any element “rounded corners”.
The example code below will round your form’s input and submit button fields.
.noptin-optin-form-wrapper .noptin-form-field, .noptin-optin-form-wrapper .noptin-form-submit{ border-radius: 30px !important; }
Noptin adds the noptin-form-field
class to all input elements on your form. The submit button has a noptin-form-submit
button.
Below is the result of the above example.
Adding border images to the form Adding border images to the form
With the CSS border-image
property, you can set an image to be used as the border around an element.
The example below adds an image border around your main form. Courtesy of css-tricks.com.
.noptin-optin-form-wrapper { border-width: 12px; border-image-source: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/hearts-border-image.png); border-image-slice: 20 22; border-image-repeat: round; }
Use the noptin-optin-form-wrapper
class to style the entire form.
Below is the result of the above example:-
Changing the popup animation Changing the popup animation
Changing the popup’s display animation is easy. You can use any (or a combination) of the following CSS properties.
transition
– allows you to change property values smoothly, over a given duration.transform
– property allows you to move, rotate, scale, and skew elements.animations
– allows the animation of HTML elements without using JavaScript or Flash.
The example below shows just how easy it easy to change the animation:-
.noptin-optin-form-wrapper.noptin-animate-from { transform: rotate(0deg); } .noptin-optin-form-wrapper.noptin-animate-after { transform: rotate(360deg); }
The noptin-animate-from
class defines the initial state of the form while the noptin-animate-after
class defines the final state of the form.
Click here to show a popup with the default animation and here to show a popup with a custom animation.
You can use other CSS properties besides the above three.
Example:-
.noptin-optin-form-wrapper.noptin-animate-from { transform: none; left: -100%; position: relative; } .noptin-optin-form-wrapper.noptin-animate-after { transform: none; left: 0; position: relative; }
The above example slides the popup from the left. Click here to see it in action.
Note: You have to reset the transform property in case you decide to use any other CSS property.
Final Words Final Words
Our main goal when creating Noptin was to keep it as lightweight and fast as possible. It is probably one of the fastest WordPress email opt-in plugin.
As a result, we had to limit the customization options to the bare minimum.
However, as you can see, it is very easy to customize the form even further using custom CSS. Copy and paste the above example into your form and play around with them.
Is there a way to change the font size of the title?
ex: Subscribe To Post
I’ve tried:
.noptin-form-title {
font-size: 12px;
}
to no avail.
Feedback
Try this
.noptin-form-heading{font-size: 12px !important;}
— By Brian Mutende —Yesterday’s release also contains a slider to change the title. — By Brian Mutende —
Any way to css the body text of the form?
And would the above sample not have to be
.noptin-optin-form-wrapper .noptin-form-heading{font-size: 12px !important;}
?