How to Design a Custom Opt-in form without a Plugin // Part 3
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 2,641 views
Uploaded on

How to Design a Custom Opt-in form without a Plugin // Part 3A - Today we plan the design of our forms and opt-in boxes.

How to Design a Custom Opt-in form without a Plugin // Part 3A - Today we plan the design of our forms and opt-in boxes.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,641
On Slideshare
909
From Embeds
1,732
Number of Embeds
5

Actions

Shares
Downloads
13
Comments
0
Likes
1

Embeds 1,732

http://designyourownblog.com 1,717
http://feeds.feedburner.com 12
http://feedly.com 1
http://us4.campaign-archive2.com 1
http://www.inspectlet.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. DESIGN YOUR OWN BLOG How to Design a Custom Opt-in form without a Plugin 3 by Marianne Manthey
  • 2. DESIGN YOUR OWN BLOG PART 3 Designing the Sign Up Form for Your Blog
  • 3. TABLE OF CONTENTS This Slideshare is Part 3 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 (first 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 (second 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 3A+B (this slideshare + video on the blog) Design Your Opt-in Box in PicMonkey • Decide on shape and style • Pick a background • What size is our form? • Add text and graphics ©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. DESIGN AN OPT-IN BOX: SHAPE + STYLE a: Decide on a Shape + Style The first thing we need to do is plan out our opt-in box. What will you include in it? • Do you have a sign-up incentive? • A graphic you want to include? • Some social media icons? • Or do you just want to go minimal? ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 9. DESIGN AN OPT-IN BOX: SHAPE + STYLE Sign Up Incentives Giving an incentive is a good way to build your list by encouraging people to sign up. Giving away a free Does your newsletter Want to give readers download? Add an include exclusive choices? Let them sign image of it and a subscriber-only up for all new posts or couple of bullet points content? Then say so. less frequent newsletters. about it. ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 10. DESIGN AN OPT-IN BOX: SHAPE + STYLE Incentives? Maybe later… If you’re not ready to offer anything other than your awesome posts or newsletter, just go with a simple little sign up box. ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 11. DESIGN AN OPT-IN BOX: SHAPE + STYLE Now that you know what you’re including in your opt-in box, decide on the shape you want to go with: Vertical ©2013 DesignYourOwnBlog.com. All rights reserved. Horizontal Square
  • 12. DESIGN AN OPT-IN BOX: SHAPE + STYLE Next, take a look at your blog. Take note of the colors used, the typefaces employed, and the style of the design. We want to create an opt-in box that matches the style of our blog, BUT stands out from the rest of the elements on the page. The box should draw attention to itself, but not so much that it looks gaudy ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 13. DESIGN AN OPT-IN BOX: SHAPE + STYLE On my homepage at DesignYourOwnBlog.com… I use 3 main colors: an aqua blue, a lime green and orange. The design has a flat look to it, meaning no gradients, no drop-shadows, no illustration or hand-drawn look. So I went for a flat, color-block style design for my opt-in box. ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 14. DESIGN AN OPT-IN BOX: SHAPE + STYLE Because my header creates a huge aqua blue color-block, I went with green for the opt-in box so that it stands out from the header. This is what you want to do too. ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 15. DESIGN AN OPT-IN BOX: PICK A BACKGROUND b: Pick a Background Hopefully you now have an idea of the shape and style you’re going with. Now let’s find an appropriate background for our design. ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 16. DESIGN AN OPT-IN BOX: PICK A BACKGROUND 4 easy ways to find a background to start out with. 1. Solid Colors Go the “simple” route like I did and use solid colors for your background. Use shapes to make it interesting: ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 17. DESIGN AN OPT-IN BOX: PICK A BACKGROUND 2. Digital Scrapbooking or Textured Paper Find a nice pattern and color that matches the style of your design. Search for “free digital scrapbooking paper”* or “digital scrapbook kits.” *Just be sure to read the terms of use before using any free papers or elements on your blog. ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 18. DESIGN AN OPT-IN BOX: PICK A BACKGROUND 3. Photography Use your own or download some stock photography. There’s plenty of free stock if you look. It’s usually best to use something a little abstract or blurred. We don’t want it to interfere with the content that’s over it. ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 19. DESIGN AN OPT-IN BOX: PICK A BACKGROUND The last one is an easy little trick I discovered 4. Project Life Cards >> Project Life cards are journaling cards used in pocket binder-style scrapbooks. Many already have a great design that could stand on its own. The beauty is that the proportions of the cards are perfect for a rectangular sign up form! And you can even crop one (one w/o a border) to create a square form too! Where to find free cards?* FabnFree.com HappinessIsHomemade.net Or search for “Project Life printables.” *Just be sure to read the terms of use before using any of these on your blog. ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 20. DESIGN AN OPT-IN BOX: PICK A BACKGROUND Project Life Cards These cards below are great starting points! Ignore any text on them for now and picture your title, form and button over these backgrounds. ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 21. DESIGN AN OPT-IN BOX: PICK A BACKGROUND Try to choose a background with little contrast. Don’t pick a design that's too busy  While we do want the opt-in box to stand out, we don't want the form itself to get lost in it's background. What we really want to stand out the most is the Subscribe button and the form title. The form title is what attracts people to sign up in the first place. ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 22. DESIGN AN OPT-IN BOX: PICK A BACKGROUND Still in love with a busy pattern? Create a border out of it! Just add a white square or rectangle inside it. If the pattern is not TOO busy, you can add a tiny bit of opacity to the white square to have the background show through just a tad. ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 23. DESIGN AN OPT-IN BOX: FORM SIZE *Disclaimer* Design Your Own (lovely) Blog is not responsible for copyright infringement made by readers of this blog and/or Slideshare for using resources in a manner that violates their terms of use. Resources are provided as examples. It is ultimately your responsibility to seek and read the terms of use for each graphic you wish to use before implementing it on your blog. ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 24. DESIGN AN OPT-IN BOX: FORM SIZE c: What Size is Our Form? Got your background picked out? Good, we’ve got one more thing to do before we go and open up PicMonkey. We need to go to our blogs and find out the width of our form. We’ll use the browser’s code inspector to do this. ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 25. DESIGN AN OPT-IN BOX: FORM SIZE This is my test site and here is the form we embedded in Part 2. We want to figure out the width of our form because if we use an image as its background, we want to make sure it’s just the right size and not stretched or squished. ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 26. DESIGN AN OPT-IN BOX: FORM SIZE Now Please Note! I highly recommend using Chrome or Safari to view your blog for this because they already have a great code inspector built in. If you want to use Firefox, install the Firebug add-on as it's way better than the built in code inspector. And definitely do not use Internet Explorer for this. It has the worst one. Well it’s also the worst browser, but I digress.... ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 27. DESIGN AN OPT-IN BOX: FORM SIZE Ok so back to our blogs. I am going to put my mouse very close to the form and right-click and select “Inspect Element.” ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 28. DESIGN AN OPT-IN BOX: FORM SIZE Now the code inspector comes up and what we see here is all the HTML for the webpage on the left and the CSS that applies to whatever element is selected on the right. HTML CSS ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 29. DESIGN AN OPT-IN BOX: FORM SIZE If we hover over the HTML items, you’ll see that the corresponding item on the page becomes highlighted in blue. H2 on the page HTML H2 (heading 2) ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 30. DESIGN AN OPT-IN BOX: FORM SIZE The reason I like Chrome so much is that you’ll see this yellow tooltip when you hover over an element, like the form. That tooltip gives you the size of the element. Form element size: 300px X 141px HTML form tag ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 31. DESIGN AN OPT-IN BOX: FORM SIZE So it looks like our form is 300 pixels wide That’s just what we were looking for. We don’t care about the height. Next, let’s get designing! The rest of Part 3 is continued on video. If you aren’t viewing this Slideshare on www.designyourownblog.com, click that link to go to it now. See you there! ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 32. DESIGN AN OPT-IN BOX: FORM SIZE Credits All form examples in this Slideshare are listed below in order of appearance (without repeats): whimseybox.com 100layercake.com stephanieryandesign.com thepleasureretreat.com ohmyhandmade.com mummade.co.nz fairydustteaching.com sfgirlbybay.com ruffledblog.com thepleatedpoppy.com fellowfellow.com pittr-pattr.com designyourownblog.com * tidymom.net psimadethis.com iheartblogshop.com *I feel awful, but can’t find the source for the opt in with green photo background. If someone can identify it or it’s yours, please do let me know! I’d like to give proper credit. ©2013 DesignYourOwnBlog.com. All rights reserved.
  • 33. THANK YOU Thank you for watching Part 3A 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.