Implement Newsletter Subscription Using Staticman

Collecting data in static sites or serverless sites(with POST request) is a hassle because you don’t have a server to receive POST requests and store data. But Staticman is here to help. It will enable users to make POST requests, that will allow you to gather these data. In this article, I am going to tweak Staticman a little to implement newsletter subscription.

FYI: _I am not going to share how to make a commenting system using Staticman because there are countless examples available on the internet, even from Eduardo Bouças, creator of Staticman._

How ‘Staticman’ works

Before starting anything, you need to understand how Staticman works. First, you have a form, when you submit the form(with any kind of data), it will make a POST request to Staticman server, then the data is sent your git repository. Checkout the following image for understanding it better:

How are we going to tweak ‘Staticman’

What Staticman does when notification is allowed, that it creates a mailing list in mailgun. For each data entry, they create a mailing list/add emails to an existing mailing list. Similarly for newsletter, we need a mailing list. So, we are going to use it to collect email addresses to create a mailing list for newsletter.

Steps for setting up newsletter subscription

Host your ‘Staticman’ server

Default Staticman server is already being over used by many people, so it does not work properly. So, its better to host your own. Checkout this article to install Staticman in Heroku server.

Create a staticman.yml in your public repository

You need to create a public git repo, there you need to create a staticman.yml file with following(which has bare minimum settings):

comments:
  allowedFields: ["email", "other_fields_if_necessary"]
  moderation: true
  name: "newsletter-subscription"
  requiredFields: ["email"]
  notifications:
    enabled: true
    apiKey: "XXXXXX"
    domain: "XXXXXX"

Important thing to remember here is that, you need to allow email field and also add email in requiredFields. You can add additional fields in allowedField(like if you already have a commenting system them fields like name, comment etc are necessary).

Most crucial part, you must configure mailgun to generate API Key, then put the value in notifications. Value of API Key and Domain must be base64 encoded.

You can enable moderation to keep the code clean, so when someone submits a newsletter form, it will not be stored in git immediately, instead you can close the Pull Request(because the email is already stored in mailing list).

Setup the form

For newsletter subscription, you need to render a form. For that, you can use the following:

<h1>Newsletter Subscription</h1>
<form id="comment-form" method="post" action="https://your.Staticman.server">
  <input
    type="hidden"
    name="options[redirect]"
    value="https://your-domain.com/submitted"
  />
  <input
    type="hidden"
    name="options[parent]"
    value="a-random-name-which-will-consistant-in-all-pages"
  />
  <input
    type="hidden"
    name="options[slug]"
    value="a-random-name-which-will-consistant-in-all-pages"
  />
  <input
    type="hidden"
    name="options[origin]"
    value="https://your-domain.net/"
  />
  <input
    type="hidden"
    name="options[redirectError]"
    value="https://your-doamin.net/error"
  />
  <input
    type="email"
    name="fields[email]"
    placeholder="Enter your email"
    required
  />
  <input name="options[subscribe]" type="checkbox" value="email" required /> I
  want to receive emails
  <button type="submit">Subscribe</button>
</form>

In the form, for input field you need to make sure you a consistant value for slug and parent in every page where you put this form. Because based on the value of slug a mailing list will be created.

Push changes

All is done. Now its time for testing. Upload the code to your git repository or serverless hosting(like Netlify) and see how it goes. There for each form submission, a new email will be added to a specific mailing list in mailgun.

After mailing list is created

Now its up to you, you need to create templates and send bulk emails to that mailing list.

In conclusion

Although Staticman is for collecting any kind of data, most of the people use it for a decent commenting system. My idea here was to use Staticman for both commenting and newsletter subscription. In this Article, I wrote about Newsletters(by the way they are GDPR complient), maybe you will find more usage of Staticman.

Useful links

• https://www.gabescode.com/staticman/2019/01/04/staticman-comments-for-jekyll.html
• https://networkhobo.com/hugo-staticman-nested-replies-and-email-notifications/
• https://yasoob.me/posts/running_staticman_on_static_hugo_blog_with_nested_comments/
• https://yasoob.me/posts/staticman_comment_notifications_mailgun/
• https://binarymist.io/blog/2018/02/24/hugo-with-staticman-commenting-and-subscriptions/

Last updated: Apr 05, 2024