How To Style the Optin Error Messages

When using one of our native Email Service Provider integrations, OptinMonster will automatically display an error message if your visitor tries to incorrectly submit the optin form.

If you wish to change the default styling of the error message, this brief style guide will help you get started.

Use our optin error message style guide to get started with re-styling the appearance of the error messages shown to your subscribers.

Important: This guide assumes you’re already familiar with our Custom CSS tool.

To get started, open your optin in the optin builder and navigate to the Optin panel. Here you can add your styles to the Custom CSS field.

The CSS class .optin-monster-saas-error can be used to apply the specific styles you desire.

Copy the following to get started, these styles change the text color to black, make the text bold and remove the italic style. Remember to update this example CSS to use your own optin’s unique slug.

html div#om-huuflfewhxlh38e0 .optin-monster-saas-error { 
  color: #000000 !important;
  font-weight: bold !important;
  font-style: normal !important;
}

Optin Error Messages Custom CSS Styles

The visit the front-end of your site where your optin is loading and you can check the new styles applied by selecting the submit button without filling out the optin form.

You can customize the error message of your optin using CSS, including changing the default color from red.