Design a Custom Opt-in form

DESIGN YOUR OWN BLOG

by Marianne Manthey

without a Plugin

How to

1

DESIGN YOUR OWN BLOG

PART 1

Create a Sign Up Form in MailChimp

TABLE OF CONTENTS

©2013 DesignYourOwnBlog.com. All rights reserved.

This Slideshare is Part 1 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 (this 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 (next slideshow)

Embed the Sign Up Form into your Blog

• Embed into WordPress Widget

• Embed into Blogger Gadget

TABLE OF CONTENTS

©2013 DesignYourOwnBlog.com. All rights reserved.

Part 3 (video)

Design Your Opt-in Form in PicMonkey

• Upload a background “photo”

• Add graphic elements

• Save as a background image

TABLE OF CONTENTS

©2013 DesignYourOwnBlog.com. All rights reserved.

Part 4 (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.

A: Create a List

We need a list before we can create a form.

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

From your Dashboard, click on Lists.

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

Click Create List and go on to the next slide.

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

If you already have a list, click on the down

arrow next to stats and select Sign Up Forms

and skip to slide 14.

Set up your new list, then click Save at the bottom of

the form.

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

B: Create a Form

Now your list is set up.

Let’s create a Signup Form.

TABLE OF CONTENTS

©2013 DesignYourOwnBlog.com. All rights reserved.

Click Signup Forms.

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

For the purposes of this tutorial, we’ll choose

Embedded forms.

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

You have 3 choices of embedded forms to choose:

Classic…

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

Super Slim…

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

…and Naked.

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

We’ll use the Naked form as it will allow

us to start our CSS styles from scratch.

But first let’s come up with a better form title

than Subscribe to our mailing list.

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

How about something like this?

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

Next, we want to make sign up as easy as

possible. The less fields, the more likely

people are to Sign Up!

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

Let’s reduce the form to show only required fields.

By default, this is just Email.

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

Simplify further by removing the required field

indicators.

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

Scroll down and check it if you’d like to include

an archive link.*

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

The archive link will show prospective

subscribers your past newsletters once you’ve

sent one out. I’m going to leave it checked.

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

We’re done creating

our form!

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

C: Get the Embed Code

Copy your code and we’ll move

on to Part 2.

Copy this embed HTML code

CREATE A SIGN UP FORM IN MAILCHIMP

©2013 DesignYourOwnBlog.com. All rights reserved.

Continue the 4 Part Tutorial

THANK YOU

©2013 DesignYourOwnBlog.com. All rights reserved.

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

*All MailChimp links are referral links.

©2013 DesignYourOwnBlog.com. All rights reserved.