By signing up, you consent to receive email newsletters from me periodically.

How to Design a Custom Opt-in form without a Plugin // Part 3B

How to Design a Custom Opt-In Form for your Blog without a Plugin
How to Design a Custom Opt-In Form for your Blog without a Plugin
Tutorial: How to Design a Custom Opt-In Form for your Blog without a Plugin. Part 3B: Designing our Sidebar Opt-in Form Boxes.

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

  1. In Part 1, we created an opt-in form using MailChimp.*
  2. In Part 2, we embedded that form into our blogs.
  3. In Part 3A, we planned out our opt-ins and sized our forms.
  4. In Part 3B, we’ll go into PicMonkey and actually play with some designs!
  5. 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.

UPDATE: Parts 2-4 will still apply REGARDLESS OF THE EMAIL SERVICE you decide to use. So if you’re already using one and you’re happy with it, don’t switch over just for this tutorial! Today’s lesson will even apply to Feedburner forms.

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?

Hey friend, want free DIY design stuff?

I've got an entire library of FREE goods just for you! Join the 10,000+ others and get instant access now!

Powered by ConvertKit
Marianne signature for DesignYourOwnBlog.com

26 Comments

  • Michele says:

    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.

  • This tutorial has been amazing so far! I’m eagerly awaiting the last part!

  • Liz says:

    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!

    • Marianne says:

      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!!

  • Sofie says:

    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.

    • Marianne says:

      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.

  • Katharina says:

    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

    • Marianne says:

      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!

  • Kelli says:

    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!

    • Marianne says:

      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 ๐Ÿ˜‰

  • Meaghan says:

    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! ๐Ÿ™‚

    • Marianne says:

      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) ๐Ÿ˜‰

  • Michelle says:

    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

    • Marianne says:

      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!

  • claudya says:

    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?

  • Abby UD says:

    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?

    • Marianne says:

      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.

  • Cyberdude says:

    Fantastic article. Thank you Marianne for sharing

Leave a Reply

Your email address will not be published. Required fields are marked *

I accept the Privacy Policy

This site uses Akismet to reduce spam. Learn how your comment data is processed.