Design your subscription form (widget or shortcode)

This article refers to MailPoet 2

If you're looking for MailPoet 3 articles, please go to MailPoet 3 Knowledge Base

To change the design of your subscription form you need to know basic cascading style sheet (CSS). Using the code inspector ( see a demonstration on Youtube) of your browser is also practical. There's no HTML to change.

Alternatively, a few plugins can help you design forms or:

  1. Bloom (Premium)
  2. Magic Action Box (Free or Premium)
  3. Optin Revolution (Premium version supports MailPoet)

The MailPoet support staff don't do custom work. You can find help in a variety of forums, or paying services like

We recommend that you add your form styles to your theme's style.css file. MailPoet doesn't have default styles and depends on your theme entirely.

iframe: add your own iframe.css in the wp-content/uploads/wysija/css folder.

 Default style examples

Above, from left to right, examples of the MailPoet widget in:

  1. Twenty Eleven theme (default WordPress theme). No custom style.
  2. Biznizz by Woothemes. No custom style.
  3. Child theme of Biznizz on Input and button styles are customized.

Modifying the input and button

We can't teach you CSS, but we can at least point you in a few directions. Hopefully, you know how to use your browser's code inspector, or have Firebug installed if you use Firefox.

Alternative: you can also use the widget's unique ID to apply your classes, for example the DIV or the FORM. Beware because this technique only applies to a single widget and not all of them, if you have more than one.

To change the email input, add this class to your theme’s style.css file:
.widget_wysija input[name="wysija[user][email]"] { <em>...your styles...</em> }

Note: the example above uses a technique called selectors. Use the widget or the form's unique ID to target this input instead for IE6.

To change the button, add this style to your theme's style.css file:
.wysija-submit-field { <em>...your styles...</em> }

To change the validation warnings:

.formErrorContent { <em>...your styles...</em> !important }

To change the success message with the beige background:

.allmsgs .updated { <em>...your styles...</em> }
To put the email input and the button on the same line:
.widget_wysija .wysija-submit, .widget_wysija .wysija-paragraph { display: inline; }

Note: you might need to adjust the width of the input depending on the width of your sidebar

To remove the space between the input and the button:
.wysija-submit-field { margin-top:0 !important; }
To change the style of the brief "Loading..." message on submitting the form:
.allmsgs blink { <em>...your styles...</em> }