design a custom opt-in form without a plugin // part 4

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

https://www.facebook.com/DesignYourOwnLovelyBlog

https://twitter.com/marianney

http://designyourownblog.com/blog-design-resources/tutorials/how-to-design-a-custom-opt-in-form-without-a-plugin-part-1

Part 1 (first slideshow)

Create a Sign Up Form in MailChimp*

• Create a List

• Create a Form

• Get the Embed Code

TABLE OF CONTENTS


http://eepurl.com/wV_FD



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!

TABLE OF CONTENTS




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




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.

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.



Tip:

If you’re not that

familiar with

CSS, you may

want to read this

article before

moving on.



http://designyourownblog.com/blog-design/web-design-term-css/

http://designyourownblog.com/blog-design/web-design-term-css/

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



http://support.godaddy.com/help/article/3239/uploading-files-through-your-control-panel?locale=en

http://support.hostgator.com/articles/ftp-getting-started

https://my.bluehost.com/cgi/help/ftpaccounts

http://wiki.lunarpages.com/FTP_Basics



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





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.



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



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





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



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.



http://url/airmail-bg.jpg







.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

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.



Here is our

heading, it’s

inside an h2

(heading 2)

tag.

Here is the

h2 on the

page, also

highlighted





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.



http://www.cheatography.com/davechild/cheat-sheets/css2/



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

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.



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 {


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

http://designyourownblog.com/blog-design/color/how-to-choose-colors-blog-website/

http://designyourownblog.com/blog-design/color/how-to-choose-colors-blog-website/

http://bit.ly/1l50ZJE



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;

}

• 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?





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.



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>


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


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



Here is my label that

now says “Enter

Email”



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



</div>









</div>






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



Now the button is just

below the form field

And the link is now at

the bottom.



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



</div>









</div>




(you can ignore this part,

it’s behind the scenes

code)



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.





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



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.



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






Return to the Tutorial Page

THANK YOU


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

*All MailChimp links are referral links.





http://eepurl.com/wV_FD

design a custom opt-in form without a plugin // part 4

Design

csslets style

style sheets

blank style sheet

optin form design

cascading style sheet

optin boxes

new custom style sheet

new style sheet heres