Create a Subscription Form from Scratch using HTML, CSS and MailChimp

Create a cool MailChimp subscription form using only HTML and CSS. All you need is a MailChimp account and VS Code.

Download Project files:
*Remember to replace the MailChimp code by your own.

Create a MailChimp Account:

Download the background image by Jeremy Bishop:

The editor is called Visual Studio Code and is free. Look for the Live Share extension to share your environment with friends.

I’m using Browsersync for live reloading. Every time you save the file it will automatically reload. Go here to learn more.

Skip to the tutorial: 3:00

DevTips is a show for YOU who want to be inspired 👍 and learn 🖖 about programming. Hosted by David and MPJ - two notorious bug generators 💖 and teachers 🤗, and Guest Hosted by Jay from IEatWebsites during MPJ's long term hiatus from video creation. Exploring code together and learning programming along the way - yay!

Follow along with Jay on his other YouTube channel, IEatWebsites:

DevTips has a discord server called Keep On Hacking, check it out!

[LittleMusicBoxes]

(Travis here :) Jay!!! Glad to see you hacking!

[lisanx]

Love this instructor. Love that he lays out everything first and then works from the layout

[wildstyleradio]

Dude You Are The Man! i have been looking everywhere on youtube for something like this
you are the man best video ever!

[allaboutgames]

Amazing stuff bro you just saved me a lot of stress

[valensnetwork]

After coding or embedding of the codes, so whenever you post new features on your website, it gonna be sent to the subscribers? Because I do not think that there is any link that the chimp has to my website. Pls if so tell me sir, I appreciate your works so far, thanks.

[VitoOnYoutube]

Hi Jay, thank you for the nice tutorial 👏🏻
Do you know whether MailChimp provides a validation script in vanilla JS? It looks like this one is in jQuery.

[glassbyheather]

Great tutorial. Is there a way to automatically assign a MailChimp tag within the signup form code? Also, can the MailChimp success message text be changed? Thanks!

[kapkoder]

My subscribe button wont go outside the form background even with the same negative margin you had... i'm so frustrated because i want the same style

[johnpapadopoulos]

Hello, I want to connect Mailchimp with my website..I can find the code but then I do not know where to put it and how..Could anyone help me please? The same problem with sign up forms. Thanks

[keerthanaanandan]

What to do if we want to open the next html page after the user submits the form

[Chris-gzie]

Is there a way to do this with a modal popup form

[adamdipinto]

When I inserted the Mailchimp code, I found that the validation (email, names, etc) was not appearing and that when I selected subscribed, I was redirected to a specific Mailchimp signup page. Any suggestions on how to make the validation and subscription work within the page like shown in the video?

[mytiger]

How to remove placeholders in MailChimp?

[valensnetwork]

And again, I just want to ask for a favour. Pls can you help me with a link to csharp language (I make use of c# lang) that would help me to create this too because I want everything thing to be displaying in my database and not in my chimp dashboard. Pls sir.

[cristianrosescu]

Very difficult to see what’s happening on a smartphone. The host forgot to zoom in

[joshuasalazar]

great video but im having a problem with validation script goddamn mailchimp