design a custom opt-in form without a plugin // part 4
DESCRIPTION
Part 4 of 4 of how to design a custom opt-in form for your blog without a plugin. In this final part, we use CSS to style our embedded opt-in forms.TRANSCRIPT
Design a Custom Opt-in form
DESIGN YOUR OWN BLOG
by Marianne Manthey
without a Plugin
How to
4
DESIGN YOUR OWN BLOG
PART 4
Style the Opt-in Form Design in your Blog
TABLE OF CONTENTS
©2013 DesignYourOwnBlog.com. All rights reserved.
This Slideshare is Part 4 of a 4 part tutorial
on designing a custom opt-in (sign up) form
for your blog.
The entire tutorial can be found here:
DesignYourOwnBlog.com
Part 1 (first slideshow)
Create a Sign Up Form in MailChimp*
• Create a List
• Create a Form
• Get the Embed Code
TABLE OF CONTENTS
©2013 DesignYourOwnBlog.com. All rights reserved.
Part 2 (second slideshow)
Embed a Sign Up Form into your Blog
• Embed into WordPress Widget
• Embed into Blogger Gadget
TABLE OF CONTENTS
©2013 DesignYourOwnBlog.com. All rights reserved.
Part 3A+B (slideshare + video)
Design Your Opt-in Box in PicMonkey
• Decide on shape and style
• Pick a background
• What size is our form?
• Add text and graphics
TABLE OF CONTENTS
©2013 DesignYourOwnBlog.com. All rights reserved.
Part 4 (this slideshow)
Style the Opt-in Form Design in your Blog
• A few simple CSS lessons – don’t be scared!
TABLE OF CONTENTS
©2013 DesignYourOwnBlog.com. All rights reserved.
Let’s Style our Opt-In Boxes!
Open up your blog using the Chrome browser.
Or another favorite browser with a code inspector as long as
it’s not IE! I’m telling you, that code inspector is horrid.
Anyway, if you recall, our forms were pretty basic
looking after we embedded them in Part 2:
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Then in Part 3, we had fun designing and I designed this fun looking
form and opt-in box:
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Slightly modified from Part 3B for simplicity in this tutorial
Finally we removed the HTML elements from the designs, reduced the
size to fit, and saved an almost blank background image:
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Now let’s finish up our custom opt-ins shall we?
Upload your background image
First things first.
WordPress: Upload your image to the WordPress media
library. Then click Edit and copy the URL of the image
from here.
Blogger: Upload your image using Picasa, Flickr or
Photobucket and grab the URL to the image.
Just paste the URL somewhere handy as we’ll need it later.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Now we’ll do a little CSS editing
CSS stands for Cascading Style Sheet.
This is the document that allows you to change the appearance
of HTML elements on the page: the size, style, font, and color
of text; background colors; border styles; etc.
We’ll begin by creating a new custom style sheet.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Tip:
If you’re not that
familiar with
CSS, you may
want to read this
article before
moving on.
A. Let’s add a custom Style Sheet in WordPress
If you’re on Blogger, skip to this page.
Before we do this, let’s check and see if your theme may already have a
blank style sheet added to it.
Go to your Dashboard and click Appearance > Editor.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
The default open file you see should be styles.css. If it’s
blank (or has notes up top that mention you can edit it),
great! You can skip the next several pages.
If not, scroll down til you get to the bottom of the list of
file names to the right where it says Styles.
Open and check to see if any of these style sheets are
blank or have notes up top that say that you can edit it.
If you don’t have one like this, you’ll need to create
one and upload it to your blog.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Why can’t we edit styles.css?
Well technically you can, but the danger in doing so is that you
run the risk of having it overwritten should you update your theme
(which you should if it’s available).
This happens especially if you are using one of the TwentyTen,
TwentyEleven, TwentyTwelve or TwentyThirteen, etc. themes
because they get updated every time you update WordPress.
Trust me, I learned this the hard way.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Depending on who you use as your host, you’ll need to access
your blog’s files using FTP (file transfer protocol). Here are a few
common hosting companies’ instructions:
Godaddy
HostGator
Bluehost
Lunarpages
If your host is not listed here and you don’t know how to do this,
do a web search for:
“how to access ftp in [your host’s name]”
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Now open up Notepad
or an equivalent basic text editor and save the blank file as
custom.css.
Next, you’ll upload this new CSS file using FTP to this folder:
wp-content/themes/THEME-NAME
(where THEME-NAME= the name of the theme you have activated)
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Next, we need to add a link to our new style sheet
Here’s where things get a little squirrely. To do this, we must edit our
header.php file.
Unfortunately, the way how depends on which theme you are using
and since there are thousands of themes, that’s really beyond the
scope of this tutorial, so...
You’ll need to check with your theme provider (if you bought a theme)
or Google “how to edit header.php in THEME-NAME.”
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Were you able to figure out how to edit header.php?
Ok great! Here’s the line of code you’ll need to add:*
<link rel="stylesheet" href="http://www.YOUR-
URL.com/wp-content/themes/THEME-NAME/custom.css"
type="text/css" media="all">
just replace YOUR-URL with your own and THEME-NAME with the folder
you just uploaded your CSS file to.
*This link should go below any other similar <link> tags so that it overrides any
other style sheets.*
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Now go back to Appearance > Editor and open up your
new custom.css file.
Your new blank file should be ready to go!
If you don’t see custom.css, then please let me know and I can try and
help you troubleshoot.
Skip the next page (it’s for Blogger) ….
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
B. Create a custom Style Sheet in Blogger
Lucky for those on Blogger, it’s quite simple to edit your CSS:
1. In your Blogger Dashboard, click Template in the left column.
2. Click the Customize button below your selected template.
3. Click the Advanced link.
4. Scroll down the next column and click Add CSS.
5. The Add Custom CSS box will appear.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Ok we are all ready to add our custom CSS!
The first thing we’ll do is add a class name to our HTML.
A class is basically a name that we are giving to an HTML element so
that we can single it out using our style sheet.
You can name a class anything you want as long as it doesn’t begin
with a digit and there are no spaces (dashes + underscores are
allowed instead ).
You also want the class name to be descriptive and not previously
used in your site.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Go to your Text Widget (WordPress) or HTML Gadget (Blogger) and
take a look at the HTML code we previously pasted in.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
See this <div> tag?
A div is basically an
invisible box that we
can put around any
element on the page to
give it 2 dimensions
(height and width).
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form
action="http://designyourownblog.us4.list
-manage.com/subscribe/" method="post"
id="mc-embedded-subscribe-form" name="mc-
embedded-subscribe-form" class="validate"
target="_blank" novalidate>
<h2>Get Lovely Design in Your
Inbox!</h2>
<div class="mc-field-group">
...
I am going to give our div a class name of: optin-form (it’s unique and
descriptive) and we add the class name like so:
<div id=“mc_embed_signup” class=“optin-form”>
Be sure to put quotes around your class name and no spaces anywhere
in the highlighted area above. You’ll just need a space before it to
separate it from the id.
Now click Save.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Back to custom.css
Let’s call our new class name in the style sheet.
We do that like this:
.optin-form {
}
See how I used the class name that I made up earlier? We add a period
before it to tell the style sheet that it is the name of a class. This is very
important.
Our style declarations will go between the curly braces { }
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Tip:
I highly suggest
you open a new
browser tab so
that you can
quickly jump
back and forth
between style
sheet and HTML.
The first declaration we’ll add is the background. We do that like this:
.optin-form {
background: url(http://URL/airmail-bg.jpg);
}
“background” is actually a CSS property, it’s not an arbitrary word. Properties are always
followed by a colon (:) then the value we choose for it.
The value we want to choose for our background is the image we uploaded earlier.
Since we are pointing to a URL where the image is located (remember we pasted that somewhere
handy?), we type url()after the colon. The URL to our image goes between the
parentheses.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
.optin-form {
background: url(http://URL/airmail-bg.jpg) no-repeat;
}
I don’t want my background to tile or repeat so I’ll add no-repeat which is an attribute
that belongs to the background property.
IMPORTANT!
Each declaration ends with a semi colon ;
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Now let’s add height and width.
.optin-form {
background: url(http://URL/airmail-bg.jpg) no-repeat;
height: 225px;
width: 300px;
}
Replace the values above with whatever size your background image is.
Notice how each declaration goes on it’s own line. This is not necessary, but it makes it
easier to read. And don’t forget, each declaration ends with that semi colon.
Now hit Save or Update and refresh your blog page.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
You should now see something like this (but with your own image):
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Needs some work, but looks better already!
Now right click on the background and select “Inspect Element.”
Remember the element inspector from Part 3A?
On the left is the HTML and the right is our CSS.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
See our
new class
name?
And the
style
declarati-
ons we
added to
it?
On the HTML side, click on the elements within that div tag and you’ll see each item highlighted
in your form on the webpage.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Here is our
heading, it’s
inside an h2
(heading 2)
tag.
Here is the
h2 on the
page, also
highlighted
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Here’s where this gets fun.
See at the top of the CSS side where it says element.style with two curly braces? Click on that
and you’ll see that you can add style declarations directly in the element Inspector to try them out.
IMPORTANT: This is just to try out styles on the fly.
Once you refresh the page, you’ll lose any changes you’ve made.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Let’s play with it. Look what happens when I change the color and font size.
color and font-size are pre-defined properties and self-explantory.
Use this CSS cheat sheet for help finding which selectors are available to use.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
NOTE
When looking at the CSS in the code inspector, know that anything on
the top overrides styles below it. That’s why we are able to change the
color and font size of that H2 tag, because it’s on top.
Scroll down in your element inspector window to see previous styles that were
applied to the H2 tag.
In a style sheet however, it’s the opposite: Anything on the bottom
overrides styles above it.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
ANOTHER NOTE ;)
You may have also noticed that the h2 tag in the style sheet does not
begin with a period.
That’s because only class names begin with a period.
If you add styles to an actual HTML tag, then you would not use a period.
But then know that every instance of that tag in your blog will take on
those style declarations. That’s why we add a class name so that we can
single that HTML tag out.
FYI:
You may notice
in your style
sheets that there
are words that
begin with a #.
These are id’s.
Don’t worry
about id’s, we
won’t be using
them.
Ok back to styling
Let’s add some space within the form so that our elements aren’t
butted up against the borders.
Spacing is added either by padding or margins:
• Padding adds space INSIDE an element, pushing its contents
inward.
• Margins add space OUTSIDE an element, pushing other
elements away from it.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Here is your content,
contained within
padding inside your
div (light blue box).
- - - - - - - - - -div width- - - - - - - - -
padding
margin
Here’s how we add padding
.optin-form {
background: url(http://URL/airmail-bg.jpg) no-repeat;
height: 225px;
width: 300px;
padding: 20px;
box-sizing: border-box;
}
I chose 20px (20 pixels) for my padding, but you should choose whatever looks best for your
background image. Maybe your border isn’t as thick as mine so you need less.
Notice I also added box-sizing. I added this because some browsers (like Firefox) add padding to the
width of its box bringing the box’s width to 265px (225px + 20px on each side). Box-sizing forces it to
keep the padding inside thereby reducing the available content width to 185px.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Now hit Save or Update and refresh your blog page.
Mine looks like this now
That looks better doesn’t it?
There’s just one thing. We need more padding at the top to
move our h2 below the stamp.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
By using just one attribute for the padding (in this case 20px),
we added the same padding to all 4 sides.
But we can add different values to each side like this:
padding: 55px 16px 20px 16px;
The order of values is: top, right, bottom, left.
Let’s style the h2 tag
I chose Lobster Two font in dark navy blue (hex color #283043). Lobster Two is a
Google font which makes it easy to use on most blogs.
To learn how to add Google fonts to your blog, read this.
So as you’ll learn in the article linked above, we add a reference to the Google font at
the top of our style sheet. This link is provided by Google fonts so it’s as easy as copy
and paste.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
@import url(http://fonts.googleapis.com/css?family=Lobster+Two);
Now we want to add this font to our h2, but we’ll have to target the h2 inside our opt-in box
because we don’t want to affect every h2 in our blog.
To do this we use our unique class, a space, then h2:
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
.optin-form h2 {
}
That tells the browser to apply these styles just to the h2’s within the div with a class
name of optin-box.
Then we add style declarations to the h2:
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
.optin-form h2 {
font-family: ‘Lobster Two’;
color: #283043;
font-size: 1.6em;
}
• Notice the single quotes around the font name?
That’s because its name is two words.
• The font color chosen is a very dark blue.
• “em” is a unit of measurement for fonts.
Here is our result so far:
Phew, are you still with me?
Is this starting to make sense?
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Here’s where we are compared to what we’re going for:
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Just a few more changes…
1. I’d like to make the h2 less bold.
2. I want to change the label from “Email” to “Enter Email”.
3. I want to reverse the position of the Subscribe button and the View previous campaigns link.
So my h2 shows up as bolded. Why?
Because the h2 has previously been defined as bold. I scrolled down the right side to find this
definition below:
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
No Problem!
We’ll override it by just adding a new line to our definition for optin-form h2:
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
.optin-form h2 {
font-family: ‘Lobster Two’;
color: #283043;
font-size: 1.6em;
font-weight: normal;
}
That resets the weight of the font back to normal, which is the default.
For my other two changes, I will need to edit my HTML.
If you look at the HTML carefully, it’s fairly easy to find what you’re looking for.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Here is my label that
says “Email”
Here is the link “View
previous campaigns.”
The <a> tag is a link
and the <p> tag
wrapped around it
denotes a paragraph.
And here is my Submit
button, an <input>
tag wrapped in a
<div>
<h2>Get Lovely Design in Your Inbox!</h2>
<div class="mc-field-group">
<label for="mce-EMAIL">Email </label>
<input type="email" value="" name="EMAIL"
class="required email" id="mce-EMAIL">
</div>
<p><a href="http://us4.campaign-
archive1.com/home/?u=2361b" title="View previous
campaigns">View previous campaigns.</a></p>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-
response" style="display:none"></div>
<div class="response" id="mce-success-
response" style="display:none"></div>
</div>
<div class="clear"><input type="submit"
value="Subscribe" name="subscribe" id="mc-
embedded-subscribe" class="button"></div>
I edited the label below. That was easy.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Here is my label that
now says “Enter
Email”
<h2>Get Lovely Design in Your Inbox!</h2>
<div class="mc-field-group">
<label for="mce-EMAIL">Enter Email </label>
<input type="email" value="" name="EMAIL"
class="required email" id="mce-EMAIL">
</div>
<p><a href="http://us4.campaign-
archive1.com/home/?u=2361b" title="View previous
campaigns">View previous campaigns.</a></p>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-
response" style="display:none"></div>
<div class="response" id="mce-success-
response" style="display:none"></div>
</div>
<div class="clear"><input type="submit"
value="Subscribe" name="subscribe" id="mc-
embedded-subscribe" class="button"></div>
Next, I took the entire yellow highlighted areas and swapped them.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Now the button is just
below the form field
And the link is now at
the bottom.
<h2>Get Lovely Design in Your Inbox!</h2>
<div class="mc-field-group">
<label for="mce-EMAIL">Email </label>
<input type="email" value="" name="EMAIL"
class="required email" id="mce-EMAIL">
</div>
<div class="clear"><input type="submit"
value="Subscribe" name="subscribe" id="mc-
embedded-subscribe" class="button"></div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-
response" style="display:none"></div>
<div class="response" id="mce-success-
response" style="display:none"></div>
</div>
<p><a href="http://us4.campaign-
archive1.com/home/?u=2361b" title="View previous
campaigns">View previous campaigns.</a></p>
(you can ignore this part,
it’s behind the scenes
code)
Aaaaand we get this:
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
So just a few more tiny tweaks and we’re done!
1. Push the button and link right to align with the form field.
2. Style the button.
Let’s start with pushing the link over to the right.
If we look at the code two slides back, you’ll see that the link is an <a> tag and it happens to be
the only <a> tag within our optin-form div.
Therefore, we can call this tag within our div that we named with the class “optin-form”. We do
that like this:
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
.optin-form a {
margin-left: 74px;
}
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
.optin-form a {
margin-left: 74px;
}
We work from the outside, in.
First we call the outer div (.optin-form) followed by a space, then the <a> tag.
Because I only wanted to add a left margin, I just used margin-left as my property. In my form,
the correct amount was 74px to align it correctly. Yours might be different. Play with it in the
element inspector.
Note: if there were more than one <a> tag within the optin-form div, then I would have to give the <a>
that I want to affect, a class name so that I can single it out. For example, I could call it
<a class=“view-link”>. Otherwise, all the <a> tags would have the left margin applied to it.
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
.optin-form input.button {
margin-left: 74px;
}
I can apply the same principles to the button to push it to the right as well.
In the HTML code, there are two different <input> tags, but only one with a class name of
“button”. To call just this specific input tag, we write input then a period and the class name.
(No spaces between the tag, period and class name).
Refresh and now we get this:
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
Last thing to do is style that Submit button!
Add some style to that Submit button!
In my mockup, I have a fuschia colored button with rounded corners and white text. Here’s how
we add that:
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
.optin-form input.button {
margin-left: 74px;
background: #de0045;
border-radius: 4px;
}
• I also give the button the same left margin as the link so they line up.
• I gave the button a background color (#de0045 = fuschia)
• I gave the button some rounded corners using border-radius. I picked 4px to see what it
looks like.
When I refresh the page, I get this:
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
A few more tweaks:
1. Change the color of “Submit” to white and the font to Lobster Two.
2. I also want to bump up the font size in the button.
3. Give the button a little more padding to make it fatter.
4. Deepen the rounded corners to better match my mockup.
5. Remove the grey border around the button (hard to see, but it’s there).
To make these changes, I’ll:
1. Add a font color (#ffffff is white) and new font-family.
2. Add a font-size property to the button text to make it larger.
3. Add some padding. Remember how padding and margins go Top, Right, Bottom, Left? I want
to add more padding to the left and right, hence the values chosen below.
4. Change the border-radius from 4px to 6px to make it a little rounder.
5. Remove the border using border: none;
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
.optin-form input.button {
margin-left: 74px;
background: #de0045;
color: #ffffff;
font-family: ‘Lobster Two’;
font-size: 1.2em;
padding: 4px 30px 4px 30px;
border-radius: 6px;
border: none;
}
Ok let’s refresh and now we see this:
STYLE AN OPT-IN BOX WITH CSS
©2013 DesignYourOwnBlog.com. All rights reserved.
That looks pretty good to me!
If yours doesn’t look just right, keep tweaking with it using the Element Inspector.
Then copy over the styles you chose into your style sheet once you’re satisfied.
Just remember not to hit refresh.
You Made It!
How do you feel? I’d love to hear how this tutorial was to follow. I hope
you were able to create a beautiful opt-in form box that you love!
If you need any help at all, please leave a comment below (or on this
page) and I’ll be happy to answer your questions!
Thank You!!
DESIGN AN OPT-IN BOX: SHAPE + STYLE
©2013 DesignYourOwnBlog.com. All rights reserved.
Return to the Tutorial Page
THANK YOU
©2013 DesignYourOwnBlog.com. All rights reserved.
Thank you for watching Part 4 of How to Design a Custom Opt-in Form without a Plugin!
*All MailChimp links are referral links.
©2014 DesignYourOwnBlog.com. All rights reserved.