Tutorial Part 3B: Design an Opt-in Form for your Blog
Today we finally conclude the designing part our forms!
Last week we planned out our forms by discovering the size and finding a suitable background.
Today we are going to create mockups of our forms and then save the background image we create in PicMonkey.
In case you were wondering, I created this tutorial because of the interest I received in my showcase of beautiful subscribe forms.
I realized there was NO other tutorial like this out there, so I decided to create my own.
I know you guys have been waiting on this part and I appreciate your patience with me! I hope you don’t absolutely hate my video! Ok so on with 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 planned out our opt-ins and sized 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 3B
So on with planning out our opt-ins! Today’s lesson is my very first screencast video, ack! And yes, I am fully aware that I use the word “so” WAAAAY too often, lol!
If you’re reading this in an RSS reader or email, you’ll have to click through to the article to view the video below.
If you have trouble with the video, be sure to click on the settings icon at the bottom right of the player (the gear) then choose 1080p, then view the video in full screen by clicking the square icon to the right of the YouTube logo. If you have further issues, please let me know so I can get it fixed.
Click here to begin with Part 1
Part 4
Today you’ve hopefully created a really nice and noticeable design for your opt-in box! In Part 4, we’re going to add our new backgrounds to our sidebars, then use some CSS to style the form elements on top of that background. Don’t worry, I’ll hold your hand through it all!
Top photo courtesy of Love from Ginger.
Please let me know what you think of this tutorial and of course if you have any questions or issues, leave them below! I LOVE comment candy!
And won’t you please pin, tweet or share this if you found it useful?
This is awesome. So curious about how you’re going to combine this with the code! I’m in the midst of opt-in form problems right now so this comes at the perfect time.
That’s great Michele! I hope this helps, if not let me know what you’re having trouble with.
This tutorial has been amazing so far! I’m eagerly awaiting the last part!
Thank you Emily! The plan is to have part 4 complete this week! The holidays side railed me…
Completely understandable, especially with the amount of effort you’re putting in to this 🙂
I’m glad you think so! I worked for hours on Part 4 last night and it’s proving to be the most difficult part to do so far! And I thought it was going to be the easiest, ha!
Hi Marianne!
Thank you SO MUCH for this wonderful course! I have designed my opt-in and can’t wait to get coding. Any idea when the last part will be available to us?
Once again,
Thanks!
Hi Liz
Thank you for letting me know how much you like it! Yes! I am finishing it up this weekend (no ifs ands or buts!) and will publish it Monday morning.
Thank you all so much for your patience!!
Had this blog in my ‘to look at’ folder for a while… BOY, did I wish I looked here before I started redesigning my blog!
It’s still a work in progress and I just know your site is going to help me tons.
I LOVE the step-by-step explanations.
Seriously, this is star stuff.
Wow thank you so much Sophie! I wish you had found it sooner too then! 🙂 Glad its been so helpful to you so far. Feel free to let me know if you come across something you’d like to know about that I haven’t yet covered in the blog.
Hi Marianne,
I’ve just signed up for your newsletter 🙂 Yay!
With zero html/css knowledge, I managed to design my own wysjia optin-form in a sidebar widget – all thanks to you!
I still got 2 questions, pretty please? 😉
1. I inserted a png as a background graphic for my button but I can’t figure out how I can change the button-png for mouse hover?
2. Now I can do optin-forms for my sidebar widgets – I’d loooove to create optin-forms at the top (like in your examples marieforleo.com) or at the end of a blog post, too!?
Would love to hear from you!
Lots of sunshine and gratitude,
Katharina
Hi Katharina! I’m so glad this was so helpful for you! It makes me very happy to hear! And thanks also for signing up, I appreciate that. So let me answer your questions….
1. Great question! I should have covered that in the tut, but didn’t think about it then. Look in Part 4 underneath the slideshow, I’ll add that new part in text. Let me know if you still have questions about it after viewing it.
2. You’re not the first person to ask so it looks like I’ll be doing some new tutorials soon! I wish I could explain it to you now real quick, but it’s going to be a little more involved than a quick comment. I’ll try and get going on that asap!
Dear Marianne,
Thank you so much for your answer! It worked like a charm.
Looove it!!!
I’m so looking forward to your tutorial on my 2nd question!
Lots of love,
Katharina
So happy to hear it Katherina!
This might sound ridiculous, but I fell asleep during your video…because your voice is so soothing! 🙂 I took a quick power nap with my head down on my desk like a 1st grader, woke up and picked up where I left off. This is a great tutorial! I love love love the slide concept and your video is spot on! Very clear and easy to grasp. Oh, and ADORABLE subscribe boxes!
OMG hahaha that is too funny Kelli! Thanks for letting me know! It’s my first (and only so far) video and looks like i will need to work on that 😉
But I’m glad it was still helpful for you in the end and hey hopefully that little power nap made you a little more creative 😉
Thanks so much for this awesome tutorial! I’m working on re-designing all of our opt-ins and I LOVE picmonkey so much so this works perfectly! I can definitely see myself coming back to your blog often 😉
Also, I noticed in the video that you were having trouble selecting the correct text/overlays to edit. I used to have the same problem and it drove me nuts! I read somewhere that when you add any elements/overlays/etc. in your background, before you add anything else, to press the “Merge” button at the top (second to last) and it will make it so that everything is all one piece so you can easily select the text and overlays you put on top! 🙂
Hi Meaghan, thanks so much! That drives me crazy in PicMonkey, I will definitely have to try out your solution next time I’m in there (which is often) 😉
I just love you Marianne! What a wonderful tutorial!! Talk about sharing!! I am so appreciative. 🙂 My website is a work in progress but you are really helping me to make it my own. Thank you. Thank you! ~Blessings
Oh thank you Michelle, how sweet! I am so glad DYOB has been so helpful in your journey, thanks for letting me know as it totally makes my day!
I love the colors in your blog, and the header is very pretty so great start!
The tut is so coll, make all, but Pickmonkey is not free anymore, at least, says me to sing up for a trial plan, is this?
Hi Claudya, PicMonkey has both a free and paid version. You can use it for free with basic features as long as you want.
I love your tutorials! I’m trying to set up a newsletter for my first blog but had no idea where to start. I was wondering if I could use canva instead of picmonkey?
Thank you so much Abby! You should be able to use Canva for this in place of PicMonkey. When I created the tutorial, I don’t believe Canva was yet available. I’d love to hear about your experience using Canva for this tutorial if you do go that route!
thanks a lot for sharing this information.now i have a great idea to opt in form design.I will wait for your last part tutorial.
Fantastic article. Thank you Marianne for sharing