How to Design a Custom Opt-in form without a Plugin // Part 1
•
7 likes•14,551 views
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
Recommended
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
- 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.