Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DESIGN YOUR OWN

BLOG

How to

Design a Custom Opt-in

form

without a Plugin
1

by Marianne Manthey
DESIGN YOUR OWN

BLOG

PART 1
Create a Sign Up Form in MailChimp
TABLE OF CONTENTS

This Slideshare is Part 1 of a 4 part tutorial
on designing a custom opt-in (sign up) form
for your blo...
TABLE OF CONTENTS

Part 1

(this slideshow)

Create a Sign Up Form in MailChimp
• Create a List

• Create a Form
• Get the...
TABLE OF CONTENTS

Part 2

(next slideshow)

Embed the Sign Up Form into your Blog
• Embed into WordPress Widget

• Embed ...
TABLE OF CONTENTS

Part 3

(video)

Design Your Opt-in Form in PicMonkey
• Upload a background “photo”

• Add graphic elem...
TABLE OF CONTENTS

Part 4

(slideshow)

Style the Opt-in Form Design in your Blog
• A few simple CSS lessons – don’t be sc...
CREATE A SIGN UP FORM IN MAILCHIMP

A: Create a List

We need a list before we can create a form.

©2013 DesignYourOwnBlog...
CREATE A SIGN UP FORM IN MAILCHIMP

From your Dashboard, click on Lists.

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

Set up your new list, then click Save at the bottom of
the form.

©2013 DesignYourOwnB...
TABLE OF CONTENTS

B: Create a Form

Now your list is set up.
Let’s create a Signup Form.

©2013 DesignYourOwnBlog.com. Al...
CREATE A SIGN UP FORM IN MAILCHIMP

Click Signup Forms.

©2013 DesignYourOwnBlog.com. All rights reserved.
CREATE A SIGN UP FORM IN MAILCHIMP

For the purposes of this tutorial, we’ll choose
Embedded forms.

©2013 DesignYourOwnBl...
CREATE A SIGN UP FORM IN MAILCHIMP

You have 3 choices of embedded forms to choose:
Classic…

©2013 DesignYourOwnBlog.com....
CREATE A SIGN UP FORM IN MAILCHIMP

Super Slim…

©2013 DesignYourOwnBlog.com. All rights reserved.
CREATE A SIGN UP FORM IN MAILCHIMP

…and Naked.

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

How about something like this?

©2013 DesignYourOwnBlog.com. All rights reserved.
CREATE A SIGN UP FORM IN MAILCHIMP

Next, we want to make sign up as easy as

possible. The less fields, the more likely
p...
CREATE A SIGN UP FORM IN MAILCHIMP

Let’s reduce the form to show only required fields.
By default, this is just Email.

©...
CREATE A SIGN UP FORM IN MAILCHIMP

Simplify further by removing the required field
indicators.

©2013 DesignYourOwnBlog.c...
CREATE A SIGN UP FORM IN MAILCHIMP

Scroll down and check it if you’d like to include
an archive link.*

©2013 DesignYourO...
CREATE A SIGN UP FORM IN MAILCHIMP

The archive link will show prospective

subscribers your past newsletters once you’ve
...
CREATE A SIGN UP FORM IN MAILCHIMP

We’re done creating
our form!

©2013 DesignYourOwnBlog.com. All rights reserved.
CREATE A SIGN UP FORM IN MAILCHIMP

C: Get the Embed Code

Copy your code and we’ll move
on to Part 2.

©2013 DesignYourOw...
CREATE A SIGN UP FORM IN MAILCHIMP

Copy this embed HTML code

©2013 DesignYourOwnBlog.com. All rights reserved.
THANK YOU
Thank you for watching Part 1 of How to Design a Custom Opt-in Form without a Plugin!

Continue the 4 Part Tutor...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
How to Design a Custom Opt-in form without a Plugin // Part 2
Next
Download to read offline and view in fullscreen.

7

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

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

  1. 1. DESIGN YOUR OWN BLOG How to Design a Custom Opt-in form without a Plugin 1 by Marianne Manthey
  2. 2. DESIGN YOUR OWN BLOG PART 1 Create a Sign Up Form in MailChimp
  3. 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. 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. 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. 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. 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. 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. 9. CREATE A SIGN UP FORM IN MAILCHIMP From your Dashboard, click on Lists. ©2013 DesignYourOwnBlog.com. All rights reserved.
  10. 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. 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. 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. 13. CREATE A SIGN UP FORM IN MAILCHIMP Click Signup Forms. ©2013 DesignYourOwnBlog.com. All rights reserved.
  14. 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. 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. 16. CREATE A SIGN UP FORM IN MAILCHIMP Super Slim… ©2013 DesignYourOwnBlog.com. All rights reserved.
  17. 17. CREATE A SIGN UP FORM IN MAILCHIMP …and Naked. ©2013 DesignYourOwnBlog.com. All rights reserved.
  18. 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. 19. CREATE A SIGN UP FORM IN MAILCHIMP How about something like this? ©2013 DesignYourOwnBlog.com. All rights reserved.
  20. 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. 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. 22. CREATE A SIGN UP FORM IN MAILCHIMP Simplify further by removing the required field indicators. ©2013 DesignYourOwnBlog.com. All rights reserved.
  23. 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. 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. 25. CREATE A SIGN UP FORM IN MAILCHIMP We’re done creating our form! ©2013 DesignYourOwnBlog.com. All rights reserved.
  26. 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. 27. CREATE A SIGN UP FORM IN MAILCHIMP Copy this embed HTML code ©2013 DesignYourOwnBlog.com. All rights reserved.
  28. 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.
  • AlissiaHaggard

    May. 13, 2016
  • EvaEastman

    Mar. 17, 2015
  • SherriAttili

    Jan. 12, 2015
  • sandytanseokchuan

    Jun. 5, 2014
  • melaniekissell

    Jan. 3, 2014
  • analucia410

    Nov. 15, 2013
  • barbsibbing

    Nov. 15, 2013

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

Views

Total views

14,346

On Slideshare

0

From embeds

0

Number of embeds

11,339

Actions

Downloads

37

Shares

0

Comments

0

Likes

7

×