How to add Email Subscription to your Website/Blog?

Published Date : 22-Nov-2022

Introduction

In this article, I will take you all step by step to add the Subscription form to your website using MailChimp

Pre-requisites

Why Email Subscription ?

Email Subscription is a nice to have for any website. Having subscribers gives us the power to communicate with readers about all the future posts & articles.

What is MailChimp & Why MailChimp ?

Mailchimp is an all-in-one marketing platform that helps you manage and talk to your clients, customers, and other interested parties.

It helps you to have the interested users subscribe to your content through email and communicate with them through email.

Note: This is a paid service, and it’s not free to use. I pay $11 every month for this service.

Why MailChimp ?

  • MailChimp provides easy integrations to add a Subscription form to your website.
  • MailChimp has the intuitive option to create a Subscription form, and it generates all the code for you to integrate the same in your website.
  • MailChimp maintains the whole user data for you and its has high level security to protect the user data using 2FA.

Let’s Integrate MailChimp Subscription form to our Hugo Website

Step 1 : Create the MailChimp Account

  • Navigate to MailChimp website and Sign Up for an account

Step 2 : Create a Subscription Form in MailChimp

  • Login to the MailChimp account.
  • Click on Create on the top left Menu bar.
  • Select the Embedded Form and then click Begin.

  • In the Form Fields, Email Address is selected by default and its mandatory field.

  • I am going leave that as the only field for subscription. You are welcome to add other fields if you feel that’s necessary for you.

Edit the form by Clicking the Settings.

  1. Give your form a Title name.
  2. Adjust the width of the Screen.
  3. Select the Remove CSS styles option. We will customize the CSS as per the need in the next section.

Click Continue, this will have the form code ready to be used in our Hugo code repo.

Step 3 : Add the MailChimp Form Code to our Repo

  • Create a file named subscribe.html and add html file in this themes/hugo-theme-relearn/layouts/partials/ folder

subscribe.html

  • Add the copied code in to the html file.
<!-- Begin Mailchimp Signup Form -->
<style>
  .subscribe_form{
    width: 40%;
    margin:auto;
  }
</style>

<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup"
class="subscribe_form">
  <form action="https://codewithdilip.us14.list-manage.com/subscribe/post?u=uid&amp;id=4id&amp;f_id=fid" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self">
    <div id="mc_embed_signup_scroll">
      <h6>Subscribe for Future Posts</h6>
      <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
      <div class="mc-field-group">
        <label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
        </label>
        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required>
        <span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
      </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;" aria-hidden="true"><input type="text" name="b_7ddd204e49d8176dc77032076_4a4ebf5c74" tabindex="-1" value=""></div>
      <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
  </form>
</div>

<!--End mc_embed_signup-->
  • The style element is for the alignment of where it should be displayed in the screen
    • margin: auto -> This keeps the form in the center of the page
    • width: The width is adjusted to 40%
  • Signup-Form action:
      <form action="https://codewithdilip.us14.list-manage.com/subscribe/post?u=uid&amp;id=4id&amp;f_id=fid" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self">
    • In the action, the u, id and f_id are really important and you will have a unique id for your case.

Add subscribe.html to the Hugo Page Builder

Next step is to add this subscribe.html to our page builder in hugo

Navigate to the themes/hugo-theme-relearn/layouts/partials/ folder, you will notice a bunch of *.hugo files.

  • I am using the Relearn theme, so you will notice a single-article.hugo file
  • Now let’s add this towards the end of the file
{{- partial "subscribe.html" . }}
  • Now the single-article.hugo will look like this
{{- $page := .page }}
{{- $content := .content }}
{{- $page.Page.Store.Set (printf "%sIsNested" (partial "output-format.hugo" $page)) false }}
{{- partial "output-partial.hugo" (dict "base" "article" "page" $page "parameter" (dict "page" $page "content" $content)) }}
{{- partial "subscribe.html" . }}

Let’s test it in local

Run the hugo project by running the below command.

hugo serve

You will be able to see the Subscription form added to your page or post in the bottom of the page.

This form will allow the users to enter their email-id and subscribe to your mailing list.

Step 4 : User email list in your MailChimp account

Once the user subscribed to you by submitting the subscription form, you will be able to see them in your MailChimp account.

Navigate to your MailChimp home page and Click All Contacts, this should display all the subscribed users.

Add a Subscription Pop-Up to your Website

Subscription Pop-up is one of the best way to show the user a pop-up and requesting them to subscribe to our website/blog.

Step 1 : Create a pop-up form in MailChimp

Navigate to the below section

Audience -> Signup Forms -> Select "Subscriber pop-up"

Step 2 : Edit the Pop-up form

Create the form like below:

Once the form is completed and then go to the next step.

  • Provide the website you would like to show the pop-up.

Step 3 : Connect the site to the Pop-up form

Copy code and place it in the <head> tag of your hugo website.

Navigate to this themes/hugo-theme-relearn/layouts/partials/ folder and you will find the header.html file.

Add the copied script right below the <head> element.

Your header.html should look like below and deploy the code in to the environment:

<head>
    <script id="mcjs">
    !function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/abc/abcd.js");
    </script>

Let’s go back to the MailChimp account and click the Check Connection.

Once the connection is successful then you will see a message like below:

Conclusion

  • Congrats! We have successfully added the email subscription form using MailChimp to the website that’s built using Hugo.
comments powered by Disqus