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:-

1. First, click on the form to open it in the Opt-in Form Editor.
2. Click on the Design section of the editor sidebar then scroll down to the Custom CSS panel.
3. 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

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

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

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

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’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

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.