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

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

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

TABLE OF CONTENTS




A: Create a List

We need a list before we can create a form.

CREATE A SIGN UP FORM IN MAILCHIMP





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.





B: Create a Form

Now your list is set up.

Let’s create a Signup Form.

TABLE OF CONTENTS




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.



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

Copy this embed HTML code





Continue the 4 Part Tutorial

THANK YOU


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

*All MailChimp links are referral links.


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


