How to Style the Campaign 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 form.

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

Use our campaign 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 campaign in the Campaign 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 campaign’s unique slug.

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

Campaign Error Messages Custom CSS Styles

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

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

Congratulations, you’ve successfully styled your Campaign’s Error Messages!