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

DESIGN YOUR OWN

BLOG

How to

Design a Custom Opt-in

form

without a Plugin
3

by Marianne Manthey

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

©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

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


DESIGN AN OPT-IN BOX: SHAPE + STYLE

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?


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

Giving away a free

Does your newsletter

Want to give readers

download? Add an

include exclusive

choices? Let them sign

image of it and a

subscriber-only

up for all new posts or

couple of bullet points

content? Then say so.

less frequent newsletters.

about it.



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.


DESIGN AN OPT-IN BOX: PICK A BACKGROUND

b: Pick a Background
Hopefully you now have an idea of the shape
and style you’re going with.

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.


DESIGN AN OPT-IN BOX: FORM SIZE

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



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.

HTML
CSS


If we hover over the HTML items, you’ll see that the corresponding item on the page
becomes highlighted in blue.

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

Form
element
size:
300px X
141px
HTML
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

100layercake.com

stephanieryandesign.com

thepleasureretreat.com

ohmyhandmade.com

mummade.co.nz

fairydustteaching.com

sfgirlbybay.com

ruffledblog.com

thepleatedpoppy.com

fellowfellow.com

pittr-pattr.com

designyourownblog.com

*

tidymom.net

psimadethis.com

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

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

Continue the 4 Part Tutorial
*All MailChimp links are referral links.



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

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (6)

Último

Último (20)

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