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.
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
- Log in to Mailchimp
- Go to Audience → Signup forms → Embedded forms
- Choose Unstyled (you’ll apply your own CSS)
- Copy the generated HTML
It looks something like:
<form action="https://yourdomain.us1.list-manage.com/subscribe/post?u=XXXX&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
- In ConvertKit, go to Landing Pages & Forms → Create New → Form
- Choose Inline type
- Customise the fields
- 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:
- Setting up a thank-you page redirect after signup
- Adding a Google Analytics goal for visits to
/thank-you/ - 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.
AJAX signup with success/error feedback
The default form submit triggers a page redirect — either to Mailchimp’s hosted confirmation page or your own thank-you page. For a smoother experience, intercept the form submission with JavaScript and show inline feedback without navigating away.
// assets/js/newsletter.js
const form = document.getElementById('newsletter-form');
if (form) {
form.addEventListener('submit', async function(e) {
e.preventDefault();
const btn = form.querySelector('[type="submit"]');
const emailInput = form.querySelector('[type="email"]');
const email = emailInput.value;
btn.disabled = true;
btn.textContent = 'Subscribing…';
try {
const data = new FormData(form);
const response = await fetch(form.action, {
method: 'POST',
body: data,
headers: { 'Accept': 'application/json' }
});
if (response.ok) {
form.innerHTML = '<p class="newsletter-success">✓ You\'re subscribed! Check your inbox to confirm.</p>';
} else {
throw new Error('Submission failed');
}
} catch {
btn.disabled = false;
btn.textContent = 'Subscribe';
const errorMsg = document.createElement('p');
errorMsg.className = 'newsletter-error';
errorMsg.textContent = 'Something went wrong. Please try again.';
form.appendChild(errorMsg);
}
});
}
This pattern works with Buttondown’s embed endpoint (which returns JSON) and with Netlify Forms. Mailchimp’s embed endpoint does not support CORS for AJAX requests from third-party domains — for Mailchimp AJAX submissions, use their JSON-P API or a serverless proxy function.
The aria-live="polite" attribute on a status container ensures that screen reader users hear the success or error message after submission — add this to your newsletter include:
<div id="newsletter-status" aria-live="polite" class="sr-only"></div>
Double opt-in and GDPR considerations
Email marketing in the EU is regulated by GDPR, which requires unambiguous consent for marketing emails. Double opt-in — where the subscriber confirms their address via a confirmation link before being added to your list — satisfies this requirement and is the default in Mailchimp and ConvertKit.
Keep your signup form language clear about what subscribers are signing up for. “Subscribe to get new posts delivered to your inbox weekly” is better than vague language like “Join our community.” The description should match what you actually send.
For sites with European visitors, do not pre-tick a consent checkbox — active consent is required. The submit button itself (“Subscribe”) implies consent when the form clearly states what the subscription involves, so a separate checkbox is not always required, but the form copy must be unambiguous.
If you store form submissions in Netlify Forms rather than a dedicated email service, add a privacy policy link near the form. Netlify stores personal data (email addresses) on US servers, which is a data transfer consideration under GDPR. Most email services (Mailchimp, ConvertKit, Buttondown) handle this through their own privacy policies and standard contractual clauses.
Automated welcome sequences
The most valuable use of an email list is not the newsletter itself — it is the automated sequence that new subscribers receive in their first few days. A welcome sequence builds the relationship, delivers your best content, and converts subscribers into regular readers before they have a chance to forget who you are.
A simple three-email welcome sequence might be: email one (immediate) welcomes the subscriber and links to your three most popular posts; email two (day three) shares something more personal — your story, what you are building, or a behind-the-scenes perspective; email three (day seven) delivers a resource — a checklist, a template, or an exclusive guide — and sets expectations for the regular newsletter.
ConvertKit’s automation builder makes this straightforward: create a sequence, set the delays between emails, and connect it to your signup form. New subscribers automatically receive the sequence, then join the regular broadcast list. Mailchimp’s Customer Journeys feature provides equivalent functionality.
The welcome sequence pays for the subscription cost of your email service many times over in subscriber retention. People who receive a good welcome sequence are far less likely to unsubscribe immediately, and far more likely to open subsequent newsletters. Invest the time in writing it before you focus on anything else in your email marketing.
Growing your subscriber list
The signup form is the mechanism, but the list grows through the quality of what you offer. Readers subscribe when they trust that future emails will be as good as the content that made them want to subscribe in the first place. Publishing consistently — even just once or twice per month — and making every email worth reading is the foundation of a growing list.
Specific growth tactics that work reliably: prominently featuring a signup incentive (a free resource for new subscribers), cross-promoting your newsletter in other channels (Twitter/X, LinkedIn, relevant communities), and mentioning your newsletter within your most-trafficked posts. Guest writing for other newsletters with a byline that mentions your newsletter is highly effective but requires an existing audience to pitch to.
Content upgrades — bonus resources gated behind a signup — convert at dramatically higher rates than generic “subscribe” prompts. A post about Jekyll Sass architecture, with a downloadable SCSS starter kit available in exchange for an email address, converts many more readers than a generic newsletter prompt on the same page. The upgrade is specific to what the reader just read, making the signup offer immediately relevant.
Browse Jekyll themes on JekyllHub to find themes that include pre-designed newsletter sections, making it straightforward to implement these patterns without building them from scratch.
Owning your audience through email is a strategic advantage that becomes more valuable the longer you maintain it. Unlike social media followers who can be lost when a platform changes its algorithm or declines in popularity, email subscribers are yours — you can export the list, take it to any email provider, and reach them directly regardless of any external platform decisions. Starting your email list on day one, even when your audience is tiny, is the right call because the compounding growth of a list started early is far more valuable than a list started after your content is already established.
Choosing the right email service
The email service you choose matters less than starting. Mailchimp’s free tier works well until about 500 subscribers, at which point Buttondown or ConvertKit often represent better value for independent content creators. All three integrate with Jekyll through the same embed approach — a form posting to the provider’s endpoint. If you change services later, you update the form’s action URL and field names; the Jekyll implementation stays the same.
Whatever service you pick, configure a simple welcome email that arrives immediately after signup. First impressions in email carry as much weight as a homepage — a warm, well-written welcome email sets the tone for everything that follows and dramatically reduces unsubscribe rates in the first week. Spend twenty minutes writing that welcome email before you launch the signup form, and your list will be healthier for it from the very first subscriber.