How to Design a Custom Opt-in form without a Plugin // Part 3

transcript

Design a Custom Opt-in form

DESIGN YOUR OWN BLOG

by Marianne Manthey

without a Plugin

How to

DESIGN YOUR OWN BLOG

PART 3

Designing the Sign Up Form for Your Blog

TABLE OF CONTENTS

This Slideshare is Part 3 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

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 (this slideshare + video on the blog)

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 (slideshow)

Style the Opt-in Form Design in your Blog

• A few simple CSS lessons – don’t be scared!

TABLE OF CONTENTS

a: Decide on a Shape + Style

The first thing we need to do is plan out our opt-in box.

What will you include in it?

• Do you have a sign-up incentive?

• A graphic you want to include?

• Some social media icons?

• Or do you just want to go minimal?

DESIGN AN OPT-IN BOX: SHAPE + STYLE

Sign Up Incentives

Giving an incentive is a good way to build your list by encouraging people to sign up.

Giving away a free

download? Add an

image of it and a

couple of bullet points

about it.

Does your newsletter

include exclusive

subscriber-only

content? Then say so.

Want to give readers

choices? Let them sign

up for all new posts or

less frequent newsletters.

Incentives? Maybe later…

If you’re not ready to offer anything other than your awesome posts or

newsletter, just go with a simple little sign up box.

Now that you know what you’re including in your opt-in

box, decide on the shape you want to go with:

Vertical Horizontal

Square

Next, take a look at your blog.

Take note of the colors used, the typefaces employed, and the style of the

design.

We want to create an opt-in box that matches the style of our

blog, BUT stands out from the rest of the elements on the page.

The box should draw attention to itself,

but not so much that it looks gaudy

On my homepage at DesignYourOwnBlog.com…

I use 3 main colors: an aqua blue, a lime green and orange.

The design has a flat look to it, meaning no gradients, no drop-shadows,

no illustration or hand-drawn look.

So I went for a flat, color-block style design for my opt-in box.

Because my header

creates a huge aqua

blue color-block, I went

with green for the opt-in

box so that it stands out

from the header.

This is what you want

to do too.

b: Pick a Background

Hopefully you now have an idea of the shape

and style you’re going with.

DESIGN AN OPT-IN BOX: PICK A BACKGROUND

Now let’s find an appropriate

background for our design.

4 easy ways to find a background to start out with.

1. Solid Colors

Go the “simple” route like I did and use

solid colors for your background.

Use shapes to make it interesting:

2. Digital Scrapbooking or Textured Paper

Find a nice pattern and color that matches the style

of your design.

Search for “free digital scrapbooking paper”* or

“digital scrapbook kits.”

*Just be sure to read the terms of use before

using any free papers or elements on your blog.

3. Photography

Use your own or download some stock photography. There’s

plenty of free stock if you look.

It’s usually best to use something a little abstract or blurred.

We don’t want it to interfere with the content that’s over it.

The last one is an easy little trick I discovered

4. Project Life Cards >>

Project Life cards are journaling cards

used in pocket binder-style scrapbooks.

Many already have a great design that

could stand on its own.

The beauty is that the proportions of the

cards are perfect for a rectangular sign

up form! And you can even crop one (one

w/o a border) to create a square form too!

Where to find free cards?*

FabnFree.com

HappinessIsHomemade.net

Or search for “Project Life printables.”

*Just be sure to read the terms of use

before using any of these on your blog.

Project Life Cards

These cards below are great starting points! Ignore any text on them for now

and picture your title, form and button over these backgrounds.

Try to choose a background with little contrast.

Don’t pick a design that's too busy

While we do want the opt-in box to

stand out, we don't want the form itself to

get lost in it's background.

What we really want to stand out the

most is the Subscribe button and the form

title. The form title is what attracts people

to sign up in the first place.

Still in love with a busy pattern?

Create a border out of it!

Just add a white square or rectangle

inside it.

If the pattern is not TOO busy, you can

add a tiny bit of opacity to the white

square to have the background show

through just a tad.

*Disclaimer*

Design Your Own (lovely) Blog is not responsible for copyright infringement

made by readers of this blog and/or Slideshare for using resources in a

manner that violates their terms of use.

Resources are provided as examples.

It is ultimately your responsibility to seek and read the terms of use for each

graphic you wish to use before implementing it on your blog.

DESIGN AN OPT-IN BOX: FORM SIZE

c: What Size is Our Form?

Got your background picked out? Good, we’ve got one more

thing to do before we go and open up PicMonkey.

We need to go to our blogs and find out the width of our form.

We’ll use the browser’s code inspector to do this.

This is my test site and here is the form we embedded in Part 2.

We want to figure out the width of our form because if we use an image as its

background, we want to make sure it’s just the right size and not stretched or squished.

Now Please Note!

I highly recommend using Chrome or Safari to view your

blog for this because they already have a great code

inspector built in.

If you want to use Firefox, install the Firebug add-on as it's

way better than the built in code inspector.

And definitely do not use Internet Explorer for this. It has

the worst one. Well it’s also the worst browser, but I

digress....

Ok so back to our blogs. I am going to put my mouse very close to the form

and right-click and select “Inspect Element.”

Now the code inspector comes up and what we see here is all the HTML for the

webpage on the left and the CSS that applies to whatever element is selected on the

right.

If we hover over the HTML items, you’ll see that the corresponding item on the page

becomes highlighted in blue.

the page

HTML H2

(heading 2)

The reason I like Chrome so much is that you’ll see this yellow tooltip when you hover

over an element, like the form. That tooltip gives you the size of the element.

element

300px X

form tag

So it looks like our form is 300 pixels wide

That’s just what we were looking for. We don’t care about the

height. Next, let’s get designing!

The rest of Part 3 is continued on video. If you aren’t viewing this Slideshare

on www.designyourownblog.com, click that link to go to it now.

See you there!

Credits

All form examples in this Slideshare are listed below in order of appearance

(without repeats):

whimseybox.com

stephanieryandesign.com

ohmyhandmade.com

fairydustteaching.com

ruffledblog.com

fellowfellow.com

designyourownblog.com

tidymom.net

iheartblogshop.com

100layercake.com

thepleasureretreat.com

mummade.co.nz

sfgirlbybay.com

thepleatedpoppy.com

pittr-pattr.com

psimadethis.com

*I feel awful, but can’t find the source for the opt in with green photo background. If

someone can identify it or it’s yours, please do let me know! I’d like to give proper credit.

Continue the 4 Part Tutorial

THANK YOU

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

*All MailChimp links are referral links.

How to Design a Custom Opt-in form without a Plugin // Part 3

Technology