↓Skip to main content

Add Newsletter Signup Form to Hugo Website

·2 mins

You have a Hugo website. You have a newsletter using a service like Beehiiv, ConvertKit, or MailerLite. You want to add a form to your site for people to subscribe to your newsletter? How do you do that?

Adding a newsletter signup form to a Hugo website requires the following steps:

  • Create a partial for the form.
  • Copy the form’s HTML to the partial.
  • Call the partial in Hugo.

Create a Partial #

A partial is a snippet of HTML code that you can easily add to your site. Newsletter signup forms contain a lot of HTML code. It is much easier to create a partial for the form and add the partial in Hugo than to copy and paste the form HTML.

To create a partial, go to the layout folder of your Hugo project and create a partials folder. Add an HTML file to the partials folder. I’m going to use the name newsletter-form.html for this article. You can name the file whatever you want.

Copy the Form’s HTML to the Partial #

Sign in to your newsletter provider’s site and access the forms for your newsletter. The form should provide a way to get its HTML code. Usually you can access the HTML by viewing or publishing the form.

Copy the HTML. Go to the file for your partial, and paste the HTML.

Call the Partial #

Add the following code where you want the form to appear:

{{ partial "newsletter-form.html" . }}

Many sites like to place the signup form at the end of every blog post. To do this, you will have to call the partial in your theme’s single.html file. The single.html file controls what appears when someone reads a blog post on your site.

Go to the folder for your theme. Inside that folder is a layouts folder. Go there. Go to the _default folder. Inside that folder is the single.html file. Open it.

You should see the following partial call in the HTML file:

{{ .Content }}

This partial call displays the content of your post. Add the call to your partial after the .Content call.

{{ .Content }}
{{ partial "newsletter-form.html" . }}

The form should appear at the end of the post.