How to Design a Custom Opt-in form without a Plugin // Part 1
-
Upload
marianne-manthey -
Category
Design
-
view
109 -
download
2
description
Transcript of How to Design a Custom Opt-in form without a Plugin // Part 1
![Page 1: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/1.jpg)
Design a Custom Opt-in form
DESIGN YOUR OWN BLOG
by Marianne Manthey
without a Plugin
How to
1
![Page 2: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/2.jpg)
DESIGN YOUR OWN BLOG
PART 1
Create a Sign Up Form in MailChimp
![Page 3: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/3.jpg)
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
![Page 4: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/4.jpg)
Part 1 (this slideshow)
Create a Sign Up Form in MailChimp
• Create a List
• Create a Form
• Get the Embed Code
TABLE OF CONTENTS
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 5: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/5.jpg)
Part 2 (next slideshow)
Embed the Sign Up Form into your Blog
• Embed into WordPress Widget
• Embed into Blogger Gadget
TABLE OF CONTENTS
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 6: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/6.jpg)
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
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 7: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/7.jpg)
Part 4 (slideshow)
Style the Opt-in Form Design in your Blog
• A few simple CSS lessons – don’t be scared!
TABLE OF CONTENTS
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 8: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/8.jpg)
A: Create a List
We need a list before we can create a form.
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 9: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/9.jpg)
From your Dashboard, click on Lists.
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 10: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/10.jpg)
Click Create List and go on to the next slide.
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
If you already have a list, click on the down
arrow next to stats and select Sign Up Forms
and skip to slide 14.
![Page 11: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/11.jpg)
Set up your new list, then click Save at the bottom of
the form.
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 12: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/12.jpg)
B: Create a Form
Now your list is set up.
Let’s create a Signup Form.
TABLE OF CONTENTS
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 13: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/13.jpg)
Click Signup Forms.
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 14: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/14.jpg)
For the purposes of this tutorial, we’ll choose
Embedded forms.
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 15: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/15.jpg)
You have 3 choices of embedded forms to choose:
Classic…
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 16: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/16.jpg)
Super Slim…
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 17: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/17.jpg)
…and Naked.
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 18: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/18.jpg)
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.
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 19: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/19.jpg)
How about something like this?
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 20: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/20.jpg)
Next, we want to make sign up as easy as
possible. The less fields, the more likely
people are to Sign Up!
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 21: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/21.jpg)
Let’s reduce the form to show only required fields.
By default, this is just Email.
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 22: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/22.jpg)
Simplify further by removing the required field
indicators.
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 23: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/23.jpg)
Scroll down and check it if you’d like to include
an archive link.*
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 24: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/24.jpg)
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
The archive link will show prospective
subscribers your past newsletters once you’ve
sent one out. I’m going to leave it checked.
![Page 25: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/25.jpg)
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
We’re done creating
our form!
![Page 26: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/26.jpg)
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
C: Get the Embed Code
Copy your code and we’ll move
on to Part 2.
![Page 27: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/27.jpg)
Copy this embed HTML code
CREATE A SIGN UP FORM IN MAILCHIMP
©2013 DesignYourOwnBlog.com. All rights reserved.
![Page 28: How to Design a Custom Opt-in form without a Plugin // Part 1](https://reader033.fdocuments.in/reader033/viewer/2022051412/54c7ec804a795916268b4647/html5/thumbnails/28.jpg)
Continue the 4 Part Tutorial
THANK YOU
©2013 DesignYourOwnBlog.com. All rights reserved.
Thank you for watching Part 1 of How to Design a Custom Opt-in Form without a Plugin!
*All MailChimp links are referral links.
©2013 DesignYourOwnBlog.com. All rights reserved.