Building a newsletter form with Quarto, Netlify and Zapier

One of the main reasons I started writing is that I love reading. Newsletters are a great way to curate content on the internet. I follow writers that I enjoy and stay up to date with their latest posts and the content they find interesting. In my view, this non-algorithmically-curated content is becoming more and more valuable.

To build a community around my website, I also decided to create a short newsletter to share my latest posts with readers and members of my professional network.

As you may have noticed in the previous articles on this topic, I am constantly looking for simple, aesthetically pleasing solutions to this type of problem. After some research, I decided to go with Mailchimp. Most newsletter platforms have a free tier under a certain number of users.

After creating an account, the question was how to integrate this into my website. There are many ways possible. I decided to use Netlify’s built-in form recognition component (documentation) along with Zapier to add a subscriber to the mailing list using the form’s input. This process was relatively simple.

I first built an HTML form component, as this was to appear at several places on my site. I added the netlify tag in the form definition:

<form name="newsletter" class="form-newsletter" netlify>
    <p>
      <input type="email" name="email" id="email" placeholder="Your email address" required>
    </p>
    <p>
      <button type="submit">Try it</button>
    </p>
  </form>

As I am not a CSS expert, I uploaded two pictures of newsletter forms I liked to GPT-4 and asked it to generate some styles. I then used these styles for other forms and buttons.

form {
  align-items: center;
  gap: 10px;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 8px;
}

.form-newsletter {
  display: flex;
}

@media only screen and (max-width: 600px) {
  .form-newsletter {
    flex-direction: column;
  }
}

input {
  flex: 1;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  box-sizing: border-box;
}

textarea {
  flex: 1;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  box-sizing: border-box;
  width: 50%;
}

button {
  padding: 15px 30px;
  background-color: #517699;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #2f4459;
}

Once you have built the form, make sure you set it up in the Form tab on your site configuration.

Mailchimp also offers the ability to build sign-up forms (Audience > Sign-up Forms) to which you could link on your website. This could be an alternative if you do not want to build this on your site or want to avoid the use of Zapier as an intermediary. I was not fully aware of this possibility when implementing the version described above, but still preferred keeping the users on the page.

Integrating with Zapier

Zapier is a workflow automation tool working with a free tier. You can create an account using Google and start creating ‘Zaps’, or automated workflows. The Zap you need for this use case is very simple.

You can drag two tools to the Zap you create (see image below):

1. Netlify form submission
2. Mailchimp Add/Update Subscriber

Sample Zap

Configure these tools through the Zapier UI and your newsletter form should be fully connected to your website. Test it out yourself to see what happens. I found the first newsletter subscription magical.

Final Thoughts

Congratulations on making it this far. I hope that this has helped you in building your blog. If you want to read more content like this (and on many other topics), subscribe to my newsletter 😉