Why do you blog?
Is it to keep an online journal? Or maybe share pretty things you find?
Or is it a vehicle for your business or product(s)?
If you answered the latter, then ask yourself this question:
Does your blog encourage subscribers?
If your answer is no, that could be a problem.
Why? Because if you’re using your blog to promote your business or even a future business then it’s essential that you begin building an email list, like yesterday.
To build an email list, you’ll need to use a service to collect those email addresses. Luckily there are free and inexpensive options like Feedburner, MailChimp,* Mad Mimi, or my personal favorite, ConvertKit.* But I’m not going to go into that here, there are tons of articles you can read that go into that already.
What I’d rather talk about here is the style and placement of your opt-in so that it’s noticeable but still blends into your blog’s overall design. Take a look at these sidebar opt-in forms and buttons for some inspiration. Click on the links below the images to go to the blog to see how it blends into the design.
These are some of my favorite opt-in forms and buttons. Get ready, there’s a lot here!
Opt-in Forms
This first set of images are of opt-in forms. Here you can enter your name and/or email directly into the sidebar widget and subscribe.
from left to right, top to bottom:
- ohmyhandmade.com – I love the handwritten look of the form as opposed to the usual box that you type in. As you’ll see, this is becoming quite a trend…
- fairydustteaching.com – This sign up form stands out and perfectly matches the cut paper look of this blog.
- fellowfellow.com – I like the soft, modern and simple look of this sign up form with a touch of washi tape.
- myinnocentia.com – Cute and simple opt-in box with follow icons has a hand drawn feel.
- thepleasureretreat.com – This opt-in form really gets your attention, Bam!
- ontobaby.com – Placed right up at the top and the arrow says “Do this Now!”
- onegoodthingbyjillee.com – The 3D newspaper look of this form is cute and it’s conveniently located right at the top along with other ways to stay connected.
- lovefeasttable.com – The textures of this form and button match the feel of the site and again is right at the top and easy to find.
- strictlynutritious.blogspot.com – I like the modern typography and colors here.
from left to right, top to bottom:
- saturatedcanary.blogspot.com – The “Connect” and “Subscribe” are actually sidebar headings for two different “widgets” but I think they go well together in addition to the rest of the sidebar.
- sarahledermandesignstudio.com – Very simple and minimal form, like the icons above it. The only thing I don’t like so much is the proximity to the search bar. It almost looks like it’s part of the same form.
- psimadethis.com – Colorful, catchy and matches the style of the blog.
- pittr-pattr.com – Quirky little sign up form in the trendy chalkboard style.
- thehouseofsmiths.com – This is just a simple Feedburner form plugin, but I like the simplicity and the typography combination here.
These opt-ins are stretched below the header as opposed to being in the sidebar. I think this is a nice option as it is always at the top and doesn’t take up sidebar space. I may consider doing this myself on DYOB.
- heartmadeblog.com – The hand drawn look matches the style of the blog and is really popular in design right now.
- marieforleo.com – I like how the Call-to-Action text in the header points right to the form below it. You can change the message in your header whenever you need to and it’ll always draw attention to itself.
- brigittelyons.com Another form below the header although I will admit it was not immediately noticeable to me. I think that making the form fields a little larger would have helped. I do like the “I’m In” button though.
from left to right, top to bottom:
- chrisbrogan.com – Here is another form with border-less form fields. The arrow pointing to it draws your attention to the opt-in. Also the cute coffee cup moves when you hover over it, a sweet touch.
- sfgirlbybay.com This is really cute and matches the rose theme in this blog. My only complaint is that it’s a bit too small and not that noticeable compared to the elements around it. I really had to search for this one.
- iheartblogshop.com I love this bold box with a simple question that gets readers to participate by subscribing.
- ruffledblog.com – Simple and cute, it’s just too far down below the plethora of ads. I’m guessing they don’t get very many signups.
- whimseybox.com – This one is actually a popup, but I couldn’t resist including it because it was so bold and sparkly, it just BEGS you to sign up, doesn’t it?
- everydaybright.com – So I will admit, it’s a little masculine looking with the heavy grey and metallic look, but I think it looks really clean and the star burst gets your attention.
from left to right, top to bottom:
- 100layercake.com – Another pretty sign up box but again, it’s just too far down below the large number of ads and hard to find.
- blog.shopstarlet.com – A simple opt-in with other options to connect included. What I really like about this one is the wording: “Join Our Community,” It’s very inviting.
- tidymom.net Love the bold color, love the stitching. It’s Bam! right at the top and is combined with other ways of connecting.
- mummade.co.nz – This is another form with border-less fields and the stitched look compliments the blog’s design. But it’s in the footer and while I think it’s important to put an opt-in there as well, there should also be one closer to the top. Not everyone scrolls down to the footer and will catch it.
- stephanieryandesign.com – This blog has a very pretty fabric-like design with pastel colors. There are two options to subscribe here: one for each blog post and another one for the less frequent newsletter. I like how they are close together here and also close to the top of the sidebar.
- lovelybride.com – Such a pretty vintage design. My only problem with it is that the form only appears on the home page and not on the blog.
- musingsofahousewife.com – I really like her sidebar items, the designs are cute and each one is different but still match in style and color scheme. The only thing i don’t like is how this form might get lost among the other similar graphic category buttons. But in all I think it’s still noticeable enough.
Here’s a trend I found mostly on Dribbble: the international envelope style. I think it’s definitely a cute idea for an opt-in form if it fits in well with your design. I could especially see this on a travel blog.
from left to right, top to bottom:
- Newsletter Candy UI Rebound by Ivo Ivanoff
- Quote Roller Newsletter Subscribe by Alex Tsuba
- Subscribe to Updates by Dan Edwards
- And if you like this style, here is a free PSD (Photoshop*) download for one from FreebiesBucket.com
Subscribe Buttons
This second set of images are graphic buttons that open up a new page or a pop-up with an opt-in form.
from left to right, top to bottom:
- afablife.com – (first two images) I love this gorgeous Subscribe envelope complete with gold glitter! When you click on it, it opens up this fab popup with the opt-in form here.
- clumsychic.com – Very simple and tastefully done in both type and color. And I just love the cheeky message!
- aeolidia.com – This Subscribe box tells you what you’ll get by signing up. I think this is important.
- bubbyandbean.com – I like the typography and color on this one, it just stood out. I only wish they would add it to the sidebar. Currently it only appears at the bottom of posts. While this is certainly a good place to put an opt-in, there should definitely be one in the header or sidebar as well, just because that’s where people typically look for it.
- katiedaisyart.blogspot.com – Cute, matches this illustrator’s blog and stands out.
from left to right, top to bottom:
- angiesandy.me – Very cute box with a hand drawn look. It also includes reasons to join.
- flowerchilddwelling.com – I almost didn’t include this one, but I do like the minimal style of this box and it gives you several options to subscribe.
- makemylemonade.com – This animated gif certainly draws my attention! Go to the blog to see it in action.
- designlovefest.com – I just liked the style of these buttons and the opaque tape detail.
- renegadecraft.com – This handwritten/ hand drawn style fits in well with the down-home feel of this blog about a crafts fair.
- wolfandwillowblog.com – Near the top of the sidebar and there’s that hand drawn look again!
Make It Irresistible to Subscribe
So did you notice how some of the subscription boxes listed benefits or free gifts to subscribe? This is important because you want to give your readers a reason to subscribe. Tell them what they’re missing out on by not subscribing.
Location, Location, Location: Where to Place Your Opt-In
By now you should know that you shouldn’t make people have to search for or scroll down for your opt-in. Make it very noticeable and as close to the top of your sidebar as you can.
It may not occur for people to sign up to your list on their own, but if they see a subscribe form and it’s friendly and noticeable, they may just think:
Oh hey, that’s a good idea, I’ll sign up right now!”
While you should definitely include one in your sidebar, other recommended places to add an opt-in additionally are in your footer, bottom of posts, and your About page.
What to Choose? Form or Button?
So should you go with a button or a form on your blog? Personally I think that a form encourages people to sign up more, but that’s really up to you to decide.
Ok, Got It. Now Tell Me How!
I just so happen to have a tutorial that explains exactly how to add a form to your blog’s sidebar. The tutorial explains how to add a free MailChimp* form to your blog without a plugin, BUT…
If you’d rather use another email service or Feedburner, no problem! My tutorial works for any form on any blog, whether you use WordPress or Blogger or something else.
Now You Tell Me!
Do you use a form or button or neither on your blog? Let me know which one and why.
Do you know of any other sweet-looking subscribe boxes I’ve missed?
I would love if you shared them in the comments!
If you like what you just read, I would appreciate it if you’d please share this with your friends by clicking below. Thank you so much!
Drooling right now…
Great post, Marianne! There is so much eye candy in your posts and on your site, that it just really isn’t fair to all the ugly blogs out there! 😉
Haha thanks Kim! I really do appreciate that 🙂
love your post- where can we set up a pop up opti in form?
You’ll have to look for a plugin for that Merah, this tutorial doesn’t apply to popups and I haven’t had any experience with them.
There is also the option of using a service like banatic.com, it is a very easy opt in service that works on any platform and can be setup in 2 minutes.
Gorgeous!
Jealous too.
How do you get these though? Are they custom designed (cost money + need a designer?)
Hi Christine! Thanks so much for coming by, I’m glad you liked the images!
Ok, so I guess I should have gone into that in the post. There are two good WP plugins I have found: OptinSkin ($67) http://optinskin.com and Magic Action Box http://bit.ly/1eb9Nt3 – both free and pro ($47) versions.
They both have pre-designed templates and you can customize them to a point. Both plugins allow you to add a form to the sidebar and/or bottom of posts. I think I am going to try them out and update the post as soon as possible, but look into them in the meantime and at least try the free version.
Otherwise if you wanted a customized version, yes you would have to design it and then get into the CSS and style it yourself OR as you said hire a designer.
I hope this helps! Let me know if you have other questions!
Thank you. I will check them out this weekend!!
Brilliant. I had to go check my two blogs. I have the form version on one, but I honestly didn’t even know if it worked. And the other, I don’t even have one. I am going to look into this! I like the “connect” and “subscribe” example above the best. Thanks for putting this together!!
Great Stacy, glad I could fire up some inspiration behind setting this up on your own blogs!
Oooooh, those are all so fun! It’s given me opt-in envy!
Haha Bobbie, I hope it gives you a little inspiration!
To be honest, I’ve got a little envy too even though I just redesigned mine a few weeks ago! A designer is NEVER happy with their own work! 😉
Thanks for coming by!
Marianne
Marianne
My blog disaster turned into a HUGE blessing!
I’m taking a break for a while but I will be back to share my new layout and try your tutorial.
Oh I’m so glad to hear that Kristal! See? It’s happened to me a million times before too 🙂
Definitely come back and show us what you’ve done, I can’t wait!!
Hi Marianne,
Sorry for writing in an older thread. I just stumbled upon your website (great blogpost btw). If you want to get super creative with your optin boxes then try out Banatic.com. Works on all websites.
http://banatic.com
There is so much eye candy on here. haha
I recently updated my blog to have an opt-in in the header and have found some success with it so far. My biggest struggle is finding a look and feel that is right for me.
At the moment I am satisfied but eventually I have a feeling I’m going to hire a company to just completely redo my site to how I want it to look.
Thanks Doug. Have you tried to design the opt-in yourself with my tutorial? Try that first and see how it goes. You should be able to apply it to a header opt-in. Link above towards end of post.
Hi Marianne!
I loved this blog post, namely because I have been trying to figure out how to create an opt-in banner similar to Marie Forleo’s and Kris Carr’s. I went into pic monkey and made a design but now I am stuck. How do I make it active? In other words, the boxes I created for the name field and email address field are in the image so how so I make them active boxes that can be clicked into and text entered and last, how would i attach it to my headed, like Marie Forleo did? I’m a newbie to WordPress and coding but learning quickly and it’s all making sense…except for this.
Thanks for any help you can provide.
Jill
Hi Jill, you’ll need to follow my opt-in tutorial to learn how to add a working form to your site, before styling it. You’ll need to sign up for a feed/email provider service like Feedburner, MailChimp, Aweber or MadMimi to have a form that works. Start with Part 1 of the tut here: http://designyourownblog.com/how-to-design-a-custom-opt-in-form-without-a-plugin-part-1/
As for adding the form to your header, you’ll have to modify the tutorial a bit as it only explains how to add it to your sidebar. I will most likely create a new tutorial that goes into exactly how but not sure when yet. In the meantime, I have seen a few out there recently. In WP: http://xosarah.com/2014/03/wordpress-tutorial-how-to-create-a-horizontal-email-opt-in/ And also how to do it using a Genesis theme: http://allyssabarnes.com/2014/03/31/how-to-install-an-opt-in-form-in-genesis/
I’ve added optin code to widgets before but never spent much time styling, Now of course I love your own optin and the samples on this page plus your links for help have inspired me. Thanks Marianne!
Hi Liz, glad I could help! 🙂 Please let me know when you’ve styled your own, I would love to see it!!
Hi Marianne,
I love this post, thank you! I checked the link you provided on 5/08/14 and I noticed it is for WordPress. I have a blogger blog with Feedburner and I have tested the subscribe feature. My readers are notified each time a new post goes up but I cannot access the email list for any special emails.
Do you know where this list may be or if there is something additional that needs to be done to the plugin?
Hey Tricia, glad you liked the post! I don’t remember which link it was that I provided but you should be able to access your email subscribers in Feedburner. It’s kind of hard to find but if you do give people to option to subscribe via email (you have to set that up) then it will collect those addresses. Try this out and see if it helps! http://amylynnandrews.com/feedburner-subscribers/
If that didn’t answer your question, let me know!
Hi, this list was really cool, I enjoyed going through it…..now it’s my turn to make something that’s creative like these.
So glad you enjoyed it Jithin!
Hi Marianne, nice post indeed. I use rapidresponsebot as my autoresponder, i need to create a better signup form than its original form. Is there any plugin for WP i can use?
Hi Yunar, I don’t know of any plugins off hand for rapidresponsebot, but you might contact them to see if they have made one. If there isn’t, you might consider creating your own form without a plugin using my tutorial here: http://designyourownblog.com/blog-design-resources/tutorials/how-to-design-a-custom-opt-in-form-without-a-plugin-part-1/
Hi Marianne,
I finally create a simple CSS code for my opt in sidebar blog and this is what i want. So far no WP plugin available for rapidresponsebot. Thanks for your inspiring post that push me to create a CSS code. By the way the URL page you mentioned above is not found.
Hi Yunar, glad it helped and thanks for the heads up on the broken link.
I love those! i don’t think I can do it on blogger though, can’t wait till i get an actual website but i want to make sure that i am serious about it first!
Hi Brittney, you can most definitely style your opt-in on Blogger! Try my tutorial (link at bottom of the post above) to learn how 🙂
Thank you for this! Such a great post. I’ll be trying the tutorial now, wish me luck 🙂
Awesome Ana! I would love to see it when you’re done! Be sure to come back and let me know!
I love your blog layout, it’s beautiful!
I have a question for you, I am wondering if you can give me direction on how to add the header opt-in form that looks like these two sites you mentioned:
1.heartmadeblog.com
2.marieforleo.com
Hi Julia, thanks for the compliments 🙂
To be honest I haven’t added one yet so I can’t really say. It’s been on my radar however to create a tutorial once I’ve done so as you’re not the first to ask.
I took a quick look at your blog and it looks like you may have found a solution already? Are you having problems with this one or did I answer your question too late? 😉
Thank you!
I did take an attempt to make it happen but actually.. it didn’t work out as planned, the form was un responsive. I’m back to my old website for now… with out the Header optin 🙁 I will stay posted! I look forward to seeing what you accomplish!
It’s definitely one of the hardest thing’s I have come across while creating my blog for sure.
Hmm i wonder why that didn’t work. I’ll try and get on it as soon as I can, but it’ll be a few weeks as I’ve given myself a 5 week deadline to get my book finished 🙂 I may be tapping you for more info and troubleshooting!
Yes, I did figure something out but it was not easy. I made a few compromises from what I originally wanted it to look like!:) I would love to know about how you accomplish it! Definitely Keep me posted. Email works too! 🙂 Wishing you the best with your book, meanwhile!
Thanks Julia!
Thanks for writing this post and the tutorial, as well. I have been avoiding adding a subscribe form to my blog because it just seems too daunting — it’s time consuming to try to understand all of the settings and instructions and then there the matter of design. Your posts have encouraged me to just do it. It’s a lot easier with your help.
How wonderful Laura, I’m so glad it was helpful for you! Thanks for taking the time to let me know!
Pretty long list. Thanks for the heads up. I was looking for actual codes that I can modify to put on my site. Anyway your list gave me some good ideas.
Hi, I do have a tutorial (with code) to do a custom opt-in. The links are at the bottom of this post.
OMG I love this post and I was wondering if you knew a really easy way for a total WordPress Noob to do an optin form below the header like you show on Marie Forleo’s site and Unfettered Ink.
I think it looks really professional, doesn’t take much space and really makes an impact.
Is there a plugin or something I can use to do it?
Laury,
The horizontal optin requires changes to the functions.php file and the style.css file in order to make a widget appear where you want, then you add the content It is definitely not a newbie process. I got instructions from a WordPress developer on how to do it. Marianne may very well do these sort of coding changes as part of her services or have someone she refers people to.
Thanks for your question Laury and thanks so much for jumping in Liz! You’re absolutely right, there is no easy way to do that unfortunately. I have been asked a lot, but can’t seem to find a one-size-fits-all solution that works on different themes, let alone blogging platforms.
Unfortunately, I don’t do custom work at this time, but you can check out a few of my favorite blog designers and hit them up for pricing. If you aren’t able to do this, the Hello Bar plugin could be a nice alternative. Check that out!
http://designyourownblog.com/blog-design/meet-blog-designers/
https://www.hellobar.com/
Hi Marianne! Amazing post and what a bundle of ideas for blogs! I always find here inspiration…now I need to fix my Opt-In form!
Regards,
Thanks Sinziana, can’t wait to see your new opt-in!
Hi Marianne! Great post and such a useful bundle of ideas for blogs engagement.
Thank you Kristy, I appreciate that!
Hey Marianne,
Great article, should inspire any blogger to up their optin form design game. 🙂
I think optins are a great opportunity for branding. I’m always shocked at how some websites have just a floating text-box and a subscribe button , in the crevices of their right rail.
Button copy/the CTA, is inevitably crucial to get right too. I notics that buttons that are quirky and/or describe the benefits of subscribing, can do better than just “Subscribe”.
You provided some crazy f’ing value here. Well done with the research, probably took a while. Will look into these different styles soon to change my website’s forms (not happy with them.)
Well done again!
Thank you Lazhar, I love your enthusiasm! 🙂
Great collection and helps me lot. Thanks.
I’d like to have a custom design without using plugins whatsoever. I want the optin to be unique. Do you have offer such designing services?
With Regards,
Jeremiah
Hi Jeremiah, I don’t offer services at this time, however have you checked out the tutorial that goes with this post? It walks you through designing and implementing your own custom opt-in: http://designyourownblog.com/how-to-design-a-custom-opt-in-form-without-a-plugin-part-1/ Good luck!
Hi Marianne, thank you so much for this useful article ^_^, i love it. so i need to change my web. once again thank you so much. success for you ^_^.
Nice Collection
Thanks for sharing useful Widget, these widget help to many newbie blogger.
thanks
You’re very welcome Akhilesh!
Thanks for the amazing information. Now i am trying to add one of these CTA buttons on my blog.
Great Article! I just Made a newsletter it helped me a lot 🙂
Hi Marianne, thanks for sharing! Loved all the examples of beautiful buttons and sign-up forms. =) Quick question: How did you create that great sign-up banner at the top of your blog? I’m using a top banner button at the moment but would love to turn it into a form. Just don’t know how… Thanks again!
Hi Claudia, my apologies for the delayed response. Are you asking about the opt in form that’s below my header or the aqua bar at the very top that says “Free CSS for Bloggers Workshop ~ going on now” ?