Easily collect email signups using MailChimp in your Vue projects.
# npmnpm i vue-mailchimp-email-signup-form# yarnyarn add vue-mailchimp-email-signup-form
Or you can include it through the browser at the bottom of your page, along with the css at the top of the page:
<!--Please note if you're using the browser method you're going to want toadjust the version number as needed. The number given here is just aninitial version.-->
// css import for when you want to import the component css into your css// file/files;
// Here's an example of installing the component globally;Vue;
This is just a really simple component that let's you use MailChimp's awesome email signup form but with a little bit more of a modern style. Normally for a component this simple I wouldn't really think to share it, but it ends up being really nice to use in things like Gridsome sites where you really don't want to bring a backend anywhere near your site. It's super easy to use - just follow the steps below to generate the
url prop you need to pass to the component.
Go to your MailChimp admin. Click on
Signup Form. Now, choose your audience, and stay on the
Embedded form option and click
On the next screen, you'll see some demos for some embedded forms MailChip is offering. We don't want those - but we do want to
url they bring. Go into the form and grab the
url from the
action attribute. For me, this looks something like the following:
This may look different in your case. Make sure you replace
& with an actual
& if it gets copied like that.
That's it! Just add an
title, and an optional
subtitle and you're off.
You can see this form in action on my blog.
I looked into using the MailChimp API option, but that is not going to work from a purely static-type of site. So, while this does have your users leave the page, it ends up being a great option because you really don't have to do anything with any backend at all. Just make sure you have the proper site settings set up so it redirects users back to your blog or whatever. You do this on MailChimp's side.
|elementId||String||Yes||A unique string form your element.|
|url||String||Yes||The particular form
|title||String||Yes||A title for your signup form.|
|subtitle||String||No||A subtitle for your signup form.|
# install dependenciesnpm install# serve with hot reload and storybooknpm run storybook# run the testsnpm run test# build everything and run testsnpm run build
Go ahead and fork the project! Submit an issue if needed. Have fun!
Thank you to MailChimp.