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

4,408 views

Published on

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.

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,408
On SlideShare
0
From Embeds
0
Number of Embeds
3,281
Actions
Shares
0
Downloads
31
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. DESIGN YOUR OWN BLOG How to Design a Custom Opt-in form without a Plugin 2 by Marianne Manthey
  2. 2. DESIGN YOUR OWN BLOG PART 2 Embed a Sign Up Form into your Blog
  3. 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. 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. 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. 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. 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. 9. EMBED A FORM INTO YOUR WORDPRESS BLOG From your Dashboard, click on Appearance>Widgets ©2013 DesignYourOwnBlog.com. All rights reserved.
  10. 10. EMBED A FORM INTO YOUR WORDPRESS BLOG Expand the Sidebar ©2013 DesignYourOwnBlog.com. All rights reserved.
  11. 11. EMBED A FORM INTO YOUR WORDPRESS BLOG Drag a Text Widget into the Sidebar ©2013 DesignYourOwnBlog.com. All rights reserved.
  12. 12. EMBED A FORM INTO YOUR WORDPRESS BLOG Expand the Text Widget ©2013 DesignYourOwnBlog.com. All rights reserved.
  13. 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. 14. EMBED A FORM INTO YOUR WORDPRESS BLOG Paste the HTML code into the text widget. ©2013 DesignYourOwnBlog.com. All rights reserved.
  15. 15. EMBED A FORM INTO YOUR WORDPRESS BLOG View your blog page… And refresh. ©2013 DesignYourOwnBlog.com. All rights reserved.
  16. 16. EMBED A FORM INTO YOUR WORDPRESS BLOG Your new form should now appear. Hmm… needs work! ©2013 DesignYourOwnBlog.com. All rights reserved.
  17. 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. 18. EMBED A FORM INTO YOUR BLOGGER BLOG From your Dashboard, click on Layout ©2013 DesignYourOwnBlog.com. All rights reserved.
  19. 19. EMBED A FORM INTO YOUR BLOGGER BLOG Next, click Add a Gadget in the sidebar ©2013 DesignYourOwnBlog.com. All rights reserved.
  20. 20. EMBED A FORM INTO YOUR BLOGGER BLOG Click the [+] to add the HTML/JavaScript gadget ©2013 DesignYourOwnBlog.com. All rights reserved.
  21. 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. 22. EMBED A FORM INTO YOUR BLOGGER BLOG Paste the HTML code into the window ©2013 DesignYourOwnBlog.com. All rights reserved.
  23. 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. 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. 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.

×