Más contenido relacionado How to Design a Custom Opt-in form without a Plugin // Part 13. 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.