Skip to content

Instantly share code, notes, and snippets.

@skatkov

skatkov/.env

Last active Jul 8, 2021
Embed
What would you like to do?
Progressive mailchimp subscription on Netlify
MAILCHIMP_API_KEY="...-us19"
MAILCHIMP_LIST_ID="..."
import { parse } from 'querystring'
const axios = require('axios');
const mailChimpAPI = process.env.MAILCHIMP_API_KEY;
const mailChimpListID = process.env.MAILCHIMP_LIST_ID;
exports.handler = (event, context, callback) => {
let body = {}
console.log(event)
try {
body = JSON.parse(event.body)
} catch (e) {
body = parse(event.body)
}
if (!body.email) {
console.log('missing email')
return callback(null, {
statusCode: 400,
body: JSON.stringify({
error: 'missing email'
})
})
}
if (!mailChimpAPI) {
console.log('missing mailChimpAPI key')
return callback(null, {
statusCode: 400,
body: JSON.stringify({
error: 'missing mailChimpAPI key'
})
})
}
if (!mailChimpListID) {
console.log('missing mailChimpListID key')
return callback(null, {
statusCode: 400,
body: JSON.stringify({
error: 'missing mailChimpListID key'
})
})
}
const data = {
email_address: body.email,
status: "pending",
merge_fields: {}
};
const subscriber = JSON.stringify(data);
console.log("Sending data to mailchimp", subscriber);
// Subscribe an email
axios(
{
method: 'post',
url: `https://us19.api.mailchimp.com/3.0/lists/${mailChimpListID}/members/`, //change region (us19) based on last values of ListId.
data: subscriber,
auth: {
username: 'apikey', // any value will work
password: mailChimpAPI
}
}
).then(function(response){
console.log(`status:${response.status}` )
console.log(`data:${response.data}` )
console.log(`headers:${response.headers}` )
if (response.headers['content-type'] === 'application/x-www-form-urlencoded') {
// Do redirect for non JS enabled browsers
return callback(null, {
statusCode: 302,
headers: {
Location: '/thanks.html',
'Cache-Control': 'no-cache',
},
body: JSON.stringify({})
});
}
// Return data to AJAX request
return callback(null, {
statusCode: 200,
body: JSON.stringify({ emailAdded: true })
})
}).catch(function(error) {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
});
};
{
"scripts": {
"start": "netlify-lambda serve source/lambda",
"build": "netlify-lambda build source/lambda"
},
"dependencies": {
"axios": "^0.19.0",
"dotenv": "^8.1.0",
"netlify-lambda": "^1.6.3"
}
}
<div id="message"></div>
<form id="newsletter" class="subscribe" action="/.netlify/functions/form-handler" method="post">
<input type="email" id="inputEmail" name='email' placeholder="Enter email to subscribe for FREE" class="email" required autofocus>
<button class="button" type="submit">Subscribe</button>
</form>
<script>
var form = document.getElementById('newsletter');
form.addEventListener("submit", function(e) {
e.preventDefault();
email = document.getElementById('inputEmail').value;
submitEmail(email)
});
function submitEmail(email) {
fetch('/.netlify/functions/form-handler', {
method: 'post',
body: JSON.stringify({
email: email
})
}).then(function(response) {
return response.json();
}).then(function(data) {
console.log('data from function', data);
messageDiv = document.getElementById('message');
messageDiv.innerText = 'Confirmation email has been sent!'
});
};
</script>
@skatkov

This comment has been minimized.

Copy link
Owner Author

@skatkov skatkov commented Sep 22, 2019

This function was open source from https://www.fbacatalog.com project.
To find more details on this code and our porject -- read up dev.to community post https://dev.to/skatkov/jamstack-progressive-mailchimp-sign-up-form-with-netlify-13m3

Thanks for your interest!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment