Home › Blog › How to Add an Email Newsletter Signup to Your Jekyll Site
Tutorial

How to Add an Email Newsletter Signup to Your Jekyll Site

Add a working email newsletter signup form to Jekyll — using Mailchimp, ConvertKit, Buttondown, or Netlify Forms. Setup guides, embedded forms, and popup options.

Updated 7 min read
How to Add an Email Newsletter Signup to Your Jekyll Site

Building an email list is one of the highest-value things you can do for a content site — owned audience, no algorithm dependency. Jekyll doesn’t have a built-in signup form, but connecting to an email service is straightforward. This guide covers the four best options.

Which Email Service to Use

  Mailchimp ConvertKit Buttondown Netlify Forms
Free plan 500 contacts 1,000 subscribers 100 subscribers 100 submissions/mo
Price after free $13+/month $25+/month $9/month $19+/month
API/embed forms Yes Yes Yes Yes
Automations Yes Excellent Basic No
Best for General blogs Creator businesses Developers/indie Simple capture only

Recommendation: Buttondown for new newsletters (simple, developer-friendly, affordable). ConvertKit if you plan to sell products or courses. Mailchimp if you need a free plan for a large list.

Option 1: Mailchimp Embedded Form

Step 1: Get Your Embed Code

  1. Log in to Mailchimp
  2. Go to Audience → Signup forms → Embedded forms
  3. Choose Unstyled (you’ll apply your own CSS)
  4. Copy the generated HTML

It looks something like:

<form action="https://yourdomain.us1.list-manage.com/subscribe/post?u=XXXX&amp;id=YYYY" 
      method="post" target="_blank">
  <input type="email" name="EMAIL" placeholder="Your email address" required>
  <input type="submit" value="Subscribe">
  <!-- Mailchimp bot protection — do not remove -->
  <div style="position: absolute; left: -5000px;" aria-hidden="true">
    <input type="text" name="b_XXXX_YYYY" tabindex="-1" value="">
  </div>
</form>

Step 2: Create a Newsletter Include

Save as _includes/newsletter.html:

<div class="newsletter-signup">
  <h3>Stay in the loop</h3>
  <p>Get new posts and Jekyll tips delivered to your inbox.</p>
  
  <form action="YOUR_MAILCHIMP_ACTION_URL" method="post" 
        target="_blank" class="newsletter-form" id="newsletter-form">
    <div class="newsletter-form__fields">
      <input type="email" name="EMAIL" placeholder="your@email.com" 
             required class="newsletter-form__input">
      <button type="submit" class="btn btn--primary">Subscribe</button>
    </div>
    <!-- Mailchimp bot protection -->
    <div style="position: absolute; left: -5000px;" aria-hidden="true">
      <input type="text" name="b_XXXX_YYYY" tabindex="-1" value="">
    </div>
  </form>
  
  <p class="newsletter-form__note">No spam. Unsubscribe anytime.</p>
</div>

Step 3: Add to Your Layouts

At the bottom of posts (_layouts/post.html):


{% include newsletter.html %}

Or in your sidebar:


{% include sidebar/newsletter.html %}

Option 2: ConvertKit Inline Form

ConvertKit generates clean embed code that’s easy to style.

Step 1: Create a Form in ConvertKit

  1. In ConvertKit, go to Landing Pages & Forms → Create New → Form
  2. Choose Inline type
  3. Customise the fields
  4. Click Embed → copy the HTML embed code

Step 2: Use the Embed or Build Your Own

ConvertKit’s hosted form has an endpoint you can post to directly:

<form action="https://app.convertkit.com/forms/FORM_ID/subscriptions" 
      method="post" class="newsletter-form">
  <input type="text" name="fields[first_name]" placeholder="First name (optional)">
  <input type="email" name="email_address" placeholder="your@email.com" required>
  <button type="submit">Subscribe</button>
</form>

Replace FORM_ID with your ConvertKit form ID (found in the form’s embed code).

Option 3: Buttondown (Developer-Friendly)

Buttondown is the simplest option for developers — clean API, great plain-text email support, and a very reasonable pricing model.

Embed Form

<form action="https://buttondown.email/api/emails/embed-subscribe/YOUR_USERNAME"
      method="post" target="popupwindow"
      onsubmit="window.open('https://buttondown.email/YOUR_USERNAME', 'popupwindow')"
      class="newsletter-form">
  <input type="email" name="email" placeholder="your@email.com" required>
  <button type="submit">Subscribe</button>
</form>

Replace YOUR_USERNAME with your Buttondown username. That’s the entire setup.

Option 4: Custom Form with Netlify Forms

If you’re on Netlify and want to collect emails without a third-party service, Netlify Forms can capture signups and forward them via email or webhook.

<form name="newsletter" method="POST" data-netlify="true" class="newsletter-form">
  <input type="hidden" name="form-name" value="newsletter">
  <input type="email" name="email" placeholder="your@email.com" required>
  <button type="submit">Subscribe</button>
</form>

Limitation: Netlify Forms doesn’t send emails to subscribers — you’d need to export the list and use an email tool separately. Good for building a waitlist or early access list, not for an ongoing newsletter.

Styling the Signup Form

// _sass/components/_newsletter.scss

.newsletter-signup {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  margin: 3rem 0;

  h3 {
    margin-top: 0;
    font-size: 1.25rem;
  }

  p {
    color: var(--text-muted);
    margin-bottom: 1.25rem;
  }
}

.newsletter-form__fields {
  display: flex;
  gap: 0.5rem;
  max-width: 420px;
  margin: 0 auto;

  @media (max-width: 480px) {
    flex-direction: column;
  }
}

.newsletter-form__input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 1rem;
  background: var(--bg-color);
  color: var(--text-color);

  &:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  }
}

.newsletter-form__note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
  margin-bottom: 0;
}

Where to Place Newsletter Signups

For the best conversion, add signups in multiple places:

After post content — readers who finished the post are most likely to subscribe. This is the highest-converting placement.

Mid-post (after 3–4 paragraphs) — catches readers before they leave.

Sidebar widget — always visible on desktop.

Homepage — dedicated section below the fold.

In your footer — catches users who scroll to the bottom.


<!-- In _layouts/post.html, after content -->
<div class="post-newsletter">
  {% include newsletter.html %}
</div>

Measuring Signup Rates

A healthy newsletter signup rate for a blog is 1–3% of visitors. Track it by:

  1. Setting up a thank-you page redirect after signup
  2. Adding a Google Analytics goal for visits to /thank-you/
  3. Alternatively, use ConvertKit or Mailchimp’s built-in form analytics

Most email services show total subscribers and form conversion rates in their dashboard.

An email list is the most resilient audience you can build. Unlike social media followers or search traffic, your subscribers are yours — algorithm changes don’t affect them.

Browse Jekyll themes on JekyllHub — several themes include pre-styled newsletter signup sections.

jekyll newsletter mailchimp jekyll convertkit jekyll jekyll email signup static site newsletter
Share LinkedIn