Design your Subscription Form (Widget or Shortcode)

To change the design of your subscription form you need to know basic cascading style sheet (CSS). There’s no HTML to change.

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

  1. Hybrid Connect (Premium)
  2. Magic Action Box (Free or Premium)
  3. Optin Revolution (Premium version supports MailPoet)
The MailPoet team doesn’t do custom work. You can find help in a variety of forums, or paying services like wpquestions.com or codeable.io

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 mailpoet.com. 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]"] { ...your styles... }

Note: the example above uses a technique called selectors. This is not supported by Internet Explorer 6. 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 { ...your styles... }

To change the validation warnings:

.formErrorContent { ...your styles... !important }

To change the success message with the beige background:

.allmsgs .updated { ...your styles... }

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; }

8