Subscription Widget Setup

This Help Desk article covers how to set up and customize our custom Subscription widget for EmPress themes.

In any of our themes, a Subscription widget may be added to the compatible widget area of your choice. The Subscription widget is labeled with your theme name in front of it (e.g. "Presidio: Subscription widget).

HOW TO ADD A SUBSCRIPTION WIDGET

1. Navigate to Appearance > Customize > Widgets.

2. Click on the desired widget area you wish to add the Subscription widget to. 

  • If you don't see the widget area available, double check these items:
    • Ensure you're on a page that features that widget area. For example, if you want to place a widget in an interstitial content block on  your Home Page, but have navigated to a blog post in the Customizer, the widget area will not appear in the Customizer.
    • Ensure you have properly setup your blog feed as desired, to make a widget area available. For example, if you would like a Subscription widget to a sidebar, but have enabled feed layouts that do not offer sidebar capability, you will not see an available widget area in this tab.

3. Click + Add a widget, then scroll and look for the Theme Name: Subscription widget. Click to add to your widget area. You may drag the widget to place it in the desired order. Here is an example of this in action:

4. Next, you must build your Mailchimp form code. In a separate browser tab or window, use the steps below to complete this process.

MAILCHIMP FORM INTEGRATION

Below are instructions for how to create MailChimp form code to integrate into your Subscription widget.

1. Begin by navigating to the MailChimp website.

2. From your MailChimp dashboard, navigate to the Audience tab. Find it on the left side of the dashboard.

3. On the left side of the Audience landing page, click Signup Forms. Then select Embedded Forms. 

4. Under the Embedded Forms section title, you will see a series of tabbed labels. Select Unstyled. Then, customize the form by following these instructions:

UNCHECK the following buttons:

  • Uncheck "Include form title"
  • Uncheck "Show interest group fields"
  • Uncheck "Show required field indicators"
  • Uncheck "Show format options" 

Check off/SELECT:

  • Check "Show only required fields"   This should be the only option checked off! 

Here is a short video showing these options:

5.  Copy the embed code over on the right, under the "Copy/paste onto your site" title. This is the code that begins with <!– Begin MailChimp Signup Form –>  You will need to paste this code into the WordPress Customizer, so be sure to leave the MailChimp tab open if you think you'll need to come back and copy it later. 

6. Back in your theme Customizer tab/window, add the newly copied code to the Form Code: field. Here is a short video of this step:

7. Your form is now embedded into the widget! If you'd like, continue customizing using the recommendations below.

CUSTOMIZING THE SUBSCRIPTION WIDGET

While the Subscription widget can technically work with just form code, many users may wish to add some extra details to entice readers to sign up. Use the Title, Image, and Description features to customize your form.

Title

Add a title to introduce your form. It could be as simple as "Subscribe," or something like "Want More? Get the newsletter!"

Image

If you'd like, add an image to help make your signup form visual!

Description

Use the field to briefly describe your newsletter and what subscribers can expect.

With these three settings filled, here is an example of how the widget might look:

7. To save your changes, hit Publish. However, don't forget that doing this will publicize any other changes you have made in the Customizer!

TROUBLESHOOTING THE SUBSCRIPTION WIDGET

The most common Subscription widget help request we receive relates to form styling. If you have implemented a MailChimp form code into the widget, but it is not formatting correctly (field is too large; colors are not inheriting the theme settings; fonts look wrong), please troubleshoot the following items:

  • Check that you have selected Unstyled form code in the Subscription widget at hand. Using the form setup instructions from up above, be sure to carefully follow the instructions on where to find Unstyled code. Do not use any other form style from MailChimp, including Classic, Condensed, or Horizontal
    • IMPORTANT: Ensure that you have embedded Unstyled form code in all instances around your site. The #1 reason most customers report issues with incorrect form formatting is because they have embedded Unstyled forms into one area, but a different version into another area. For example, if a footer widget is featuring "Horizontal" form code from MailChimp, the Unstyled form code in a sidebar will inherit that Horizontal form styling. Carefully think through all places you have embedded MailChimp code on your site, and ensure each is featuring Unstyled code. You can also navigate to Appearance > Widgets to double check old form code isn't living in an unused widget area you may have forgotten about.
  • Be sure that you have carefully followed the instructions on which options to check or uncheck. Again, refer to our instructions on how to create your form code.
  • Check that you do not have GDPR options turned on in MailChimp. Enabling this options may add a huge amount of copy to your form, and it will not look like the example above. Please reference this article on how to manage GDPR settings in MailChimp.
  • Navigate to Plugins from your WordPress dashboard and ensure you do not have any plugins installed related to MailChimp. For example, if you previously installed a plugin such as MC4WP, settings in this plugin may override the theme settings. If you do not plan on using this plugin anymore, deactivate and delete it.