how to design a custom opt-in form without a plugin // part 2
Post on 13-May-2015
2.618 Views
Preview:
DESCRIPTION
TRANSCRIPT
Design a Custom Opt-in form
DESIGN YOUR OWN BLOG
by Marianne Manthey
without a Plugin
How to
2
DESIGN YOUR OWN BLOG
PART 2
Embed a Sign Up Form into your Blog
TABLE OF CONTENTS
©2013 DesignYourOwnBlog.com. All rights reserved.
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
Part 1 (last 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.
Part 2 (this slideshow)
Embed a Sign Up Form into your Blog
• Embed into WordPress Widget
• Embed into Blogger Gadget
TABLE OF CONTENTS
©2013 DesignYourOwnBlog.com. All rights reserved.
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.
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.
A: Embed Form into a WordPress Widget
Skip to slide 17 if you’re on Blogger
EMBED A FORM INTO YOUR WORDPRESS BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
From your Dashboard, click on Appearance>Widgets
EMBED A FORM INTO YOUR WORDPRESS BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
Expand the Sidebar
EMBED A FORM INTO YOUR WORDPRESS BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
Drag a Text Widget into the Sidebar
EMBED A FORM INTO YOUR WORDPRESS BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
Expand the Text Widget
EMBED A FORM INTO YOUR WORDPRESS BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
Go back to MailChimp and copy the embed
code from Part 1.
EMBED A FORM INTO YOUR WORDPRESS BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
Paste the HTML
code into the text
widget.
EMBED A FORM INTO YOUR WORDPRESS BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
View your blog
page…
And refresh.
EMBED A FORM INTO YOUR WORDPRESS BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
Your new form
should now
appear.
Hmm… needs
work!
EMBED A FORM INTO YOUR WORDPRESS BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
B: Embed Form into a Blogger Gadget
WordPress folks, skip to slide 24
EMBED A FORM INTO YOUR BLOGGER BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
From your Dashboard, click on Layout
EMBED A FORM INTO YOUR BLOGGER BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
Next, click Add a Gadget in the sidebar
EMBED A FORM INTO YOUR BLOGGER BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
Click the [+] to add the HTML/JavaScript gadget
EMBED A FORM INTO YOUR BLOGGER BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
Go back to MailChimp and copy the embed
code from Part 1.
EMBED A FORM INTO YOUR BLOGGER BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
Paste the HTML code into the window
EMBED A FORM INTO YOUR BLOGGER BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
View your blog
and refresh.
Your new form
should now
appear!
EMBED A FORM INTO YOUR BLOGGER BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
Our forms aren’t exactly very pretty are they?
That’s ok. In Part 3, we’ll have fun designing
our new forms!
EMBED A FORM INTO YOUR BLOG
©2013 DesignYourOwnBlog.com. All rights reserved.
Continue the 4 Part Tutorial
THANK YOU
©2013 DesignYourOwnBlog.com. All rights reserved.
Thank you for watching Part 2 of How to Design a Custom Opt-in Form without a Plugin!
*All MailChimp links are referral links.
©2013 DesignYourOwnBlog.com. All rights reserved.
top related