Part 1 of a 4 part tutorial on designing a custom opt-in (sign up) form for your blog. In this tutorial, we'll be creating a form using MailChimp. In Part 2, we embed that form into our blogs. In Part 3, we'll design our forms, then In Part 4, we're going to style our embedded forms using CSS. Find the entire tutorial series on DesignYourOwnBlog.com: http://wp.me/p218Fn-tG

1. DESIGN YOUR OWN
BLOG
How to
Design a Custom Opt-in
form
without a Plugin
1
by Marianne Manthey

2. DESIGN YOUR OWN
BLOG
PART 1
Create a Sign Up Form in MailChimp

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

4. TABLE OF CONTENTS
Part 1
(this slideshow)
Create a Sign Up Form in MailChimp
• Create a List
• Create a Form
• Get the Embed Code
©2013 DesignYourOwnBlog.com. All rights reserved.

5. TABLE OF CONTENTS
Part 2
(next slideshow)
Embed the Sign Up Form into your Blog
• Embed into WordPress Widget
• Embed into Blogger Gadget
©2013 DesignYourOwnBlog.com. All rights reserved.

6. 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
©2013 DesignYourOwnBlog.com. All rights reserved.

7. TABLE OF CONTENTS
Part 4
(slideshow)
Style the Opt-in Form Design in your Blog
• A few simple CSS lessons – don’t be scared!
©2013 DesignYourOwnBlog.com. All rights reserved.

8. CREATE A SIGN UP FORM IN MAILCHIMP
A: Create a List
We need a list before we can create a form.
©2013 DesignYourOwnBlog.com. All rights reserved.

9. CREATE A SIGN UP FORM IN MAILCHIMP
From your Dashboard, click on Lists.
©2013 DesignYourOwnBlog.com. All rights reserved.

10. CREATE A SIGN UP FORM IN MAILCHIMP
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.
©2013 DesignYourOwnBlog.com. All rights reserved.

11. CREATE A SIGN UP FORM IN MAILCHIMP
Set up your new list, then click Save at the bottom of
the form.
©2013 DesignYourOwnBlog.com. All rights reserved.

12. TABLE OF CONTENTS
B: Create a Form
Now your list is set up.
Let’s create a Signup Form.
©2013 DesignYourOwnBlog.com. All rights reserved.

13. CREATE A SIGN UP FORM IN MAILCHIMP
Click Signup Forms.
©2013 DesignYourOwnBlog.com. All rights reserved.

14. CREATE A SIGN UP FORM IN MAILCHIMP
For the purposes of this tutorial, we’ll choose
Embedded forms.
©2013 DesignYourOwnBlog.com. All rights reserved.

15. CREATE A SIGN UP FORM IN MAILCHIMP
You have 3 choices of embedded forms to choose:
Classic…
©2013 DesignYourOwnBlog.com. All rights reserved.

16. CREATE A SIGN UP FORM IN MAILCHIMP
Super Slim…
©2013 DesignYourOwnBlog.com. All rights reserved.

17. CREATE A SIGN UP FORM IN MAILCHIMP
…and Naked.
©2013 DesignYourOwnBlog.com. All rights reserved.

18. CREATE A SIGN UP FORM IN MAILCHIMP
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.
©2013 DesignYourOwnBlog.com. All rights reserved.

19. CREATE A SIGN UP FORM IN MAILCHIMP
How about something like this?
©2013 DesignYourOwnBlog.com. All rights reserved.

20. CREATE A SIGN UP FORM IN MAILCHIMP
Next, we want to make sign up as easy as
possible. The less fields, the more likely
people are to Sign Up!
©2013 DesignYourOwnBlog.com. All rights reserved.

21. CREATE A SIGN UP FORM IN MAILCHIMP
Let’s reduce the form to show only required fields.
By default, this is just Email.
©2013 DesignYourOwnBlog.com. All rights reserved.

22. CREATE A SIGN UP FORM IN MAILCHIMP
Simplify further by removing the required field
indicators.
©2013 DesignYourOwnBlog.com. All rights reserved.

23. CREATE A SIGN UP FORM IN MAILCHIMP
Scroll down and check it if you’d like to include
an archive link.*
©2013 DesignYourOwnBlog.com. All rights reserved.

24. CREATE A SIGN UP FORM IN MAILCHIMP
The archive link will show prospective
subscribers your past newsletters once you’ve
sent one out. I’m going to leave it checked.
©2013 DesignYourOwnBlog.com. All rights reserved.

25. CREATE A SIGN UP FORM IN MAILCHIMP
We’re done creating
our form!
©2013 DesignYourOwnBlog.com. All rights reserved.

26. CREATE A SIGN UP FORM IN MAILCHIMP
C: Get the Embed Code
Copy your code and we’ll move
on to Part 2.
©2013 DesignYourOwnBlog.com. All rights reserved.

27. CREATE A SIGN UP FORM IN MAILCHIMP
Copy this embed HTML code
©2013 DesignYourOwnBlog.com. All rights reserved.

28. 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.
©2013 DesignYourOwnBlog.com. All rights reserved.
©2013 DesignYourOwnBlog.com. All rights reserved.