How To Create A Custom Opt-In Form Background On WordPress, Using CSS

A friend of mine recently asked about creating opt-in forms that are a little more elaborate than the defaults that your autoresponder provides. Depending on which email delivery service you use, the default forms can be pretty bland, often times just plain boxes with basic black text. What you really want is an eye catching and effective web form that that will get your reader's attention and convert well. Now, depending on your comfort level with HTML and CSS, this project may seem like a lot to tackle, so let's go through the whole process from start to finish, one step at a time. For those of you using AWeber, this is pretty easy, as they recently launched a majorly improved web form generator, which includes templates and graphics, allowing you to build some pretty nice forms all on your own. If none of those templates suit your needs, or if your autoresponder doesn't provide graphics for you to use, you can always add your own background like we're doing today.

Get Your Background Image Ready

First and foremost, you'll need an image. I'm just going to use my current opt-in form on WelcomeToWP.com as the example for this post, so my image looks like the one you see to the right. You'll probably notice that while the form itself isn't part of the image, the title is. The reason I did this is because I wanted a font and colors that normal text can't display. Integrating text into your background images is a great way to dress things up on your blog. If you're ever on a page and want to know if something was written into an image or with standard text, here's a trick: try to highlight it! If the element in question was typed in normal text it will be highlight-able, but not if it's embedded in an image or other element. Try it out on the actual form at the top of the Custom Opt-in Form Background Article on WelcomeToWP.com. Keep all of this in mind when creating your background, if you don't already have one.

Create Your Form

The next step is to create your form using your autoresponder's web form generator. This will allow you to set up the body and inputs of your form. You then need to copy the code onto your blog and place it in a text widget. Most autoresponders will output this code in two formats: HTML and Javascript. Personally, I use the Java version whenever possible, for a couple of reasons. First off, the Java version is a lot shorter and much less cumbersome, because the HTML version is a series of nested tables. I also choose Java because I prefer to avoid using tables and do everything with CSS instead. The other (bigger) reason is that the Java version updates automatically. If you go back to your autoresresponder and edit your form, you won't need to replace the code on your page because it will update automatically. With HTML, any changes you make need to be manually added to your blog by either replacing or editing the code.

Placing The Form

You're going to place the code your autoresponder gave you into a text widget on in your sidebar. In order to make your background image display, we're going to wrap the code in a special DIV which we'll then style with CSS. For those of you who aren't familiar with HTML tags, a DIV is basically a container tag that you can nest other elements (in this case, your web form) inside of. The code in your widget will look something like this:

<div class="optinform">
   <script src="http://forms.aweber.com/form/11/1111111111.js" type="text/javascript"></script>
</div>

You can see above that I chose to give my DIV a class of "optinform." Once you've saved the widget, refresh your blog to make sure it's been entered correctly. Your basic form should appear on your blog, but we still need to dress it up a bit. Now it's time to open up the style sheet and add some modifications like the background image, color, alignment, etc. by defining the class we just gave that DIV.

Find Your Stylesheet

A couple of important notes: First, before you do anything else make a backup copy of your stylesheet. Always keep a backup copy of any code document you are editing, even if it's just a simple change. Trust me. :) Second, once you have everything working the way you want, keep a backup copy of the finished product. The reason for this is that at some point in the future, your theme's designer could release an updated version. If you install this, you'll also install the new stylesheet that comes with it, wiping out any modifications you've made. Some themes come equipped with options to add CSS rules in a place that will be saved during an update. If your theme offers this, use it! Otherwise, we'll be making the edits right in the theme's stylesheet. Did you make your backup yet? Good. :) You now have two choices. You can edit the file right in WordPress by selecting "Editor" from the "Appearance" module of the dashboard. This screen gives you access to all of the code that makes your theme work, and yes, you can break stuff here, but we'll be careful so there's no need to worry. :) The second option is to download the file to your computer, make the modification in a text editor and then upload the new version, which is what I usually do, but it's really up to you.

Add A Custom CSS Style

Note: During the rest of this article, I'll need to reference URL links for demo purposes, and BN's formatting automatically links to those images. The same thing happens to the color codes I use, because they look like Twitter hashtags. :)

