Victor Augusteo

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
2. Change the color palette
3. 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!