How to Design a Custom Opt-in form without a Plugin // Part 2: Embed a Sign Up Form into your Blog This is part 2 of a 4 part series. All 4 parts should be published by end of Nov. 2013.

1. DESIGN YOUR OWN
BLOG
How to
Design a Custom Opt-in
form
without a Plugin
2
by Marianne Manthey

2. DESIGN YOUR OWN
BLOG
PART 2
Embed a Sign Up Form into your Blog

3. TABLE OF CONTENTS
This Slideshare is Part 2 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
(last 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
(this slideshow)
Embed a 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. EMBED A FORM INTO YOUR WORDPRESS BLOG
A: Embed Form into a WordPress Widget
Skip to slide 17 if you’re on Blogger
©2013 DesignYourOwnBlog.com. All rights reserved.

9. EMBED A FORM INTO YOUR WORDPRESS BLOG
From your Dashboard, click on Appearance>Widgets
©2013 DesignYourOwnBlog.com. All rights reserved.

10. EMBED A FORM INTO YOUR WORDPRESS BLOG
Expand the Sidebar
©2013 DesignYourOwnBlog.com. All rights reserved.

11. EMBED A FORM INTO YOUR WORDPRESS BLOG
Drag a Text Widget into the Sidebar
©2013 DesignYourOwnBlog.com. All rights reserved.

12. EMBED A FORM INTO YOUR WORDPRESS BLOG
Expand the Text Widget
©2013 DesignYourOwnBlog.com. All rights reserved.

13. EMBED A FORM INTO YOUR WORDPRESS BLOG
Go back to MailChimp and copy the embed
code from Part 1.
©2013 DesignYourOwnBlog.com. All rights reserved.

14. EMBED A FORM INTO YOUR WORDPRESS BLOG
Paste the HTML
code into the text
widget.
©2013 DesignYourOwnBlog.com. All rights reserved.

15. EMBED A FORM INTO YOUR WORDPRESS BLOG
View your blog
page…
And refresh.
©2013 DesignYourOwnBlog.com. All rights reserved.

16. EMBED A FORM INTO YOUR WORDPRESS BLOG
Your new form
should now
appear.
Hmm… needs
work!
©2013 DesignYourOwnBlog.com. All rights reserved.

17. EMBED A FORM INTO YOUR BLOGGER BLOG
B: Embed Form into a Blogger Gadget
WordPress folks, skip to slide 24
©2013 DesignYourOwnBlog.com. All rights reserved.

18. EMBED A FORM INTO YOUR BLOGGER BLOG
From your Dashboard, click on Layout
©2013 DesignYourOwnBlog.com. All rights reserved.

19. EMBED A FORM INTO YOUR BLOGGER BLOG
Next, click Add a Gadget in the sidebar
©2013 DesignYourOwnBlog.com. All rights reserved.

20. EMBED A FORM INTO YOUR BLOGGER BLOG
Click the [+] to add the HTML/JavaScript gadget
©2013 DesignYourOwnBlog.com. All rights reserved.

21. EMBED A FORM INTO YOUR BLOGGER BLOG
Go back to MailChimp and copy the embed
code from Part 1.
©2013 DesignYourOwnBlog.com. All rights reserved.

22. EMBED A FORM INTO YOUR BLOGGER BLOG
Paste the HTML code into the window
©2013 DesignYourOwnBlog.com. All rights reserved.

23. EMBED A FORM INTO YOUR BLOGGER BLOG
View your blog
and refresh.
Your new form
should now
appear!
©2013 DesignYourOwnBlog.com. All rights reserved.

24. EMBED A FORM INTO YOUR BLOG
Our forms aren’t exactly very pretty are they?
That’s ok. In Part 3, we’ll have fun designing
our new forms!
©2013 DesignYourOwnBlog.com. All rights reserved.

25. THANK YOU
Thank you for watching Part 2 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.