SlideShare une entreprise Scribd logo
1  sur  25
Télécharger pour lire hors ligne
DESIGN YOUR OWN

BLOG

How to

Design a Custom Opt-in

form

without a Plugin
2

by Marianne Manthey
DESIGN YOUR OWN

BLOG

PART 2
Embed a Sign Up Form into your Blog
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.
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.
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.
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.
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.
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.
EMBED A FORM INTO YOUR WORDPRESS BLOG

From your Dashboard, click on Appearance>Widgets

©2013 DesignYourOwnBlog.com. All rights reserved.
EMBED A FORM INTO YOUR WORDPRESS BLOG

Expand the Sidebar

©2013 DesignYourOwnBlog.com. All rights reserved.
EMBED A FORM INTO YOUR WORDPRESS BLOG

Drag a Text Widget into the Sidebar

©2013 DesignYourOwnBlog.com. All rights reserved.
EMBED A FORM INTO YOUR WORDPRESS BLOG

Expand the Text Widget

©2013 DesignYourOwnBlog.com. All rights reserved.
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.
EMBED A FORM INTO YOUR WORDPRESS BLOG

Paste the HTML
code into the text
widget.

©2013 DesignYourOwnBlog.com. All rights reserved.
EMBED A FORM INTO YOUR WORDPRESS BLOG

View your blog

page…
And refresh.

©2013 DesignYourOwnBlog.com. All rights reserved.
EMBED A FORM INTO YOUR WORDPRESS BLOG

Your new form
should now

appear.

Hmm… needs
work!
©2013 DesignYourOwnBlog.com. All rights reserved.
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.
EMBED A FORM INTO YOUR BLOGGER BLOG

From your Dashboard, click on Layout

©2013 DesignYourOwnBlog.com. All rights reserved.
EMBED A FORM INTO YOUR BLOGGER BLOG

Next, click Add a Gadget in the sidebar

©2013 DesignYourOwnBlog.com. All rights reserved.
EMBED A FORM INTO YOUR BLOGGER BLOG

Click the [+] to add the HTML/JavaScript gadget

©2013 DesignYourOwnBlog.com. All rights reserved.
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.
EMBED A FORM INTO YOUR BLOGGER BLOG

Paste the HTML code into the window

©2013 DesignYourOwnBlog.com. All rights reserved.
EMBED A FORM INTO YOUR BLOGGER BLOG

View your blog
and refresh.

Your new form
should now

appear!

©2013 DesignYourOwnBlog.com. All rights reserved.
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.
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.

Contenu connexe

En vedette

En vedette (6)

A Creed for Those Who Have Suffered- An Inspirational Poem About The Meaning ...
A Creed for Those Who Have Suffered- An Inspirational Poem About The Meaning ...A Creed for Those Who Have Suffered- An Inspirational Poem About The Meaning ...
A Creed for Those Who Have Suffered- An Inspirational Poem About The Meaning ...
 
MailChimp Website Tutorial
MailChimp Website TutorialMailChimp Website Tutorial
MailChimp Website Tutorial
 
MAILCHIMP: A tool for Newbies and Expert Email Marketers
MAILCHIMP: A tool for Newbies and Expert Email Marketers	MAILCHIMP: A tool for Newbies and Expert Email Marketers
MAILCHIMP: A tool for Newbies and Expert Email Marketers
 
How to use mail chimp tutorial by Louie Tuboro
How to use mail chimp tutorial by Louie TuboroHow to use mail chimp tutorial by Louie Tuboro
How to use mail chimp tutorial by Louie Tuboro
 
Marketing Automation Hacks: MailChimp
Marketing Automation Hacks: MailChimpMarketing Automation Hacks: MailChimp
Marketing Automation Hacks: MailChimp
 
Mailchimp
MailchimpMailchimp
Mailchimp
 

Dernier

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Dernier (20)

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 

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

  • 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.