While working on a side-project, and wanting and needing a mailing list for it, my partner Ben and I went straight to the Mailchimp signup form area where we could “customize” and extract the bare bones code for it. Prepped and ready to add some styling, we pasted their default code into the editor, and quickly realized Mailchimp’s code doesn’t create a horizontal (in-line) signup form by default.
It does this...
And that's fine, at least for people that want a subscription field where the input and submit button are positioned beneath each other. But the big problem about this situation is that not everyone wants that, and it’s very difficult for people who aren’t proficient enough in code to change the layout – even if they wanted to. There is no copy and paste easy solution for them on Mailchimp (or any other mailing list service).
The final result was this...
Since both Ben and I ran into the same problem several times in the past, we decided to fix it for ourselves once and for all and create a (responsive) code snippet that we could reuse whenever need, instead of fiddling around with the Mailchimp code every single time.
Assuming other people have the need and may face the same problems, we created a CodePen snippet all you fine folks can use and share.
It’s also on Github. So if you have a more efficient and clean way to code that form up, be sure to open a pull request and we’ll merge.
Note: Be sure to replace my mailing list URL with your own. Otherwise, I'll be thanking you for all of your subscribers.
If you dig this, use it or think it will be useful to others, share it! Want to chat with us? We’re always tweeting @imcatnoone & @blehnert.