Tutorial Part 1: Create an Opt-in Form
You already know you need an opt-in form if you want to take blogging and list-building seriously.
And since publishing my showcase of beautiful opt-in forms, many of you have asked me how to create a custom form for your own blogs.
So today I’ve created a 4 step tutorial just for you.
Tutorial Syllabus
- In Part 1, we’ll go over how to create an opt-in form using MailChimp.*
- In Part 2, we embed that form into our blogs.
- In Part 3, we’ll design our forms, then
- In Part 4, we’re going to style our embedded forms using CSS.
*Why MailChimp?
- Because I think…
- it’s super easy to use
- it’s WAY more robust than Feedburner
- it allows you to import a list if you already have one elsewhere (Aweber doesn’t allow this)
- and it’s free for quite a while (up to 2000 subscribers). Why start paying right away (ala Aweber or Constant Contact) when you can start free and see how it goes first?
Please note that the MailChimp link above is a referral link, which means if you sign up using that link, if and when you become a paying customer, I will receive a small commission. I would like you to know however that I am not referring MailChimp because of this, I am referring them explicitly for the reasons stated above and nothing more.
Since creating this tutorial, I have since switched over to ConvertKit (afflink). Why? Because I was frustrated with MailChimp’s inability to create multiple lists (without charging you double) and offer different content upgrades on different posts. ConvertKit costs more per month and do not have a free option, but if your list is growing and you’re paying anyway, I highly recommend switching over.
This tutorial will still apply to ConvertKit as you will have the ability to copy and paste the embed code from your forms into your sidebar.
Today and tomorrow is the easy stuff. Parts 3 and 4 are the hard parts! No really, it’s not hard and it’s going to be fun!
Part 1
Ok so first of all, why do we want to do this without a plugin?
If your blog is a self-hosted WordPress blog you may not realize that the more plugins you have installed, the longer it usually takes for your pages to load.
When I just want to add something to my site that doesn’t involve complicated functionality, I’d rather do it manually than install yet another page-bloating plugin.
By the way, this tutorial is not just for WordPress blogs, it’s for anyone!
My First Slideshare!
Yep this is my first one. I may have done a million things wrong, so please do let me know if you catch anything that doesn’t look or work right. Thanks!
Oh and if you’re reading this in an RSS reader or email, you’ll have to click to the article to view the Slideshare.
If for some reason you are having trouble viewing the Slideshare, follow this link to view it on the Slideshare website.
Part 2
Tune in tomorrow for Part 2 where I’ll show you how to quickly embed the form into your WordPress or Blogger blogs.
Top photo courtesy of Love from Ginger.
I’d love to hear what you think of this tutorial and of course if you have any questions, leave them below! I LOVE comments!
And won’t you please pin, tweet or share this if you found it useful?
Wow, perfect timing. I’m just starting a blog and playing around with my design first before launching. I’ve proudly designed everything myself and have limited as many plug-ins as possible because I love design and coding myself. But I was stuck on one very thing, designing an opt-in form. Seriously have been scouring the web for a good tutorial and have not found it, so I am so excited for this!! Can’t wait until the series is finished and btw the slide share isn’t working. Error code that something went wrong, so you might want to look into that.
Oh and one last thing, I totally LOL every time I read your newsletters and it asks if I’m getting too many emails from you. Seriously you’re blog is one of the few I can’t wait to read everything freshly posted on. Keep up the amazing work! 🙂
Alyssa, what kind words! I am so glad you are finding my posts so useful! Please please let me know if there’s anything you are ever searching for and can’t find. I’d be happy to come up with a post for it!
In fact, this post was bourne from many people asking me for it!
Thanks for letting me know about the Slideshare error. I have added a link it on the slideshare site in case it still doesn’t show up for you or anyone else. I tried viewing it in a couple of browsers and am not having problems, but i’ll look into it some more.
Can’t wait to see your design, please share it with me when you launch!
Oh my goodness! I just launched my first Mailchimp email newsletter this week and I really needed to know how to get this all organised. Perfect timing Marianne.
P.S. The photo looks awesome too!
Wow sounds like this article was really needed by a lot of people, so glad I decided to do it!
Hi Rach and thanks for stopping by, let me know if you have any questions.
And yes, that photo DOES look pretty awesome huh? I think I got it from someplace pretty cool 😉
Hi Marianne
I so need to learn how to do this and so much more. I will be coming by a lot. I already have Aweber but was thinking of cancelling.
So much to learn, it sometimes get a bit overwhelming for me.
Thanks again.
Blessings.
Elissa.
Hi Elissa! Thanks for coming over to say hi 🙂
I understand the overwhelm. It took me a long time to get my blog even launched at all, so pat yourself on the back for having launched already!
I know a lot of people like Aweber and I guess it has more features for when your blog gets bigger, but I don’t believe in paying much for services when you’re just getting started and not making any money yet.
Let me know if you have any questions along the way!
Hi Marianne,
Is the process pretty much the same for those of us who use Aweber? If so, I am eagerly awaiting steps three and four! 😉
Kim, YES! I was thinking I should have mentioned that!
But yes, steps 3 and 4 will pretty much be the same regardless of which subscribe form you’re using. I’ll be sure to add that into the tutorial as well.
Super!
I’m adding your post to my weekly wrap-up! Thanks a bunch for the tutorial! 😉
Thank you so much Kim!
Marianne
When I started my blog, I Googled my A** off looking for a tutorial like this. Well done!
I use a plugin now, but this is extremely helpful… especially for those who are just setting up. Really well done. 🙂
Hi Gary, thank you! I got so many people asking me about this, I figured why not show a (somewhat) quick and easy way to do this.
Hey, I didn’t know plugins caused slower page load times. Even though I don’t use MailChimp, I learned something important from Part 1, Marianne!
That’s great Bobbi! So glad when I can contribute even a little something to someone!
Well not all plugins will slow page load, but if you have a lot of javascript running, it can definitely slow down your pages. I just like to keep my plugins to a minimal.
This is brilliant, Marianne. Way to go! I am going to promote the heck out of this, as there is nothing like this out there. But first, a Q: can you give me any tips on incorporating this into my responsive theme at Honey Tree Media?
Thanks, Chica 😀
Thanks Christy! I appreciate your compliments and for sharing it! I did write this up because I saw too that there wasn’t anything out there like this and I had so many people asking. Now I just need to hurry up and finish it!
As far as incorporating it onto your responsive theme, you shouldn’t have any problems, unless you are talking about the fixed width in step 3a?
Hello There Marianna,
I’ve looked all over the internet (and tried a TON of different tutorials as well with bad code) and this is the finest one I must say I’ve seen. I’m fairly nifty with HTML and CSS and from the looks of it this is just what I need. The only issue is…
There seems to be a documented issue with the ‘Subscribe’ button missing when you paste in your code from Mail Chimp. I’ve tried a couple of different tutorials and — each time I paste the code — everything is there and fine except the subscribe button. I read somewhere it’s an issue with code being overrided somehow. I’m going to attempt your tutorial and see if I have the same issue. If I do, sadly, I’ll have to go back to using the ugly plug-in I was forced to use.
Hello Kristine, thank you so much for the kind words! I hope you are able to get it to work on your blog. I am not sure what would cause the Subscribe button issue you describe. Does it just not appear or does it appear and not work when you click it?
I’d be happy to take a look at your site/blog once you’ve implemented the form if you are still have issues. Just let me know!
Marianne
Hello Marianne! Thanks so much for responding. I figured out the issue. I also forgot to mention I am using WordPress (hosted on my own doman), so in case anyone else has this issue:
When Mail Chimp generates my code there it is generated as <input type="submit" value="Subscribe"… The class="clear" should be removed. That allowed my subscribe button to appear.
I've followed all steps so far, made a beautiful background image with picmonkey and GIMP last night and am eagerly and patiently awaiting the final steps. So excited! And so happy to have found your blog. Probably one of the best I've come across and full of so many ideas and helpful hints. Thanks so much!
So wonderful, I’m glad you figured it out Kristine! I’d love for you to share your blog with us once you’re done so we can see your new design!
Marianne
Easy peasy! Thank you for the step by step easy to understand tutorial. Since I own a Boutique and blog not everyone wants both so I figured out how to customize my mail chimp newsletter to reflect my boutique only and my blog. My form is going to be petty & awesome.
Thanks again!
Thank you for sharing this great tutorial. I’m always looking for helpful tips and tutorials to use to update or improve my blog. I’m so glad I aw this post.
Kim
Hi Kim. So glad you like it. Let me know if there’s ever anything specific you’d like me to cover.
Thank you for this easy slideshow! I am really looking forward to the other parts!
Hi Deanna, thanks! The rest is all published now and the links area at the top of the post!
Thanks for the great tutorial.
You’re welcome, be sure to let me know when you’ve got your completed opt-in form. I’d love to see it.
Very simply steps here and clear however looking for something more specific like design and I have aweber.
Really like the content you have here. Join the facebook community of bloggers here https://www.facebook.com/groups/bloghopping/
Hey Josh, the tutorial applies to aweber also. What do you mean by more specific like design? I think you might have to do the rest of the parts. This tutorial does get pretty in depth by Part 4.
Thanks for letting me know about the group.
You have an excellent tutorial but I dont like to play with coding so I use a plugin instead. https://wordpress.org/plugins/optin-forms/
And that always works too, as long as you know the options and have good reasons for choosing one over another. Thanks for your comment, Prince!
Thank you for this advice is has come at the perfect time for me. Beautiful xxx
Hi Nadine, thanks for taking a moment to write and let me know! Would love to see a before and after when you’ve done yours!
I would love to use MailChimp but I have no idea what to address to use. I wouldn’t like to use my own but there’s nothing else. Do they need ti (or actually do) send you mail for you to give an address? I’ve looked at their alternatives but nothing works so I’m just using the built in WordPress sign-in form from the widget selection. I’m tinkering with Mad Mimi but I’m usnure. I’ve never heard of Aweber so I will check that out!
Mahriya if you are just starting out with your email list, I would highly recommend using MailChimp or Mad Mimi. Aweber is just too expensive for a beginner and overkill. You do need an email address with your domain in order to use any of these services as spam can easily be sent using gmail, yahoo, etc. You’ll have to purchase a domain name, which you can point to your wordpress.com blog (for a fee I believe), then ask your domain registrar for help in setting up an email address.
Before you go through the trouble with the domain, I would highly recommend first checking out this post below to make sure you are the right blog platform. I usually do not recommend the free WordPress.com and you’ll see why in my post.
http://designyourownblog.com/how-to-start-a-blog-epic-guide-blog-platform/
You’ll then want to read part 2 of that series to learn how to get your own domain name.
Hi Marianne,
I have to say your tutorial is fantastic and it appeared like a gift to me after searching for so long on sign up forms.
I managed to do all the steps, although my background image (the one I created on pick monkey) doesn’t appear on blogger, even after I created the class= “optin-form” on the html and also added the url on the css code.
Could you please give any tips on this?
Thank you for your great work!
Kind Regards
Joana
Hey Joana, that makes me happy to hear you found it!
I’m sure the issue is just a slight syntax error. Not sure if what you shared in your comment is exactly what you have in your code, but there is a space after the equal sign. Be sure that’s not in your actual code. If that’s not the issue, it would be best if you could share a page with me that has your opt-in form on it, then I can check out the code myself and let you know what’s up!
Thank you for your prompt reply! 🙂
It is the blog link: http://foreverwithisabelleao.blogspot.com/
Let me know if you need an admin request to have a look at the code.
Thank you for your help
Joana
Hi Joana, I see what the issue is. Your styles for .optin-form are being overridden by the styles for #mc_embed_signup. Place your custom CSS code below any mailchimp CSS code (usually begins with mc_ ) so that it overrides the MC code.
I also noticed you have the height and width values reversed for the background image. Now it’ll just be a matter of playing with adding some padding to push the form elements in from the sides.
Let me know if you have other issues!
I’m afraid it is still not working.
I suspect it might be something with the image link, but I’ve tried all the image links give on Photobucket and nothing seems to work.
Thank you for your help anyway! 🙂
Joana
The image link works fine because i was able to see it once I hid the background style declaration for #mc_embed_signup. You may have to add !important to your style to force it to override. Something like this:
.optin-form {
background: url(imageurlhere) !important;
}
I finally managed to do it. The problem was in the image link.
This time I uploaded the image to my blog and got the url from there, rather than getting from Photobucket and it seemed to work. 🙂
Thanks again for all your help.
Joana
Fabulous! So glad you worked it out Joana!!
Hey Marianne! I already have an opt-in button that I made through your guidance, actually. But now I am adding an ebook to my website. Is there a way to have the ebook list merge with my first opt-in button list so that I don’t have two separate lists going? Or do I have to just settle with the 2 lists and then maybe manually add the ebook addresses into my initial list?? Thanks for your help!
I guess I’m wondering if this is what you answer on slide 10? Is it possible for my new embedded form just add new email addresses into my already created list even though they’re for 2 different products? My goodness, does that make sense?
Hey Sarah, are you using MailChimp? If so, then you must have 2 different lists if you want people to sign up for different things. The problem with this is that if you have one person on two lists, they count as two people, which costs more. This is one of the biggest frustrations people have with MailChimp and why many have switched over to ConvertKit because you can set up multiple “lists” that merge together. It costs more than MailChimp per month, but if your list is growing, it’s worth it. You can check it out here: http://designyourownblog.com/convertkit
Does that answer your question?
Yes, that totally answers my question. I am using MailChimp, but only have about 300 subscribers so am pretty far away from the paid version. I recently have heard a lot about ConvertKit though, so will look into that. Thanks for your help!
Marianne! 🙂 I can’t tell you how glad I am I found your blog, and this tutorial. It was so so helpful! I had no idea I could achieve this without knowing so little. Can’t wait to read more of your posts, thanks so much!
Woohoo! That’s my goal Sam, thanks so much for reaffirming it 🙂 You’re so welcome and let me know if you are looking for any tutorials in particular.
I was working through your tutorial and ran into a snag. I’ve added the Text widget, but it won’t appear on my blog for me to measure. I’m using WordPress and Constant Contact.
Hi Carly, I see your form in your blog’s sidebar now. Let me know if you are still having issues with it showing up.