Progressive mailchimp subscription on Netlify
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
MAILCHIMP_API_KEY="...-us19" | |
MAILCHIMP_LIST_ID="..." |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
}); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
I'm trying to deploy this on Netlify and running into an error: "SyntaxError: Cannot use import statement outside a module" with the form-handler.js. From what I understand this means that my build is not transpiled using netlify-lambda.
What does your netlify.toml look like for this gist?
@dejardine changing it to const { parse } = require('querystring');
should work without having to transpile the code
This is great! Thanks! I wonder how you would go about handling errors?
Currently, when submitting test@test.com
or an already subscribed email address I get this in the browser console:
POST http://localhost:8888/.netlify/functions/form-handler 500 (Internal Server Error)
VM4085:1 Uncaught (in promise) SyntaxError: Unexpected token T in JSON at position 0
And, a timeout when viewing the logs when netlify dev
is running: Task timed out after 10.00 seconds
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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!