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: Just realized that there’s a MUCH easier way to add a new style sheet in WordPress than I explain in the tutorial.

  1. Log into your dashboard and click on Jetpack at the top right? If you haven’t activated Jetpack yet, you’ll want to do so by connecting it to your WordPress.com account. If you do not have an account, you’ll have to create one. It’s free and will open up a lot of cool functionality for your site.
  2. Once you have Jetpack activated, scroll down til you see the box that says “Custom CSS.” Activate that.
  3. You should now see an option under “Appearances” (in your dashboard sidebar menu) that says “Edit CSS.”
  4. You can now enter any CSS you want in this file. No need to FTP anything or add anything to your header.php!

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 7000+ others and get instant access now!

Powered by ConvertKit
Marianne signature for DesignYourOwnBlog.com

16 Comments

Leave a Reply

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

CommentLuv badge