Your SlideShare is downloading. ×
How to Design a Custom Opt-in form without a Plugin // Part 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

7,640
views

Published on

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

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

Published in: Design, Business, Technology

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,640
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
17
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×