What we're going to do next is add a new rule to the bottom of the stylesheet to display the form the way we want. I'll use my own as an example again:

.optinform {
background: url(http://www.welcometowp.com/images/optin.png) no-repeat;
height: 211px;
width: 306px;
color: #ffffff;
font-size: 16px;
font-weight: bold;
padding: 75px 20px 0;
}

Those of you who are familiar with CSS can see what's going on here, but in case CSS isn't your thing, I'll break it down line-by-line.

CSS Breakdown

Since I haven't taken the time (yet) to write one, a quick CSS crash course is in order, so we'll go over some general CSS while we cover the example above. Alright, here we go. On the first line of the code above, you have what is called a "selector." That tells the browsers reading the stylesheet what exactly you are defining the style rules for. To define a CSS class, you need to give it a name (I called mine "optinform" because I knew that wasn't likely to be a class my theme was already using), and you need to prefix that name with a period (.) - the period is what classifies it as a class, rather than an ID (don't worry about the differences if you aren't familiar with them). The first line also has an opening curly brace ( { ). These are used to contain the properties and values of your new class, which we'll go over next. Each of the lines below has a property (first portion) followed by a colon (:) and a value. Each line ends with a semi-colon to (;) The reason I'm pointing all of this out in such detail is that getting the syntax right is important. Missing a single colon, semi-colon or parenthesis can lead to something not working.

• background: url(http://www.welcometowp.com/images/optin.png) no-repeat; Change the url in the value to match the location of your background image. Background images are usually tiled, or repeated if they are in a large enough container, so we use "no-repeat" to disable that.
• height: 211px; This is the amount of vertical space your form will have to sit in.
• width: 306px; ...I think you're smart enough to figure this one out ;)
• color: #ffffff; This controls the color of text displayed within the DIV. There are a couple of different ways to specify colors, but I prefer using hex codes like this one (which means "white" by the way :)) Google is your friend here. Search for a "hex code chart."
• font-size: 16px; This is one of several ways to specify font sizes, and I won't bore you with a lesson on that (not right now, anyway ;)) Try larger/smaller sizes to see what fits, or leave this property out completely to stick to the default.
• font-weight: bold; I wanted bold text. You can skip this line as well if you'd like, but here it is if you want to test it out. Keep in mind that bold text takes up more space :)
• padding: 75px 20px 0; This property is used to create space around the actual form. I've used "shorthand" to keep the code clean, but the first number represents the top padding, the second represents the left and right padding, and the third is for the bottom. So basically this is saying "leave 75 pixels of empty space above the form, and 20 pixels on both sides, but don't worry about adding any to the bottom." My numbers will be different from yours. I need 75 pixels on the top to keep the form text from covering the title in the image. I also use 20 pixels on the sides to center the form horizontally.

Close the whole thing off with a closing curly brace ( } ) and you're done!

A Final Note On Padding And Dimensions

When setting up your width, height, and padding, keep in mind that the size of the DIV is a combination of those variables. The width you specify is really the width of the form itself, not the entire container, so the width value, plus both of the horizontal padding values should equal the width of your background image. My image, for example, is 346 pixels wide. The width property I specified above of 306 pixels, plus 20 pixels on the left and 20 pixels on the right. You don't want this total (the size of your image) to be wider than your sidebar, or it will get cut off.

Finishing Up!

Save/upload your new stylesheet *cough, cough* don't forget to save your backup first! *cough* and refresh your blog. Your background image and other style changes should all take effect. If they didn't work, try going back and making sure all of the syntax is correct. Until you get comfortable with CSS, you may need to tweak a couple of things before it looks just right. Other than some final adjustments, that's it! You're done! I'm definitely looking forward to seeing what you come up with, so be sure to share your results in the comments!

--

Chad is the author of "Welcome To WordPress," a blog dedicated to helping you create and optimize your very own WordPress blog with articles, tips, and step-by-step video tutorials. More WordPress lessons and "how-to" articles can be found at WelcomeToWP.com.