[{"data":1,"prerenderedAt":915},["ShallowReactive",2],{"how-to-add-email-signup-form-to-nuxt-site-with-mailchimp":3},{"id":4,"title":5,"body":6,"comments":772,"date":900,"description":12,"draft":901,"extension":902,"external":903,"image":904,"meta":905,"navigation":772,"path":907,"seo":908,"stem":909,"tags":910,"__hash__":914},"blog/2020/10/10/how-to-add-email-signup-form-to-nuxt-site-with-mailchimp.md","How to add an email signup form to a Nuxt site with MailChimp",{"type":7,"value":8,"toc":891},"minimark",[9,13,18,21,34,38,41,85,88,92,103,113,116,126,133,154,161,780,783,787,793,797,800,803,808,818,821,830,837,851,855,869,873,887],[10,11,12],"p",{},"This is a guide for setting up a MailChimp-powered newsletter signup form on a static Nuxt site hosted on GitHub Pages. I wanted to implement this on my personal blog to grow a mailing list so I can update readers when I puslish a new blog article. I haven't done too much work with MailChimp before, but I've definitely subscribed to plenty of MailChimp mailing lists.",[14,15,17],"h2",{"id":16},"goals","Goals",[10,19,20],{},"I'm hoping to acheive some of the following:",[22,23,24,28,31],"ul",{},[25,26,27],"li",{},"Build a list of emails from people who visit my site and want get",[25,29,30],{},"Include a simple newletter signup form (Vue) component in the Footer of my site",[25,32,33],{},"Send customized emails (campaigns) to a mailing list that I can track",[14,35,37],{"id":36},"questions","Questions",[10,39,40],{},"Here are some of the questions (and answers) that I had going into this:",[22,42,43,51,66,71,74,80],{},[25,44,45,46,50],{},"Do I need to use the MailChimp API or MailChimp API keys? (",[47,48,49],"strong",{},"No",")",[25,52,53,54,57,58,62,63,50],{},"Is ",[47,55,56],{},"Double Opt-In"," possible with a static GitHub pages site hosted on a ",[59,60,61],"code",{},"\u003Cusernme>.github.io"," subdomain? (",[47,64,65],{},"Yes",[25,67,68,69,50],{},"What is the signup flow? Will a new subscriber be sent to a MailChimp page first, and then back to my site? (",[47,70,65],{},[25,72,73],{},"How do I setup a \"Thank you\" page to show users after they subscribe?",[25,75,76,77,50],{},"How much will this cost? (",[47,78,79],{},"Free up to 2,000 subscribers",[25,81,82,83,50],{},"Should I create a new campaign for each new blog post email update I send out? (",[47,84,65],{},[10,86,87],{},"I'll touch on these questions as I describe how to set things up.",[14,89,91],{"id":90},"creating-the-form","Creating the form",[10,93,94,95,98,99,102],{},"Under the ",[59,96,97],{},"Audience > Signup forms"," menu, I selected the ",[59,100,101],{},"Embedded Forms"," option:",[104,105,110],"pre",{"className":106,"code":108,"language":109},[107],"language-text","Embedded forms\nGenerate HTML code to embed in your site or blog to collect signups.\n","text",[59,111,108],{"__ignoreMap":112},"",[10,114,115],{},"Most of the MailChimp Admin that I have been using seems to have 4 different menus: 2 vertical menus and 2 horizontal.",[10,117,94,118,121,122,125],{},[59,119,120],{},"Embedded forms"," menu, I selected ",[59,123,124],{},"Unstyled"," since I want to add my own Tailwind CSS classes to keep the style of my signup form consistent with the different color schemes available on my site.",[10,127,128,129,132],{},"I'll start with an Unstyled Embedded form. Let's go through the ",[59,130,131],{},"Form options",":",[22,134,135,141,151],{},[25,136,137,140],{},[47,138,139],{},"Include form title"," (no, I'll add this myself)",[25,142,143,146,147,150],{},[47,144,145],{},"Show only required fields"," (For now, ",[59,148,149],{},"email"," is the only field I will be capturing. It can be helpful to include a First and/or Last name to avoid having your emails go to users' spam folders.)",[25,152,153],{},"Unselect everything else",[10,155,156,157,160],{},"Here's the HTML that we can use in our ",[59,158,159],{},"Subscribe.vue"," component:",[104,162,166],{"className":163,"code":164,"language":165,"meta":112,"style":112},"language-html shiki shiki-themes github-light github-dark monokai","    \u003C!-- Begin Mailchimp Signup Form -->\n    \u003Cdiv id=\"mc_embed_signup\">\n      \u003Cform\n        action=\"https://github.us2.list-manage.com/subscribe/post?u=43a795784ca963e25903a0da6&id=9937fe4fc5\"\n        method=\"post\"\n        id=\"mc-embedded-subscribe-form\"\n        name=\"mc-embedded-subscribe-form\"\n        class=\"validate\"\n        target=\"_blank\"\n        novalidate\n      >\n        \u003Cdiv id=\"mc_embed_signup_scroll\">\n          \u003Cdiv class=\"mc-field-group\">\n            \u003C!-- \u003Clabel for=\"mce-EMAIL\">Email Address \u003C/label> -->\n            \u003C!-- Added placeholder -->\n            \u003Cinput\n              type=\"email\"\n              value=\"\"\n              name=\"EMAIL\"\n              class=\"required email\"\n              id=\"mce-EMAIL\"\n              placeholder=\"Enter your email address\"\n            />\n          \u003C/div>\n          \u003Cdiv id=\"mce-responses\" class=\"clear\">\n            \u003Cdiv\n              class=\"response\"\n              id=\"mce-error-response\"\n              style=\"display: none\"\n            >\u003C/div>\n            \u003Cdiv\n              class=\"response\"\n              id=\"mce-success-response\"\n              style=\"display: none\"\n            >\u003C/div>\n          \u003C/div>\n          \u003C!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->\n          \u003Cdiv style=\"position: absolute; left: -5000px\" aria-hidden=\"true\">\n            \u003Cinput\n              type=\"text\"\n              name=\"b_43a795784ca963e25903a0da6_9937fe4fc5\"\n              tabindex=\"-1\"\n              value=\"\"\n            />\n          \u003C/div>\n          \u003Cdiv class=\"clear\">\n            \u003Cinput\n              type=\"submit\"\n              value=\"Subscribe\"\n              name=\"subscribe\"\n              id=\"mc-embedded-subscribe\"\n              class=\"button\"\n            />\n          \u003C/div>\n        \u003C/div>\n      \u003C/form>\n    \u003C/div>\n\n    \u003C!--End mc_embed_signup-->\n","html",[59,167,168,177,202,211,229,240,251,261,272,283,289,295,312,330,336,342,351,362,373,384,395,406,417,423,433,456,464,474,484,495,505,512,521,531,540,549,558,564,589,596,606,616,627,636,641,650,665,672,682,692,702,712,722,727,736,746,757,767,774],{"__ignoreMap":112},[169,170,173],"span",{"class":171,"line":172},"line",1,[169,174,176],{"class":175},"s8-w5","    \u003C!-- Begin Mailchimp Signup Form -->\n",[169,178,180,184,188,192,195,199],{"class":171,"line":179},2,[169,181,183],{"class":182},"sMOD_","    \u003C",[169,185,187],{"class":186},"s5clZ","div",[169,189,191],{"class":190},"srTi1"," id",[169,193,194],{"class":182},"=",[169,196,198],{"class":197},"sstjo","\"mc_embed_signup\"",[169,200,201],{"class":182},">\n",[169,203,205,208],{"class":171,"line":204},3,[169,206,207],{"class":182},"      \u003C",[169,209,210],{"class":186},"form\n",[169,212,214,217,219,222,226],{"class":171,"line":213},4,[169,215,216],{"class":190},"        action",[169,218,194],{"class":182},[169,220,221],{"class":197},"\"https://github.us2.list-manage.com/subscribe/post?u=43a795784ca963e25903a0da6",[169,223,225],{"class":224},"s7F3e","&",[169,227,228],{"class":197},"id=9937fe4fc5\"\n",[169,230,232,235,237],{"class":171,"line":231},5,[169,233,234],{"class":190},"        method",[169,236,194],{"class":182},[169,238,239],{"class":197},"\"post\"\n",[169,241,243,246,248],{"class":171,"line":242},6,[169,244,245],{"class":190},"        id",[169,247,194],{"class":182},[169,249,250],{"class":197},"\"mc-embedded-subscribe-form\"\n",[169,252,254,257,259],{"class":171,"line":253},7,[169,255,256],{"class":190},"        name",[169,258,194],{"class":182},[169,260,250],{"class":197},[169,262,264,267,269],{"class":171,"line":263},8,[169,265,266],{"class":190},"        class",[169,268,194],{"class":182},[169,270,271],{"class":197},"\"validate\"\n",[169,273,275,278,280],{"class":171,"line":274},9,[169,276,277],{"class":190},"        target",[169,279,194],{"class":182},[169,281,282],{"class":197},"\"_blank\"\n",[169,284,286],{"class":171,"line":285},10,[169,287,288],{"class":190},"        novalidate\n",[169,290,292],{"class":171,"line":291},11,[169,293,294],{"class":182},"      >\n",[169,296,298,301,303,305,307,310],{"class":171,"line":297},12,[169,299,300],{"class":182},"        \u003C",[169,302,187],{"class":186},[169,304,191],{"class":190},[169,306,194],{"class":182},[169,308,309],{"class":197},"\"mc_embed_signup_scroll\"",[169,311,201],{"class":182},[169,313,315,318,320,323,325,328],{"class":171,"line":314},13,[169,316,317],{"class":182},"          \u003C",[169,319,187],{"class":186},[169,321,322],{"class":190}," class",[169,324,194],{"class":182},[169,326,327],{"class":197},"\"mc-field-group\"",[169,329,201],{"class":182},[169,331,333],{"class":171,"line":332},14,[169,334,335],{"class":175},"            \u003C!-- \u003Clabel for=\"mce-EMAIL\">Email Address \u003C/label> -->\n",[169,337,339],{"class":171,"line":338},15,[169,340,341],{"class":175},"            \u003C!-- Added placeholder -->\n",[169,343,345,348],{"class":171,"line":344},16,[169,346,347],{"class":182},"            \u003C",[169,349,350],{"class":186},"input\n",[169,352,354,357,359],{"class":171,"line":353},17,[169,355,356],{"class":190},"              type",[169,358,194],{"class":182},[169,360,361],{"class":197},"\"email\"\n",[169,363,365,368,370],{"class":171,"line":364},18,[169,366,367],{"class":190},"              value",[169,369,194],{"class":182},[169,371,372],{"class":197},"\"\"\n",[169,374,376,379,381],{"class":171,"line":375},19,[169,377,378],{"class":190},"              name",[169,380,194],{"class":182},[169,382,383],{"class":197},"\"EMAIL\"\n",[169,385,387,390,392],{"class":171,"line":386},20,[169,388,389],{"class":190},"              class",[169,391,194],{"class":182},[169,393,394],{"class":197},"\"required email\"\n",[169,396,398,401,403],{"class":171,"line":397},21,[169,399,400],{"class":190},"              id",[169,402,194],{"class":182},[169,404,405],{"class":197},"\"mce-EMAIL\"\n",[169,407,409,412,414],{"class":171,"line":408},22,[169,410,411],{"class":190},"              placeholder",[169,413,194],{"class":182},[169,415,416],{"class":197},"\"Enter your email address\"\n",[169,418,420],{"class":171,"line":419},23,[169,421,422],{"class":182},"            />\n",[169,424,426,429,431],{"class":171,"line":425},24,[169,427,428],{"class":182},"          \u003C/",[169,430,187],{"class":186},[169,432,201],{"class":182},[169,434,436,438,440,442,444,447,449,451,454],{"class":171,"line":435},25,[169,437,317],{"class":182},[169,439,187],{"class":186},[169,441,191],{"class":190},[169,443,194],{"class":182},[169,445,446],{"class":197},"\"mce-responses\"",[169,448,322],{"class":190},[169,450,194],{"class":182},[169,452,453],{"class":197},"\"clear\"",[169,455,201],{"class":182},[169,457,459,461],{"class":171,"line":458},26,[169,460,347],{"class":182},[169,462,463],{"class":186},"div\n",[169,465,467,469,471],{"class":171,"line":466},27,[169,468,389],{"class":190},[169,470,194],{"class":182},[169,472,473],{"class":197},"\"response\"\n",[169,475,477,479,481],{"class":171,"line":476},28,[169,478,400],{"class":190},[169,480,194],{"class":182},[169,482,483],{"class":197},"\"mce-error-response\"\n",[169,485,487,490,492],{"class":171,"line":486},29,[169,488,489],{"class":190},"              style",[169,491,194],{"class":182},[169,493,494],{"class":197},"\"display: none\"\n",[169,496,498,501,503],{"class":171,"line":497},30,[169,499,500],{"class":182},"            >\u003C/",[169,502,187],{"class":186},[169,504,201],{"class":182},[169,506,508,510],{"class":171,"line":507},31,[169,509,347],{"class":182},[169,511,463],{"class":186},[169,513,515,517,519],{"class":171,"line":514},32,[169,516,389],{"class":190},[169,518,194],{"class":182},[169,520,473],{"class":197},[169,522,524,526,528],{"class":171,"line":523},33,[169,525,400],{"class":190},[169,527,194],{"class":182},[169,529,530],{"class":197},"\"mce-success-response\"\n",[169,532,534,536,538],{"class":171,"line":533},34,[169,535,489],{"class":190},[169,537,194],{"class":182},[169,539,494],{"class":197},[169,541,543,545,547],{"class":171,"line":542},35,[169,544,500],{"class":182},[169,546,187],{"class":186},[169,548,201],{"class":182},[169,550,552,554,556],{"class":171,"line":551},36,[169,553,428],{"class":182},[169,555,187],{"class":186},[169,557,201],{"class":182},[169,559,561],{"class":171,"line":560},37,[169,562,563],{"class":175},"          \u003C!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->\n",[169,565,567,569,571,574,576,579,582,584,587],{"class":171,"line":566},38,[169,568,317],{"class":182},[169,570,187],{"class":186},[169,572,573],{"class":190}," style",[169,575,194],{"class":182},[169,577,578],{"class":197},"\"position: absolute; left: -5000px\"",[169,580,581],{"class":190}," aria-hidden",[169,583,194],{"class":182},[169,585,586],{"class":197},"\"true\"",[169,588,201],{"class":182},[169,590,592,594],{"class":171,"line":591},39,[169,593,347],{"class":182},[169,595,350],{"class":186},[169,597,599,601,603],{"class":171,"line":598},40,[169,600,356],{"class":190},[169,602,194],{"class":182},[169,604,605],{"class":197},"\"text\"\n",[169,607,609,611,613],{"class":171,"line":608},41,[169,610,378],{"class":190},[169,612,194],{"class":182},[169,614,615],{"class":197},"\"b_43a795784ca963e25903a0da6_9937fe4fc5\"\n",[169,617,619,622,624],{"class":171,"line":618},42,[169,620,621],{"class":190},"              tabindex",[169,623,194],{"class":182},[169,625,626],{"class":197},"\"-1\"\n",[169,628,630,632,634],{"class":171,"line":629},43,[169,631,367],{"class":190},[169,633,194],{"class":182},[169,635,372],{"class":197},[169,637,639],{"class":171,"line":638},44,[169,640,422],{"class":182},[169,642,644,646,648],{"class":171,"line":643},45,[169,645,428],{"class":182},[169,647,187],{"class":186},[169,649,201],{"class":182},[169,651,653,655,657,659,661,663],{"class":171,"line":652},46,[169,654,317],{"class":182},[169,656,187],{"class":186},[169,658,322],{"class":190},[169,660,194],{"class":182},[169,662,453],{"class":197},[169,664,201],{"class":182},[169,666,668,670],{"class":171,"line":667},47,[169,669,347],{"class":182},[169,671,350],{"class":186},[169,673,675,677,679],{"class":171,"line":674},48,[169,676,356],{"class":190},[169,678,194],{"class":182},[169,680,681],{"class":197},"\"submit\"\n",[169,683,685,687,689],{"class":171,"line":684},49,[169,686,367],{"class":190},[169,688,194],{"class":182},[169,690,691],{"class":197},"\"Subscribe\"\n",[169,693,695,697,699],{"class":171,"line":694},50,[169,696,378],{"class":190},[169,698,194],{"class":182},[169,700,701],{"class":197},"\"subscribe\"\n",[169,703,705,707,709],{"class":171,"line":704},51,[169,706,400],{"class":190},[169,708,194],{"class":182},[169,710,711],{"class":197},"\"mc-embedded-subscribe\"\n",[169,713,715,717,719],{"class":171,"line":714},52,[169,716,389],{"class":190},[169,718,194],{"class":182},[169,720,721],{"class":197},"\"button\"\n",[169,723,725],{"class":171,"line":724},53,[169,726,422],{"class":182},[169,728,730,732,734],{"class":171,"line":729},54,[169,731,428],{"class":182},[169,733,187],{"class":186},[169,735,201],{"class":182},[169,737,739,742,744],{"class":171,"line":738},55,[169,740,741],{"class":182},"        \u003C/",[169,743,187],{"class":186},[169,745,201],{"class":182},[169,747,749,752,755],{"class":171,"line":748},56,[169,750,751],{"class":182},"      \u003C/",[169,753,754],{"class":186},"form",[169,756,201],{"class":182},[169,758,760,763,765],{"class":171,"line":759},57,[169,761,762],{"class":182},"    \u003C/",[169,764,187],{"class":186},[169,766,201],{"class":182},[169,768,770],{"class":171,"line":769},58,[169,771,773],{"emptyLinePlaceholder":772},true,"\n",[169,775,777],{"class":171,"line":776},59,[169,778,779],{"class":175},"    \u003C!--End mc_embed_signup-->\n",[10,781,782],{},"Now we can create a Vue component that contains the HTML form generated by the MailChimp admin. For now, just put the embed HTML in the template of a Vue component.",[14,784,786],{"id":785},"styling-the-form","Styling the form",[10,788,789,790,792],{},"Next you can add styles to the form. You can reference the ",[59,791,159],{}," file in the repo for this site to see how I have added styles using TailwindCSS.",[14,794,796],{"id":795},"settings","Settings",[10,798,799],{},"Next let's look at some settings around Double Opt-in.",[10,801,802],{},"To navigate to the page where these settings can be set, go to:",[10,804,805],{},[59,806,807],{},"Audience > Signup forms > Settings > Audience name and defaults",[10,809,810,811,814,815],{},"In the ",[59,812,813],{},"Form Settings"," of this menu, you can select ",[59,816,817],{},"Enable double opt-in",[10,819,820],{},"Next, let's configure the redirect to a custom \"Thank you for subscribing page\" on our static site. Go to",[10,822,823,826,827],{},[59,824,825],{},"Audience > Signup forms > Signup forms"," and select ",[59,828,829],{},"Form builder",[10,831,832,833,836],{},"Select ",[47,834,835],{},"Signup thank you page"," from the dropdown menu and add a custom URL that you will show users when they first submit their email to the form.",[10,838,839,840,843,844,847,848],{},"Next, also on the ",[59,841,842],{},"Form Builder"," menu, select ",[47,845,846],{},"Confirmation thank you page"," from the dropdown menu and enter the URL of the page that you want to redirect to after a user confirms their subscription where it says: ",[59,849,850],{},"Instead of showing this thank you page, send subscribers to another URL",[14,852,854],{"id":853},"next-steps","Next Steps",[22,856,857,863,866],{},[25,858,859,862],{},[47,860,861],{},"Form validation",": we can validate that the user has entered a valid email address",[25,864,865],{},"GDPR considerations",[25,867,868],{},"Captcha",[14,870,872],{"id":871},"resources","Resources",[22,874,875],{},[25,876,877,880,881],{},[47,878,879],{},"Single vs Double Opt-in",": ",[882,883,884],"a",{"href":884,"rel":885},"https://www.sendinblue.com/blog/double-opt-in/",[886],"nofollow",[888,889,890],"style",{},"html pre.shiki code .s8-w5, html code.shiki .s8-w5{--shiki-default:#6A737D;--shiki-dark:#6A737D;--shiki-sepia:#88846F}html pre.shiki code .sMOD_, html code.shiki .sMOD_{--shiki-default:#24292E;--shiki-dark:#E1E4E8;--shiki-sepia:#F8F8F2}html pre.shiki code .s5clZ, html code.shiki .s5clZ{--shiki-default:#22863A;--shiki-dark:#85E89D;--shiki-sepia:#F92672}html pre.shiki code .srTi1, html code.shiki .srTi1{--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-sepia:#A6E22E}html pre.shiki code .sstjo, html code.shiki .sstjo{--shiki-default:#032F62;--shiki-dark:#9ECBFF;--shiki-sepia:#E6DB74}html pre.shiki code .s7F3e, html code.shiki .s7F3e{--shiki-default:#005CC5;--shiki-dark:#79B8FF;--shiki-sepia:#AE81FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}html.sepia .shiki span {color: var(--shiki-sepia);background: var(--shiki-sepia-bg);font-style: var(--shiki-sepia-font-style);font-weight: var(--shiki-sepia-font-weight);text-decoration: var(--shiki-sepia-text-decoration);}",{"title":112,"searchDepth":179,"depth":179,"links":892},[893,894,895,896,897,898,899],{"id":16,"depth":179,"text":17},{"id":36,"depth":179,"text":37},{"id":90,"depth":179,"text":91},{"id":785,"depth":179,"text":786},{"id":795,"depth":179,"text":796},{"id":853,"depth":179,"text":854},{"id":871,"depth":179,"text":872},"2020-10-11",false,"md",null,"/static/chimps.webp",{"layout":906},"post","/2020/10/10/how-to-add-email-signup-form-to-nuxt-site-with-mailchimp",{"title":5,"description":12},"2020/10/10/how-to-add-email-signup-form-to-nuxt-site-with-mailchimp",[911,912,913],"nuxt","mailchimp","vue","bKJURMF8UTq1rN598T2fpx1IxdSuuUIrSwtKwXlsZ8s",1774067628355]