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

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.

Part 4

Without further ado, let’s do this!

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?