Contact Forms are Boring - 5 Creative Ways to Use Forms in WordPress
•Descargar como PPTX, PDF•
1 recomendación•1,340 vistas
Session Description No matter what the purpose of the site you’ve built, it’s likely you’ve included a standard contact form as one of the first (or last) items on your pre-launch task list. Name, email, reason for contact, submit: BORING! In this session Adam will look at some creative ways to use forms in WordPress with the goal being to better engage and convert website visitors. Whether convincing potential clients to make first contact, grow an email subscription list, or streamline the guest blogging submission process, website contact form(s) are a key part of the communication process. Adam will share several different contact form approaches and what plugins and/or services work best for each. Learning Outcomes * Use forms in WordPress for more than just contacts * Better engage visitors using conditional logic * Turn form submissions into blog posts automatically
Recomendados
Recomendados
Más contenido relacionado
Destacado
Destacado (20)
Similar a Contact Forms are Boring - 5 Creative Ways to Use Forms in WordPress
Similar a Contact Forms are Boring - 5 Creative Ways to Use Forms in WordPress (20)
Último
Último (15)
Contact Forms are Boring - 5 Creative Ways to Use Forms in WordPress
- 1. @ S I T E L O C K@ S I T E L O C K A Contact Form is Boring 5 Creative Ways to Use Contact Forms in WordPress W o r d C a m p To r o n t o 2 0 1 6
- 2. @ S I T E L O C K A Stranger Walks Into a Bar
- 3. @ S I T E L O C K A Stranger Walks Into a Bar
- 4. @ S I T E L O C K What We’ll Cover Today • A brief history of forms • Factors to consider when planning your forms • Form strategies • Types of forms • Examples of creative forms • Form tools
- 5. @ S I T E L O C K Adam W. Warner • Product Evangelist at SiteLock • Co-Founder at FooPlugins • Discovered WordPress in 2005 • WordPress Community Addict • Fan of Fractals • Lover of Meatballs • Proud Dad!
- 6. @ S I T E L O C K A Brief History of Web Forms
- 7. @ S I T E L O C K Thanks Dave!
- 8. @ S I T E L O C K Factors to Consider When Building Forms
- 9. @ S I T E L O C K Whatever you do. Don’t do this.
- 10. @ S I T E L O C K Size and Steps
- 11. @ S I T E L O C K Fields and Labels
- 12. @ S I T E L O C K Appropriate Field Types
- 13. @ S I T E L O C K Number of Fields • Is there a magic number?
- 14. @ S I T E L O C K Order of Fields • Does it matter?
- 15. @ S I T E L O C K Benefits
- 16. @ S I T E L O C K Trust and Confidence
- 17. @ S I T E L O C K Call to Action
- 18. @ S I T E L O C K Measure, Analyze and Test
- 19. @ S I T E L O C K Case Study • Number of fields • Field order • Field labels
- 20. @ S I T E L O C K Busting the Best Practice
- 21. @ S I T E L O C K Fewer Fields
- 22. @ S I T E L O C K Labels and Field Order
- 23. @ S I T E L O C K Takeaway • Reducing form fields will always increase conversions = FALSE
- 24. @ S I T E L O C K Getting Long Forms to Convert
- 25. @ S I T E L O C K Progress Bars
- 26. @ S I T E L O C K Onboarding Flow
- 27. @ S I T E L O C K Ask Higher Value Questions • Do I already have this information from this visitor? • Can I get this information from another source (e.g. IP address)? • Will this information bring me closer to a sale?
- 28. @ S I T E L O C K Required vs. Optional (test) • What happens when you remove all of the required asterisks; implying everything is required? • What happens when you make a field you consider required, optional? • What happens when you make a field you consider optional, required?
- 29. @ S I T E L O C K Accessibility of Forms • WCAG 2.0 (Web Content Accessibility Guidelines) • Perceivable • Operable • Understandable • Robust
- 30. @ S I T E L O C K Types of Forms • Simplest • Simple • Versatile • Interactive
- 31. @ S I T E L O C K A Specific Purpose • Search • Blog post email subscription • Lead generation (email opt-ins) • Guest post submissions • eCommerce order and checkout • Surveys • Quizzes • Recommendation Engines
- 32. @ S I T E L O C K Integrations Galore! • Accounting • Analytics • Calendar • CRM • Documents • Email • Help Desk • Payments • Social • Web apps
- 33. @ S I T E L O C K Real World Examples
- 34. @ S I T E L O C K 1. Email List Building
- 35. @ S I T E L O C K Money Lab
- 36. @ S I T E L O C K 2. Calculators
- 37. @ S I T E L O C K Docbraces
- 38. @ S I T E L O C K 3. User generated content (guest blog post submissions)
- 39. @ S I T E L O C K User Showcase Blog Submission
- 40. @ S I T E L O C K 4. Guided Paths
- 41. @ S I T E L O C K NC State University
- 42. @ S I T E L O C K Recommendation Engine
- 43. @ S I T E L O C K 5. eCommerce • Order forms • Checkout forms • Upsells • Email list option
- 44. @ S I T E L O C K Complex eCommerce
- 45. @ S I T E L O C K 6. Bonus Examples! • Patient Intake Forms • Freelancer/Client Forms • MadLibs Style
- 46. @ S I T E L O C K Endless Possibilities
- 47. @ S I T E L O C K How To Build Forms • Custom code • Online builders • Form plugins (my preference)
- 48. @ S I T E L O C K Custom Code
- 49. @ S I T E L O C K Online Form Builders • JotForm (saas + plugin) • TypeForm (saas + plugin)
- 50. @ S I T E L O C K Form Plugins • Contact Form 7 • Gravity Forms • Caldera Forms • Ninja Forms • Formidable Forms
- 51. @ S I T E L O C K Thank You • Follow at: • @SiteLock • @wpmodder • SlideShare • http://www.slideshare.net/wpprobusiness • My Blog Posts: • http://wpdistrict.sitelock.com • http://adamwwarner.com
Notas del editor
- Imagine a stranger walked up to you in a social setting and asked: I don't know you but...What's your full name, email address, phone number, and physical address, then asks why you're here and what you're interested in. You'd be offended and walk away before you got to the rest of that conversation.
- Now reverse that. Hello, how are you enjoying yourself what is inspiring you about this place what are you here for. Engaging conversation, that stranger says great, I'd like to make your visit better, let's swap contact info and keep in touch. And that’s the essence this session when it comes to contact forms. Strategies used when creating and displaying contact forms on your site AND how we can all do better than the standard (boring) contact forms.
- WP Evangelist means that I attend WordCamps and other events and listen to the community.
- A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine. Forms are enclosed in the HTML form tag. This tag specifies the communication endpoint the data entered into the form should be submitted to, and the method of submitting the data, GET or POST. <html> <body> <form action="form_handler.php" method="GET"> User Name: <input name="user" type="text" /> <input type="submit"value="Submit" /> </form> </body> </html> Forms are, by definition, a transaction between you and your visitor. I’m also going to touch on a fair bit of marketing as forms are an integral part of building your customer base, whether that’s leads, subscribers, followers, customers or clients.
- Dave Raggett Dave Raggett is a computer specialist who has played a major role in implementing the World Wide Web since 1992.[1] He has been a W3C Fellow at the World Wide Web Consortium since 1995 and worked on many of the key web protocols, including HTTP, HTML,XHTML, MathML, XForms, and VoiceXML.[2] Raggett also wrote HTML Tidy.[2] He lives in the west of England.[2]
- http://blog.revrise.com/the-history-of-web-forms-and-a-small-summary/
- http://www.lingscars.com/ Before you build a form and put it on any page, make sure it can be easily seen and submitted!
- The size of your forms does matter. Split your form into multiple steps Single page forms Are the fields spaced well? Are fields positioned horizontally, vertically, or both? Are you asking for information that really isn’t necessary? Dive deeper into that in a few moments.
- Field Labels: Traditional Name, Email, Reason for Contact Language used - Does it "FEEL" inviting? Personal? Targeting your visitor market? Goal is to engage with language.
- If seen and done this myself. Ask a user for multiple answers and then use radio buttons which only allow one selection at a time. a) radiobutton – used to select a single option amongst two or more b) checkbox – allows multiple options to be selected c) drop-down list – also used to select a single option from a list of them d) date – uses a mini-calendar control to allow the user to select a date e) textarea or large text fields (several lines) – used for larger amounts of text than is possible using the basic text input field
- Ideal number of fields and how it affects conversions (see cast study slide coming up). DEFINITIVE Answer: "It Depends!" and I'll show you a case study in just a moment to explain that answer
- Remember the bar conversation? Usually start by collecting with contact info, then get to the responses. No emotional investment Can easily leads to abandonment. Flipping order of fields upside down, Ask fun engaging questions first, your form feels less like a chore. Also reorder fields, which we'll see an example of in just a moment.
- Also associated with emotional investment. Present form without reminding them WHY they should fill in the form. What's in it for them? What happens when they submit? Message between fields. GUIDE and EXPLAIN
- Use forms as opportunity to build trust. Qualify by using social proof. Include testimonials. Written. Video. Even audio. Better Business Bureau seal or similar "social proof". Ease any doubt.
- Test different words/phrases Experiment with with text, color and placement. “Submit”, “Register” or “Download” are all three button texts that are known for lower conversion rates. Can even use images. Can you use GIFs? Get example of this!
- Measure your form performance. If you don’t measure, you don’t know. AB Testing. Change one thing at a time. Every company should define key metrics and move its business forward with actionable metrics.
- http://conversionxl.com/reduce-form-fields/ They cite Michael Aagaard of Unbounce He’s well-known for his advocacy of conducting conversion research instead of relying on best practices.
- Case study published by Imagescape in 2008. 11 fields to start Reduced to 4 120% increase in conversions Quickly turned into best practice that everyone started to implement and advise for others. No one else tried testing anything different! Until Michael came along.
- Had client with form for contacting entertainers for events. Asking for a lot of information. Date, time, type of event, number of attendees, location, name, email address, phone number, a comment field where you have to describe the event. A lot of information! All a visitor wants to do is contact an entertainer. So he followed the "best practice" of less fields. Reduced from 9 fields to 6 fields. Conversions should skyrocket right? The result? 14% drop in conversion. The problem? He removed all the fields that people actually want to interact with! Left the ones they don’t want to interact with.
- In his second treatment, left number of fields at 9. Tweaked label copy to set better expectations, reducing friction instead. Changed field order Result was a 19.21% increase in conversions. Not too shabby for a few “minor” tweaks.
- Having fewer fields in your form isn’t a blanket solution. What you should be doing is looking at the information you’re asking for and whether or not it makes sense to the end user. Tough to do when we’re only seeing our forms from a business or developer perspective. That’s why conversion testing is so important. You can rely on factual data rather than your gut feeling or those of your clients.
- Anyone ever done any online shopping or filled out a passport application? Only enough fields to achieve the following: Easy to understand and complete. Value of the information your visitors are asked to provide is equal to or less than the value you are going to provide. Enough info to qualify incoming leads and provide the sales team with enough information to close deals.
- Reduce friction by using multipage forms. Assuming you're a new user here:) Imagine asking for all of this information at once, on one page. The perception of the time and effort and setting that expectation from the start, is key, adding that forms often look more daunting than they really are…
- Anyone not familiar with buffer? Like HootSuite. Connect a bunch of social accounts. Rather than asking you to do that all in one shot, they split it up.
- Instead of asking more questions, simply ask higher value questions. The “business email address” example comes to mind here. By asking for a “business email address”, you will: (1) increase deliverability, (2) reduce the need for a “name” field, and (3) set the context for your product or service (i.e. “this is a business tool”). Of course, there are other high value questions you can experiment with. For each question on your form, ask yourself… Do I already have this information from this visitor? Can I get this information from another source (e.g. IP address)? Will this information bring me closer to a sale?
- If you have optional fields on your form, could be asking for “nice to have” information too soon. Joanna Wiebe, Copy Hackers “Forms are good for qualifying prospects, but if half your form fields are optional, really think hard about whether you need all of them on the page.” Focus only on what information is necessary to get the visitor started. Maybe that’s one or two fields, maybe that’s eight or ten fields. The number isn’t so important. What’s important is that your visitors aren’t sitting at home thinking, “Why do they need this?!”
- Web Content Accessibility Guidelines (WCAG) 2.0 Web content more accessible. Following these guidelines will make content accessible to a wider range of people with disabilities 1 Perceivable 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. 2 Operable 2.1 Make all functionality available from a keyboard. 2.4 Provide ways to help users navigate, find content, and determine where they are. 3 Understandable 3.1 Make text content readable and understandable. 3.2 Make Web pages appear and operate in predictable ways. Robust - future compatibility
- Simplest– search forms are the most common example of the simplest type of form. This is also the most common type of form found on the Web. The user enters a search phrase or one or more key words to be found, then clicks on a button (often labelled “Search”) and the search operation begins. Simple – generally, any “contact us” forms consisting of several fields are examples of simple forms. Versatile – such forms require mandatory completion of certain fields. Interactive – in addition to mandatory fields, such forms also update form data based upon certain user-entered values. For example, calculations may be made to determine the taxes or fees required to be added to an order. The benefit of this type of form is the real-time nature of the system response.
- And here's where we start to go beyond the simple contact form and start getting a bit creative.
- Break these out into image examples? Or, have one specific example for each one? i.e., Payments (show edd checkout), Help Desk (support form), etc.
- http://www.moneylab.co/email/
- Kula Partners built payment calculator for Docbraces for pricing cost lead gen. http://docbraces.com/payment-calculator/ Get survey example site
- Frontend - http://fooplugins.com/fooplugins-customer-showcase/ Backend – show backend Pending Review Export this form to dev site!
- NC State University Student, Faculty, Staff blog signup for WordPress Multisite. https://getontheweb.ncsu.edu/get-started
- Chris Lema Reccomendation Engine (for Scores, vacation recommendations, where to visit, etc? And BONUS CTA) http://chrislema.com/quiz-based-recommendation-engine/
- You're all familiar with these. Complex eCommerce forms.
- Order Forms http://www.coffeeambassador.com/order/ EDD Upsells
- https://www.acupunctureorlando.com/patient-forms/ https://www.caricaturesorlando.com/our-agreement/ Carol Gann Quiz based recommendation engine http://chrislema.com/quiz-based-recommendation-engine/ MadLibs style contact form. https://rezzz.com/
- https://www.acupunctureorlando.com/patient-forms/ https://www.caricaturesorlando.com/our-agreement/ Carol Gann MadLibs style contact form. https://rezzz.com/
- This is the opposite of what I look like when writing code.
- Contact Form 7 https://wordpress.org/plugins/contact-form-7-accessible-defaults/ Gravity Forms WCAG 2.0 https://wordpress.org/plugins/gravity-forms-wcag-20-form-fields/ Caldera Forms WCAG 2.0 Caldera Forms is currently working on a release which will include full support (incrementally) to meet WCAG 2.0 requirements. Ninja Forms Working on it for the 3.0 release Formidable Forms Asked on the .org forums