How to Build Responsive Newsletter Signup Box for Hugo

date
May 3, 2021
slug
newsletter-hugo
status
Published
tags
Tech
summary
type
Post
notion image
This blog post focuses on Hugo, but you can use the same technique for other static site generators.
Starting last week, I moved my newsletter hosting from Moosend to Revue. Moosend came with its newsletter sign-up box with its builder. Revue does not. So I thought to create one by myself.
How hard can it be?
I started by just searching for a simple subscription box template on the internet and found this one. It has the structure that I wanted.
We will use that as the base and change it to suit our needs.
  1. Make it responsive
  1. Change the color palette
  1. Implement the change on Hugo blog with partials

Making it responsive

To make it responsive, all I had to do was change:
form {
    width: 450px;
}
with:
form {
    width: 80%;
}

Choosing color

I used the Mermaid Lagoon color palette from Canva.
If you don’t like this one, you can just pick another from the list.
There are two places to change: the main embed and the submit button.
.revue-embed {
    background: #0c2d48;
}

#member_submit {
    background: #2e8bc0;
}

Hugo implementation

I’m using cocoa-eh as my theme, so please change your theme path accordingly.
First, we need to create a partial file to contain our form code.
site/themes/cocoa-eh/layouts/partials/newsletter_signup.html

<!-- Newsletter Signup -->
<style type="text/css" media="screen">
    {{ partial "css/newsletter.css" . | safeCSS }}
</style>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>

<div id="revue-embed" class="revue-embed">
    <form action="http://digest.augusteo.com/add_subscriber" method="post" id="revue-form" name="revue-form"
          target="_blank">
        <div class="revue-header">
            <p>Get your free weekly digest</p>
        </div>
        <div class="revue-description">
            <p>Once a week, I will send you a highly curated weekly digest on:</p>
            <br>
            <p>Science/Technology, Software/AI, Business/Finance, and Culture/Fun.</p>
            <br>
            <p>The easiest way to learn the most salient content every week.</p>
        </div>
        <div class="revue-input">
            <input type="email" class="button" name="member[email]" id="member_email" placeholder="Your email address...">
            <input type="submit" class="button" name="member[subscribe]" id="member_submit" value="Subscribe">
        </div>
    </form>
</div>
Next, we need to create css file for the styling.
site/themes/cocoa-eh/layouts/partials/css/newsletter.css

.revue-embed {
    background: #0c2d48;
    font-family: 'Lato', sans-serif;
    color: #FDFCFB;
    text-align: center;
    border-radius: 10px;
}

form {
    width: 80%;
    margin: 0.5em auto;
}

.revue-header {
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-top: 0.5em;
    padding-bottom: 1em;
}

.revue-description {
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 1.3em;
    margin: -2px 0 45px;
}

.revue-input {
    display: flex;
    align-items: center;
    padding-bottom: 2em;
}

.button {
    height: 44px;
    border: none;
}

#member_email {
    width: 65%;
    font-size: 14px;
    background: #FDFCFB;
    font-family: inherit;
    color: #737373;
    letter-spacing: 1px;
    text-indent: 5%;
    border-radius: 5px 0 0 5px;
}

#member_submit {
    width: 35%;
    height: 46px;
    font-size: 14px;
    background: #2e8bc0;
    font-family: inherit;
    font-weight: bold;
    color: inherit;
    letter-spacing: 1px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background .3s ease-in-out;
}

#member_submit:hover {
    background: #d45d7d;
}

input:focus {
    outline: none;
    outline: 2px solid #E86C8D;
    box-shadow: 0 0 2px #E86C8D;
}
Once that’s done, all we have to do is to add the partials where we want the box to show up.
For example, I want the box to show up at the bottom of every blog post. So we need to add this partial:
{{ partial "newsletter_signup.html" . }}
To just below the blog post on:
site/themes/cocoa-eh/layouts/blog/single.html
That’s it. Just run the server and verify that it works!
 

© Victor Augusteo 2021 - 2024