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

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

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

  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’re planning out our opt-ins and sizing 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: I should mention that 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 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?

Hey friend, want free DIY design stuff?

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

Powered by ConvertKit
Marianne signature for DesignYourOwnBlog.com

17 Comments

  • Michele says:

    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.

    • Marianne says:

      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 🙂

      • Michele says:

        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!

  • Michelle says:

    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!
    Michelle recently posted…Small Business Saturday & Local GiveawayMy Profile

  • Temmy says:

    Very educating series. Thanks for linking back to me Marianne!
    Temmy recently posted…10 Models for Creating Opt-in Offers [100 Days List Building Challenge Day 5]My Profile

  • Jenny Orelle says:

    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.

    • Marianne says:

      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.

  • Kirsten says:

    will this form be responsive? Also, thank you for your help. 🙂

    • Marianne says:

      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!

  • Amir says:

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

    • Marianne says:

      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.

    • Marianne says:

      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!

Leave a Reply

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

CommentLuv badge