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

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

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 4: Styling Sidebar Opt-in Form Boxes with CSS.

Tutorial Part 4: Styling Sidebar Opt-in Form Boxes with CSS

Welcome to the fourth and final part of the Design a Custom Opt-in Form without a Plugin tutorial! Glad you’ve made it this far!

Today we get to play with a little bit of CSS. We’ll make the plain-jane form we embedded in Part 2 look just like the mockup we created last time in Part 3.

I created this tutorial because of the high interest I received in my showcase of beautiful subscribe forms.

So many of you asked me how to design your own and since I realized there were no other tutorials like this out there, I decided to create this one.

First of all, Happy New Year! This is my first post of the year and I hope you all had a wonderful holiday season and are ready to kick some blog butt in 2014! I know I am! Lots of great tutorials and showcases are planned for this year!

Secondly, thank you so much for your interest and patience in this series! I’ve learned that next time I do a multi-part tutorial like this, I’ll finish the whole thing before I publish the first part so you guys aren’t waiting on me for forever on each part. 😉

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 went into PicMonkey and created a custom design and background image.
  5. Finally, in Part 4, we are adding our new backgrounds to our sidebars, then using CSS to style the form elements on top of that background.

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 4

Without further ado, let’s do this!

Another Update: Since publishing this tutorial, there’s a MUCH easier way to add a new style sheet in WordPress than I explain in the tutorial. Please see this post on How to Edit CSS in Your Blog.

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 for some reason you are having trouble viewing the Slideshare, follow this link to view it on the Slideshare website.

Creating a Hover Effect for Your Button

Update 3/12/14: Katharina asked a great question in Part 3 and I wanted to address it here since I left it out of the original tutorial: “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?”

So if you recall, in slides 54 – 56 above, we styled the Submit button in our forms. So let’s go back to our style sheets and find the line where we defined the button:

.optin-form input.button {
background: #de0045;
....
}

Now we want to add a new line after that:

.optin-form input.button:hover {
background: #008009;
}

You can add whatever type of changes you want, not just a new background color. For example, you can change the border color or button text color, etc. Just don’t go too crazy. Keep it classy, not obnoxious. Subtle is always best.

If you wanted to use an image for your button instead of a solid color, that’s easily done using this syntax below. Notice that I leave in a background hex color. You’ll always want to keep a solid color as your fallback in case your image goes missing or the browser has issues rendering it. Choose a color that best fits your image and provides enough contrast for the button text that sits on top of it.

background: #008009 url(http://yourblogurl.com/insert-image-path-here/button-image.png);

Or you can always use a gradient background too! Use this handy CSS gradient generator and it’ll spit out the CSS you need to paste in. (Hint: pull out the middle “stops” in the color choosing bar to remove the hard transition between the two end colors).

Find the Hexadecimal Number for Your Colors

If you don’t have Photoshop,* an easy way to discover the hex numbers used on your opt-in box or blog is to install a browser add-on or extension called ColorZilla. This tool gives you a little eye dropper you can use to select any color on any website.

Conclusion

So that is it lovelies!
We learned how to create an opt-in list in MailChimp, create a form and embed it into our sidebars. Then we determined what size our opt-in boxes should be, what we want to include in them and then designed a fun and custom background image for the box.

You should now have a beautiful and noticeable opt-in box in your blog sidebars!

Top photo courtesy of Love from Ginger.

I hope you’ve enjoyed this tutorial and I really appreciate the kind feedback I’ve received from a lot of you. Please do not hesitate to let me know if there is another tutorial you’d like me to cover here at Design Your Own (lovely) Blog.

And please, if the lessons have left you with questions, don’t by shy! Leave me a comment below!

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

16 Comments

  • Alex says:

    AMAZING! Can’t wait to go back through this with a fine tooth comb to create my own awesome Opt In. Only thing is, I use Office Auto Pilot, must be the same concept though, right? BIG hugs and good for you for providing such awesome content!

    • Marianne says:

      Alex thank you so much for your kind words! I don’t really know anything about Office Auto Pilot, but I’m sure they give you a little HTML snippet to insert in your sidebar right? You should be able to still apply these lessons to that!

      Thanks for coming by!

  • SJ says:

    Thank you for this! I’m keen to know how to use a ‘submit’ button that’s not the standard one from a mail service in terms of shape, i.e. I designed an opt-in with a round submit button, how does that work?

    • Marianne says:

      Hi SJ, try adding this style declaration to your button:
      border-radius: 180px;

      You might need to adjust your padding to get the look you want. let me know if that doesn’t help.

  • Joanna says:

    Hi! I’ve been through the 4 parts of your tutorial and it is amazing!!
    I am a little bit stuck on the last part though and was hoping you may be able to help.
    on p 24 of your part 4 slide show you say to give the div a class name of optin-form.
    I use feedburner and there is no in my html. Rather, the corresponding area looks like this:
    <form style="border:1px solid #ccc;padding:3px;text-align:center;background: #FBC30D;"
    So I'm not sure what to do here as I know exactly nothing about html 🙂
    Thanks for all the wonderful design tips!
    Jo

  • Joanna says:

    oops I meant to say there is no tag in the html for my form!

    • Marianne says:

      Hi Joanna,
      Sorry I should have made that more clear. Your feedburner HTML is copied into a text widget right?
      If so, then just add this line BEFORE the < form > tag:

      < div class="optin-form" >

      (remove the space after the < and before the > )

      Then after you see the tag that ends the form: < /form > , add this:

      < div >

      (again remove the space after the < and before the > )

      Let me know if that doesn’t help!

      • Joanna says:

        Hey Marianne!
        wow. that’s all I have to say 🙂 a brilliant tutorial.
        After having endless trouble due to my own tech-ineptness, I realised the settings section of my theme has an area for custom css… So I went back and deleted the extra stuff I’d created in earlier steps and just did it there. Still a work in progress but THANK YOU so much xx

        • Marianne says:

          Oh that’s good to know Joanna thanks for posting that! I had forgotten that some themes have that feature built in.

          I’m so glad you liked this tutorial and that it was hepful!

          Btw, just went to check out your form and I noticed you have one little syntax error:

          You have a > after

  • Michelle says:

    I’m going to be coming back to this, because I am planning on setting up a newsletter this year! Pinning so I can find it quickly! Thanks!!

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.