Becoming a Chimp
What are you talking about?
Okay so I am not actually becoming a chimp (yet). This was more of a reference towards the implementation of Mailchimp that I did earlier today. Since this was a first timer for me, I figured I would write about my experiences and how good/bad it went.
So, in case you don't know, Mailchimp is an all-in-one integrated marketing platform for small businesses. And since my portfolio following is definitely small, I figured it could help. Mainly because I wanted to experiment with a "subscribe" form, which would then allow users to get email notifications and stay up to date with my posts/articles. Sounds cool and very original, right?😂
Where do I start?
So as anyone in the 21st century would do, I googled for a Gatsby solution. And boom, it only took one or two links to find this post about how this could easily be done with a Netlify, Gatsby and Mailchimp solution. And luckily for me, I was already using Gatsby and Netlify!
I quickly noticed that this post was explaining a lot more than I needed since I already knew how to create my own form and already had my website deployed on Netlify. Because of this, I could just search for the information that I needed. Being the Mailchimp implementation.
And guess what, this did not even take much extra effort at all. What we needed to do was:
  • Add the gatsby-plugin-mailchimp plugin
  • Pass your fields to the import of that plugin (in my case, only an email) in your submit function
And boom! that's it! The core functionality is working!
So what did I do?
Of course, I did not need to do only those two things as that would be a very plain and boring form.
My initial goal was to create a subscribe form, which I wanted to add to the footer component. Unfortunately, this one had be made from scratch, as extending the already implemented basic form would cause too much rework and make the component less manageable.
So I created a new component on Contentful and in my frontend project called FormSubscribe. I would then add support for this component in both my Contentful and frontend footer. This did not come without restyling the whole footer though, as this component was very minimalistic and not prepared for a form.
Final steps
With the whole footer restyling out of the way, there was one fase left, configuring Mailchimp.
This step was a bit more complex then I thought, as this required me to create an RSS feed (which is a bit of a struggle to create as you have to restart your server for changes to come through) and make sure the email template was looking somewhat decent (as you can see by the image next to this section, it did not really work out).
I might have been doing some stuff wrong, but hell was styling that email template annoying. After playing around with it for a short while I managed to somewhat come up with a solution but it was far from an ideal solution. I ended up using a combination of the RSS encoded field and custom styling in the code of the email template generator.
Maybe the platform already has RSS feed-based templates which would automatically fill in all the latest RSS feed data inside your email template but unfortunately, I did not find it and had to create my own solution.
Besides this, I also had to create support for a Privacy Policy page, as Mailchimp will have the subscribed email addresses.
The whole integration of Mailchimp went very well, as most of my time was actually spend designing the form instead of integrating. However, the email template creation process was a bit more of a struggle. Probably because I did not search/find the right resources.
I will definitely get back to this in the future as a more optimal email template would be ideal. So if you by any chance have experience with Mailchimp email templates, make sure to let me know!
*edit: After some more digging I found RSS feed block templates which do the job just fine!
Want to have a chat or create an awesome website together? Feel free to contact me!
+32 494 35 04 21

Jonathan Lauwers
Web developer

Do not miss any new posts!

By clicking "subscribe", you agree to our privacy policy