PHPMatters Help You Better Hosting Your PHP-based Sites
How to Make a Popup Newsletter Signup Form by Using WordPress and MailChimp

How to Make a Popup Newsletter Signup Form by Using WordPress and MailChimp

For every blog or website, the newsletter is undoubtedly a great marketing strategy to build close readership so as to grow potential audiences in the online world. By following this social marketing trend, you can not only add spice to your website to get more site traffic, but also can show your sign up form without having to display it in the face of your readers.

To be frank, there are various email newsletter tools, among which WordPress and MailChimp are such two great options with full-featured solutions. For those people who are perplexed when making a decision between WordPress and MailChimp, we would like to walk through the detailed steps needed to add a signup form through those two platforms.

What Is MailChimp?

Before starting with our topic, we would like to have an overview of MailChimp for beginners who are new to blogging world. As is noted above, MailChimp, started in 2001, has been known as a reputable email marketing provider with more than seven million users all over the world. More importantly, it now offers freemium email service for new accounts and plays an important role in people’s social lives by sending around 500 million emails each day.

Apart from that, MailChimp is a perfect option for start-ups in constant need of support. In the support area, this email service provider has prepared a litany of solutions, including video tutorials, glossary and quick answers, etc. Of course, you can also learn how to create and customize your signup form on its official site.

Newsletter Signup Form

Create a Popup Newsletter Signup Form Through MailChimp

Considering for convenience, we have summed up those necessary steps to have a popup signup form here. At the very beginning, you should firstly register an account from MailChimp. Of course, you can choose to sign up a free account to try this service. As is displayed, you are prompted to fill in email address, username and password, which is self-explanatory.

Newsletter Signup Form

Then, you will need to click “Create My Account” so as to receive an activation email. As is specified in the email, you should click the big “Activate Account” button in order to validate your account.

Newsletter Signup Form

Fill in Personal Information
Once done, you will be transferred to another new page where you are required to fill in the necessary information before getting your account started. In the “About You” section, your “First Name” and “Last Name” are needed. In the meantime, you are requested to specify your “Organization Information”. For instance, you should tell how many clients are in your organization and how old your organization is.

Newsletter Signup Form

Scroll down and you will be required to enter the name and URL of your company in order to generate email footers automatically. On top of that, you will need to define your company address by making a selection from the drop-down menu of “City”, “Region”, “Postal code” and “Country”. If completed, you will also need to specify your time-zone and upload profile photo before clicking “Save And Get Started” button.

Newsletter Signup Form

Create a New List
Then, you will be automatically switched to the dashboard of MailChimp where you can notice multiple editing options. Here, all you need to do is to click on “Create a list” option so as to record anyone who comes to sign up your newsletter form. Pay attention that you will need to click the “Create List” option lying on the right top of this page again to create your first email list.

Newsletter Signup Form

And then, you should enter your list details in the correspondent blank boxes. To name a few, you are required to fill in list name, default “form” name and email. In addition to that, you are asked to verify your contact information, write a short reminder and specify email notifications. Do not forget to click “Save” button to take effect.

Newsletter Signup Form

Customize a Popup Signup Form
Having done with those steps above, you need to click the link of “setup a signup form” in the “View subscribers” dialogue box. Next, you shall choose “Subscriber popup” option to embed a popup signup form to your website.

Newsletter Signup Form

Adjust Signup Form Style
Once you entered the “Subscriber” page, you will notice that there are multiple toolbars available for you to personalize your signup form. In the “Design” area, you can decide the “Text Color”, “Layout”, “Form Labels”, “Button Styling” and “Alignment”.

Newsletter Signup Form

In the “Fields” section, you can decide whether your visitors should fill in first name and last name to sign up your form. At the same time, you are able to upload a cover image and write welcome notes in the “Content” area. Also, you can decide popup delay in the last “Settings” section.

Newsletter Signup Form

Publish Your Personalized Settings
Having completed with those settings above, you can choose to click “View Code” so as to copy those newly-generated codes to your website. In the following, we get a line of script codes on the basis of our settings.

<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script type="text/javascript">
    require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us10.list-manage.com","uuid":"0379472f6e1d500f97b13e24f","lid":"16b8d8c6d4"}) })
</script>

In the end, remember to click “Publish” in order make personalized settings to your subscriber popup form. Till this step, you have already designed a popup signup form on your website.

Newsletter Signup Form

Embed Codes to Your WordPress Site
Next, you are required to embed this well-designed form to your site on the same dashboard. To do this, you will only need to go to “Embed Forms” and choose your favorite option to accomplish your project, including “Classic”, “Super Slim”, “Naked” and “Advanced.” Given that you choose the “Classic” option, then MailChimp will prompt you to copy and paste a series of codes to your WordPress widgets, such as footer and sidebar.

Generate a Popup Newsletter Signup Form Through WordPress Plugins

Alternatively, you are also allowed to add a popup signup form through a bunch of MailChimp WordPress plugins. To be frank, this method is much easier and simpler especially for DIY website builders and web designers who don’t have the knowledge of HTML and CSS.

As for details, all you need to do is to choose the mentioned “Advanced” option so as to create a super custom signup form by connecting to its API. In details, to generate API keys, you should follow the root of “Account” > “Extras” >”API key”. And then, your API keys will be displayed as is showed in the following screenshot.

Newsletter Signup Form

Once done, you will need to paste those API keys to the required “Setting” area of a WordPress plugin. Based on our numerous researches and reviews, we select out the following recommendable WordPress newsletter plugins from wordpress.org:

  • WP Popup Plugin – You are empowered to generate unlimited popups, and in the meantime, create related link popups that can trigger popup after someone has clicked on an image or link. Besides, this beautiful plugin enables you to show the popup to search engine visitors only and hide it for logged-in users.
  • WordPress Popup – You are able to introduce exclusive offers, mailing lists and many other advertisements to your readers by a polished popup list. More than that, this responsive plugin can work great on multisite with flexible and simple design template.
  • MailChimp Widget – You can make readers and users signup for your MailChimp list in a lightweight and easy way. In the further, this plugin allows you to sign up different users for different lists via multiple instances of widget.