
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
- 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 went into PicMonkey and created a custom design and background image.
- 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?

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!
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!
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?
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.
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
oops I meant to say there is no tag in the html for my form!
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!
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
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
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!!
Awesome Michelle, thank you!