Form Style

Since version 4.7.2.

To change the subscription forms appearance, you can override the default CSS rules with your own. Your rules must be added after the standard Newsletter CSS and the best way to have that order granted, is to use the extra CSS field available in the subscription panel. That extra configuration has syntax highlight and autcompletion features to make it easy to edit your CSS.

Since version 4.7.2 we changed the CSS classes prefix from “newsletter-” to “tnp-” to avoid the too often conflicts with themes using the “newsletter-” as prefix. If that change is affecting the subscription form appearance in your blog, check your custom CSS for “newsletter-” and replace it with “tnp-“.

Let start with few examples: firstly we look at the standard Newsletter CSS and the we try to override it to change the appearance.

How to change the submit button

The whole standard form is contained in a <form> tag with CSS class “newsletter-subscription”. The standard button is simply rendered with a style lile the one below:

.tnp-subscription input.tnp-submit {
 background-color: #444!important;
 color: #fff!important;
 width: auto!important;
}

The “!important” keyword is a “CSS hack” to give more priority to our rules. Even if we don’t like it too much, the Newsletter styles should deal with many other CSS (from themes and plugins) which can change the original appearance.

We want to change the background color of the button hence we can add a specific rule in the extra CSS field:

.tnp-subscription input.tnp-submit {
  background-color: #668899;
}

 

styles-1

Now that we change the button background to blue, we want to revert it: white background and black label.

.tnp-subscription input.tnp-submit {
  background-color: #ffffff!important;
  color: #000000!important;
}

Every field has its own class

Every field has its own class. For example the email field uses tnp-email, the name/first name uses tnp-name, the last name uses “newsletter-lastname” and so on. Once you have the form published, you can check on your own the classes used in the form.

For example, if you want to set the background of the email field, you can address it with a rule like this one:

.tnp-subscription input.tnp-email {
  background-color: #dddddd!important;
}

Other types of forms

Newsletter has few types of forms: the standard one, the minimal (only the email field), the standard widget and the widget minimal (only email field). They are styled separately, what changes is the main class of the <div> containing the <form> tag.

  • the standard form uses “tnp-subscription”
  • the minimal form uses “tnp-subscription-minimal”
  • the standard widget uses “tnp-widget”
  • the minimal widget uses “tnp-widget-minimal”

hence to change the subscription button in the newsletter form you can simply add this rule:

.tnp-widget input.tnp-submit {
  background-color: #446677!important;
}

HTML structure

The form HTML structure is very simple and you can check it on generated form to address the single elements with a CSS rule. Generally you should expect a structure like:

<div class="tnp tnp-subscription">
<form action="..." method="post">
  <div class="tnp-field tnp-field-email">
    <label class="tnp-label">Your email</label>
    <input type="email" class="tnp-email" name="ne" value="" required placeholder="...">
  </div>
  <div class="tnp-field tnp-field-submit">
    <input type="submit" class="tnp-submit" value="Subscribe">
  </div>
</form>
</div>

Every field has a generic class tnp-field and a specific class tnp-field-[name]. The actual input tag has the class tnp-[name]. Lists are a little more structured, but easy to understand.

Common questions

Are forms responsive?

Yes, Newsletter forms are responsive and the standard CSS includes the “media queries”, special rule to make the fields and the whole form as better as possible for mobile small screens.

Why fields have not an id?

Because forms can be injected many times in a page and the field id must be unique.

Can I add those rules in my theme CSS

Yes, of course, but you need to be sure your theme CSS is loaded after the Newsletter CSS, and that usually does not happens. If you want to create a theme with a special style for all Newsletter forms (we encourage it) you can “filter out” the Newsletter style. In your theme you can add a filter:

add_filter('newsletter_enqueue_style', '__return_false');

Note that disabling the standard CSS you’ll disable even the custom CSS that can be configured in the Newsletter subscription panel.

An alternative is to enqueue a piece of CSS with wp_enqueue_style(…) and adding a dependence to “newsletter-subscription” which is the handler for the Newsletter style when enqueue. Example:

wp_enqueue_style('my-handler', 'my CSS URL', array('newsletter-subscription'));

Or you can enqueue some “inline styles” always setting as dependence the handler “newsletter-subscription”: WordPress will add them “in-page” after the Newsletter main CSS.

wp_add_inline_style('newsletter-subscription', $your_css);

where $your_css is a variable with your piece of CSS (without the <style> tag!).

What is the minimal form?

The minimal form is a simple form made only with the email field and the submit button in a single line. It can be activated with this shortcode:

[newsletter_form type="minimal"]

What the heck means “tnp”?

Ah, yes, tnp means The Newsletter Plugin…