Integrating a newsletter signup form into your Jekyll website can enhance your connection with visitors and grow your email list. Using the Mailchimp API makes this process straightforward and customizable. This guide walks you through adding a Mailchimp newsletter signup form to your Jekyll site.
Prerequisites
- A Mailchimp account with an active audience list
- Basic knowledge of Jekyll and HTML
- Access to your Jekyll site's code files
Step 1: Get Your Mailchimp API Key and List ID
Log in to your Mailchimp account. Navigate to Account > Extras > API keys to generate or find your API key. Then, go to your Audience dashboard, select your list, and find the List ID under Settings > Audience name and defaults.
Step 2: Create a Signup Form
In your Jekyll site, create a new file or edit an existing page where you want the signup form to appear. Use the following HTML form as a template:
Note: For security, it's recommended to handle API requests via a server-side script or a third-party service, as exposing your API key directly in HTML is insecure.
Here's a simple form that captures email addresses:
<form id="subscribe-form">
<input type="email" id="email" placeholder="Your email" required>
<button type="submit">Subscribe</button>
</form>
Step 3: Add JavaScript to Handle Submissions
Include the following JavaScript to process the form submission and send data to Mailchimp. Use your API key and List ID in the script:
<script>
document.getElementById('subscribe-form').addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('email').value;
fetch('https://
method: 'POST',
headers: {
'Authorization': 'apikey
'Content-Type': 'application/json'
},
body: JSON.stringify({
email_address: email,
status: 'subscribed'
})
})
.then(response => response.json())
.then(data => {
alert('Thank you for subscribing!');
})
.catch(error => {
alert('Oops! Something went wrong. Please try again.');
});
});
Step 4: Final Tips
Always keep your API key secure. For production sites, consider creating a server-side script to handle API requests safely. You can also use third-party services like Zapier to connect your form without exposing sensitive data.
Test your form thoroughly to ensure it works correctly and subscribes users to your Mailchimp list. With these steps, you can effectively add a newsletter signup to your Jekyll site and grow your email community.