Design a Custom Opt-in Form without a Plugin // Part 4

DESIGN YOUR OWN

BLOG

How to

Design a Custom Opt-in

form

without a Plugin
4

by Marianne Manthey

DESIGN YOUR OWN

BLOG

PART 4
Style the Opt-in Form Design in your Blog

TABLE OF CONTENTS

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

©2013 DesignYourOwnBlog.com. All rights reserved.

TABLE OF CONTENTS

Part 1

(first slideshow)

Create a Sign Up Form in MailChimp*
• Create a List

• Create a Form
• Get the Embed Code


TABLE OF CONTENTS

Part 2

(second slideshow)

Embed a Sign Up Form into your Blog
• Embed into WordPress Widget

• Embed into Blogger Gadget


TABLE OF CONTENTS

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

Part 4

(this slideshow)

Style the Opt-in Form Design in your Blog
• A few simple CSS lessons – don’t be scared!


STYLE AN OPT-IN BOX WITH CSS

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:


Then in Part 3, we had fun designing and I designed this fun looking
form and opt-in box:

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:

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.



Now we’ll do a little CSS editing
CSS stands for Cascading Style Sheet.

Tip:
If you’re not that

This is the document that allows you to change the appearance

familiar with

of HTML elements on the page: the size, style, font, and color

CSS, you may

of text; background colors; border styles; etc.

want to read this
article before

We’ll begin by creating a new custom style sheet.


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.


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.


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.


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]”



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)



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.”



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.YOURURL.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.*


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) ….



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.



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.

Go to your Text Widget (WordPress) or HTML Gadget (Blogger) and
take a look at the HTML code we previously pasted in.


<div id="mc_embed_signup">
<form
action="http://designyourownblog.us4.list
-manage.com/subscribe/" method="post"
id="mc-embedded-subscribe-form" name="mcembedded-subscribe-form" class="validate"
target="_blank" novalidate>
<h2>Get Lovely Design in Your
Inbox!</h2>
<div class="mc-field-group">
...


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).

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.



Back to custom.css
Let’s call our new class name in the style sheet.

Tip:

We do that like this:
I highly suggest
you open a new
.optin-form {
}

browser tab so
that you can
quickly jump

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 { }


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.



.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 ;


Now let’s add height and width.
.optin-form {
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.


You should now see something like this (but with your own image):

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.

See our
new class
name?


And the
style
declarations 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.

Here is the
h2 on the
page, also
highlighted

Here is our
heading, it’s
inside an h2
(heading 2)
tag.



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.

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.


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.


ANOTHER NOTE ;)

FYI:

You may have also noticed that the h2 tag in the style sheet does not
begin with a period.

You may notice

in your style
That’s because only class names begin with a period.

sheets that there
are words that

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.

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:

margin



•

Padding adds space INSIDE an element, pushing its contents
inward.

•

Margins add space OUTSIDE an element, pushing other
elements away from it.


padding

Here is your content,
contained within
padding inside your 
div (light blue box).

- - - - - - - - - -div width- - - - - - - - - 

Here’s how we add padding
.optin-form {
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.

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.

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.
@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:
.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:

.optin-form h2 {
font-family: ‘Lobster Two’;
color: #283043;
font-size: 1.6em;
}

•

Here is our result so far:
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.



Phew, are you still with me?
Is this starting to make sense?


Here’s where we are compared to what we’re going for:

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:


No Problem!
We’ll override it by just adding a new line to our definition for optin-form h2:

.optin-form h2 {
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.
<h2>Get Lovely Design in Your Inbox!</h2>
<label for="mce-EMAIL">Email </label>
<input type="email" value="" name="EMAIL"
class="required email" id="mce-EMAIL">
</div>
<p><a href="http://us4.campaignarchive1.com/home/?u=2361b" title="View previous
campaigns">View previous campaigns.</a></p>
<div id="mce-responses" class="clear">
<div class="response" id="mce-errorresponse" style="display:none"></div>
<div class="response" id="mce-successresponse" style="display:none"></div>
</div>
<div class="clear"><input type="submit"
value="Subscribe" name="subscribe" id="mcembedded-subscribe" class="button"></div>


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>

I edited the label below. That was easy.

<label for="mce-EMAIL">Enter Email </label>
</div>
</div>


Here is my label that
now says “Enter
Email”

Next, I took the entire yellow highlighted areas and swapped them.

<label for="mce-EMAIL">Email </label>
</div>
</div>


Now the button is just
below the form field

(you can ignore this part,
it’s behind the scenes
code)

And the link is now at
the bottom.

Aaaaand we get this:

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:

.optin-form a {
margin-left: 74px;
}


.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.


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).

.optin-form input.button {
margin-left: 74px;
}


Refresh and now we get this:

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:
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:

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;
margin-left: 74px;
background: #de0045;
color: #ffffff;
font-size: 1.2em;
padding: 4px 30px 4px 30px;
border-radius: 6px;
border: none;
}

Ok let’s refresh and now we see this:

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.


DESIGN AN OPT-IN BOX: SHAPE + STYLE

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!!


THANK YOU
Thank you for watching Part 4 of How to Design a Custom Opt-in Form without a Plugin!

Return to the Tutorial Page
*All MailChimp links are referral links.


Design a Custom Opt-in Form without a Plugin // Part 4

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (13)

Último

Último (20)

Design a Custom Opt-in Form without a Plugin // Part 4