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

DESIGN YOUR OWN

BLOG

How to

Design a Custom Opt-in

form

without a Plugin
1

by Marianne Manthey

DESIGN YOUR OWN

BLOG

PART 1
Create a Sign Up Form in MailChimp

TABLE OF CONTENTS

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

©2013 DesignYourOwnBlog.com. All rights reserved.

TABLE OF CONTENTS

Part 1

(this slideshow)

Create a Sign Up Form in MailChimp
• Create a List

• Create a Form
• Get the Embed Code


TABLE OF CONTENTS

Part 2

(next slideshow)

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

• Embed into Blogger Gadget


TABLE OF CONTENTS

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

Part 4

(slideshow)

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


CREATE A SIGN UP FORM IN MAILCHIMP

A: Create a List

We need a list before we can create a form.



From your Dashboard, click on Lists.



Click Create List and go on to the next slide.

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.


TABLE OF CONTENTS

B: Create a Form

Now your list is set up.
Let’s create a Signup Form.



Click Signup Forms.



For the purposes of this tutorial, we’ll choose
Embedded forms.



You have 3 choices of embedded forms to choose:
Classic…



Super Slim…



…and Naked.



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.



How about something like this?



Next, we want to make sign up as easy as

possible. The less fields, the more likely
people are to Sign Up!



Let’s reduce the form to show only required fields.
By default, this is just Email.



Simplify further by removing the required field
indicators.



Scroll down and check it if you’d like to include
an archive link.*



The archive link will show prospective

subscribers your past newsletters once you’ve
sent one out. I’m going to leave it checked.



We’re done creating
our form!



C: Get the Embed Code

Copy your code and we’ll move
on to Part 2.



Copy this embed HTML code


THANK YOU
Thank you for watching Part 1 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 1

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

Recommended

More Related Content

Viewers also liked

Viewers also liked(10)

Recently uploaded

Recently uploaded(20)

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