Tutorial Part 3: Design an Opt-in Form for your Blog
Today we get to begin designing our forms. The fun part yay!
I’m so excited about the response to this tutorial series! Thank you, not only for the kind words and encouragement, but for spreading the word as well!
You probably know by now that this tutorial was born (bourne?) from the interest I received in my showcase of beautiful subscribe forms. So many of you wanted to know how to make your own pretty opt-in. Hence this series.
I only apologize for not getting Part 3 up sooner. It’s just a lot more info than the other parts, so it’s been taking me a lot more time to develop.
I didn’t realize how much work it was going to take to do a video screencast (and how awful it is to hear your own voice)! But I also realized that Part 3 was getting pretty long, so I’ve decided to break it up into two steps.
That means today we’ll be planning out the design and the size of our opt-in box. Then in 3B, we’ll go into PicMonkey and I’ll show you some easy ways to create a really nice mockup of it.
Tutorial Syllabus
- In Part 1, we created an opt-in form using MailChimp.*
- In Part 2, we embedded that form into our blogs.
- In Part 3A, we’re planning out our opt-ins and sizing our forms!
- In Part 3B, we’ll go into PicMonkey and actually play with some designs.
- Finally, in Part 4, we’ll style our embedded forms using CSS.
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 here and nothing more.
Part 3A
Before we get started, you may want to think about creating an Opt-in offer as an incentive for people to subscribe to your list. For some fantastic ideas, check out 101 Newsletter Content & Opt-In Offer Ideas for Bloggers at Sweet Tea & Saving Grace.
So on with planning out our opt-ins! Today’s lesson is another Slideshare.
If you’re reading this in an RSS reader or email, you’ll have to click through to the article to view the Slideshare below.
If for some reason you are having trouble viewing the Slideshare, follow this link to view it on the Slideshare website.
Part 3B
I hope you’ve got a good idea now of the size and shape of your opt-in box. Next time is the PicMonkey lesson, the one I know you guys have been waiting for! To keep informed of when Part 3B and Part 4 publish, be sure to sign up in the green box below. You’ll even get a free eBook!
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 or issues, leave them below! I LOVE comments!
And won’t you please pin, tweet or share this if you found it useful?
This is totally awesome, thank you! So clear! The slides really help. Looking forward to the the next installment. I wrangled with my forms so I’m curious your tips.
Hi Michele! Thank you for letting me know how helpful this is to you! I’m so glad you like it. Btw, couldn’t agree with you more on the toxic beauty products. Great idea for a blog 🙂
Yes, thanks! It was something I knew nothing about until two years ago.
I just subscribed and I’m gobbling up your blog… there’s a lot of fluff out there but not much intelligent and truly useful content. Keep it up!
Oh wow that really means a lot, thank you so much! I subscribed to your blog last night also, but I haven’t had a chance to look at the freebie yet 🙂
Cool! 🙂
I am going to have to go back and look at all of these when I have time to figure it out. In the meantime I am going to pin this!
Thank you for sharing it Michelle, and also for stopping by again 🙂 I hope you find the series useful also.
Very educating series. Thanks for linking back to me Marianne!
You’re welcome Temmy, i think our series complement each other. 🙂
Marianne you are amazing and so is this tutorial. I feel braver already. I’m going to try this on my about -to-be-launched blog. I wonder if it will work on my sumone smart-pop up. (It had a field for CSS. ) I also followed the slide share link to whimsybox and who knew pom-poms were hot last year?
Thank you for the inspiration. Love, Jenny.
Fabulous Jenny! So glad to hear it’s made you braver! Please do come back and show me when it’s done. I haven’t tried to edit the sumome popup, but you might be able to make it work. Let me know how it does.
will this form be responsive? Also, thank you for your help. 🙂
Hi Kirsten, the form itself won’t be (that was too much to add into this tut) however if your theme is responsive and the form is in your sidebar, it will behave just like all your other sidebar items and wrap below your content on a narrower screen.
If you want your sidebar itself to get narrower on say a tablet size screen, then I would forego using an image background. Use background colors or gradients in your css, and then set all form elements at percentage widths instead of fixed.
You can make background images responsive too. I don’t have a tutorial for that currently, however I know there are some out there.
Hope that helps!
hey thanks for great tutorial. i just have one question. i’ve read your other article about creating a subscribe form for free using mailchimp,in this tutorial you talk about giving free stuff to dl and get subscribers but how can i do that in blogger. i love blogger and i totally prefer it to wordpress.com but unfortunately everything is so harder :). how can i make a opt in form that sends subscribers a free ebook ,for example, in blogger for free?? mailchimp has a auto responder feature but you should pay for it. is there any other way to do something like i mentioned for free??
Hi Amir, sending out an opt-in freebie doesn’t depend on your blogging platform. The easiest way to do it is by uploading the PDF to your Blogger blog and then sending the file link out in your confirmation email. In MailChimp, you go to your list, then click Signup Forms > General Forms and put this link in the Final “Welcome” Email there. Only people who confirm their subscription will receive this email.
MailChimp says you can also add a download directly there, but I was never able to get it to work that way, but it’s another option in lieu of uploading it to your blog.
And one more note, IF you ever did consider switching to wordpress, stay away from WordPress.com. Only go with the self-hosted version at WordPress.org. You can read about the different blogging platforms here: http://designyourownblog.com/how-to-start-a-blog-epic-guide-blog-platform/
Cheers!
hi, the whole thing is confusing, i wish you would just do the tutorial step by step on your blog instead of sending me to another website with slideshows i dont understand. make the tutorials on your website it can be frustarating
Hi Nancy, thanks for letting me know the slideshow was not showing up on the page. They used to but it seems there was a problem with the links (they are more than 4 years old). I have fixed all the links to the Slideshares now so you can view them here directly. I’m sorry you found that so confusing.