MailChimp Slide Subscription Form: The Why, What and How Of It?

Often in a bid to drive more traffic to our sites, we overlook other relevant factors. But remember, no matter whatever you want to achieve through your site is up to you, it shouldn’t be limited to attracting traffic only.

Of course, getting more traffic is crucial to your site’s success but merely focusing on it won’t help you truly succeed in your endeavors. Put it simply, just like paying attention to increasing your website traffic, you should equally focus on optimizing your website to extend your email subscribers list, sales, and other such important factors.

Moreover, getting more email list subscribers is an effective email marketing strategy to drive more traffic and interact with your customers. However, encouraging your visitors to signup your email newsletter or subscription form can be challenging. But, making use of MailChimp’s Slide Subscription form can help convince users to signup to your website.

The Slide-in form, basically, helps in creating a message that will slide in and slide out and become visible to users as and when required. In this post, I’ll help you learn the process of creating and adding your MailChimp Slides subscription form to your site.

Before You Start

Make sure to get logged-in to your MailChimp account. But, in case you don’t have a MailChimp account, sign up for one. Also, before proceeding further, you must be familiar with what all you need to accomplish your task. Below are three basic prerequisites of integrating a Slides Subscription form with MailChimp:

• A Slides template,
• and as already discussed you’ll need a MailChimp account,
• Basic HTML knowledge.

Understanding the Process of Creating a MailChimp Signup Form

In order to setup a MailChimp Slides Subscription Form, you’ll first need to create a standard MailChimp subscription form. To do so, we’ll design a signup form with MailChimp – that will match to your subscription form as per your needs. For instance, you can consider adding options like radio buttons, checkboxes, etc. as custom fields in your form.

Here are the steps you need to follow for creating a MailChimp Signup Form:

Step 1 – Once you’ve accessed your MailChimp account, click on “Link” provided in the navigation menu at the top of your dashboard page, as you can see in this image:

Step 2 – But, what if you don’t have a list as of yet? It’s pretty obvious that your next step should be creating a list. For this part, click on the “Import Your List” link provided on the right side panel next to the “Import your list” option.

Step 3 – Now your Lists dashboard will open up. In the dashboard (as shown in the image below), select any one list for creating a subscription form. Next, click on the “Stats” drop-down list on the right side of the screen. From the drop-down list choose “Signup Forms.”

Completing this step will redirect you to the Form Options window of your chosen list. Furthermore, since we won’t be creating a subscription from the ground up, simply select the “Embedded Forms option by clicking on the “Select” button as follows:

This will take you to the Embedded Forms Dashboard; wherein you’ll be able to see four options namely: Classic, Super Slim, Naked and Advanced. In our case, we’ll be using the “Naked” version of the Embedded Form that looks something like:

Note: However, you can choose any other option as well depending on your needs.

One important thing you must bear in mind is that we’ll need to configure only some options since we need to write only a few lines of code – that needs to be integrated with Slides. This objective can be achieved by unchecking the below-mentioned form options (in the above image):

• Include a title for your form
• Show all fields
• Show interest group fields
• Show required field indicators
• Show format options

Next, copy the code available at the bottom of the embedded form code box. This is the code that we’ll have to edit and add to the Slides Subscription Form.

Add the Embedded Code in Your MailChimp to Slides Subscription Form Markup

In this part, you will explore how you can integrate the embedded code (generated by MailChimp) with Slides subscription form markup. Below is the original Slides subscription form markup:

<form action="#" autocomplete="off" class="ae-4">

<input type="email" class="rounded input-38" name="email" placeholder="Email"/>

<input type="submit" class="button pink uppercase rounded" name="name" placeholder="Name" value="Get Updates"/>

</form>

<!– Begin MailChimp Signup Form –>

<div id="mc_embed_signup">

<form action="//londongraffititours.us12.list-manage.com/subscribe/post?u=e2a10571b0954221c1c1b0699&amp;id=b5188c9f38" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

<div id="mc_embed_signup_scroll"></pre>
<pre>

And, the MailChimp embedded code is as follows:

<div class="mc-field-group">

<label for="mce-EMAIL">Email Address </label>

<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">

</div>

<div id="mce-responses" class="clear">

<div class="response" id="mce-error-response" style="display:none"></div>

<div class="response" id="mce-success-response" style="display:none"></div>

</div>

<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->

<div
 style="position: absolute; left: -5000px;"><input type="text"
name="b_e2a10571b0954221c1c1b0699_b5188c9f38" tabindex="-1"
value=""></div>

<div class="clear">

<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">

</div>

</div>

</form>

</div></pre>
<pre>

<!--End mc_embed_signup-->

You just need to integrate the above embedded code with your Slides subscription form, using the below provided lines of code from MailChimp:

<form action="//londongraffititours.us12.list-manage.com/subscribe/post?u=e2a10571b0954221c1c1b0699&amp;id=b5188c9f38" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">

Once you execute the code, you will get an email for confirming your subscription. Simply, click on the “Yes, subscribe” to get the job done.Conclusion

Hope that this post would have helped you understand the process of creating a subscription form with MailChimp and how you can integrate it with a Slides Subscription Form.

Author Bio : Sophia Phillips has been working as a professional in WordPress theme customization company and loves sharing information about leveraging multiple benefits of WordPress CMS in the best possible manner. Currently, she has an impressive count of WP web development-related articles under her name.

The post MailChimp Slide Subscription Form: The Why, What and How Of It? appeared first on Smashing Buzz.