PowerPoint Presentation
A Contact Form is Boring5 Creative Ways to Use Contact Forms in
WordPressWordCamp Toronto 2016
@SITELOCK
@SITELOCKA Stranger Walks Into a Bar
@SITELOCKImagine 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.
2
A Stranger Walks Into a Bar
@SITELOCKNow reverse that. Hello, how are you enjoying
yourselfwhat is inspiring you about this placewhat 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 thats the essence this session when it comes to contact
forms.
Strategies used when creating and displaying contact forms on
your siteAND how we can all do better than the standard (boring)
contact forms.3
What Well Cover TodayA brief history of formsFactors to consider
when planning your formsForm strategiesTypes of formsExamples of
creative formsForm tools
@SITELOCK
4
Adam W. WarnerProduct Evangelist at SiteLockCo-Founder at
FooPluginsDiscovered WordPress in 2005WordPress Community AddictFan
of FractalsLover of MeatballsProud Dad!
@SITELOCK
WP Evangelist means that I attend WordCamps and other events and
listen to the community.
A Brief History of Web Forms
@SITELOCKAwebform,web formorHTML formon aweb pageallows a user
to enter data that is sent to aserverfor processing. Forms can
resemblepaperordatabaseforms because web users fill out the forms
using checkboxes,radio buttons, ortext fields. For example, forms
can be used to entershippingorcredit carddata to order a product,
or can be used to retrieve search results from asearch engine.
Forms are enclosed in the HTMLformtag. This tag specifies
thecommunication endpointthe data entered into the form should be
submitted to, and the method of submitting the data, GET or
POST.
User Name:
Forms are, by definition, a transaction between you and your
visitor.
Im also going to touch on a fair bit of marketing as forms are
an integral part of building your customer base, whether thats
leads, subscribers, followers, customers or clients. 6
Thanks Dave!
@SITELOCKDave RaggettDave Raggettis a computer specialist who
has played a major role in implementing theWorld Wide Websince
1992.[1]He has been a W3C Fellow at theWorld Wide Web
Consortiumsince 1995 and worked on many of the key web protocols,
includingHTTP,HTML,XHTML,MathML,XForms, andVoiceXML.[2]Raggett also
wroteHTML Tidy.[2]He lives in the west ofEngland.[2]
7
Factors to Consider When Building Forms
@SITELOCKhttp://blog.revrise.com/the-history-of-web-forms-and-a-small-summary/8
Whatever you do. Dont do this.
@SITELOCKhttp://www.lingscars.com/
Before you build a form and put it on any page, make sure it can
be easily seen and submitted!9
Size and Steps
@SITELOCKThe size of your forms does matter. Split your form
into multiple stepsSingle page forms
Are the fields spaced well?Are fields positioned horizontally,
vertically, or both?
Are you asking for information that really isnt necessary? Dive
deeper into that in a few moments.
10
Fields and Labels
@SITELOCKField Labels:Traditional Name, Email, Reason for
ContactLanguage used - Does it "FEEL" inviting? Personal?Targeting
your visitor market?Goal is to engage with language.
11
Appropriate Field Types
@SITELOCKIf 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
moreb) checkbox allows multiple options to be selectedc) drop-down
list also used to select a single option from a list of themd) date
uses a mini-calendar control to allow the user to select a datee)
textarea or large text fields (several lines) used for larger
amounts of text than is possible using the basic text input
field
12
Number of FieldsIs there a magic number?
@SITELOCKIdeal 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
13
Order of FieldsDoes it matter?
@SITELOCKRemember the bar conversation?Usually start by
collecting with contact info, then get to the responses.
No emotional investmentCan 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.
14
Benefits
@SITELOCKAlso 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 EXPLAIN15
Trust and Confidence
@SITELOCKUse 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.16
Call to Action
@SITELOCKTest different words/phrasesExperiment 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!
17
Measure, Analyze and Test
@SITELOCKMeasure your form performance.
If you dont measure, you dont know.
AB Testing. Change one thing at a time.
Every company should define key metrics and move its business
forward with actionable metrics.18
Case StudyNumber of fieldsField orderField labels
@SITELOCKhttp://conversionxl.com/reduce-form-fields/
They cite Michael Aagaard ofUnbounceHes well-known for his
advocacy of conducting conversion research instead of relying on
best practices.
19
Busting the Best Practice
@SITELOCKCase study published by Imagescape in 2008.
11 fields to startReduced to 4120% 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.20
Fewer Fields
@SITELOCKHad 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 dont want to interact with.
21
Labels and Field Order
@SITELOCKIn 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.22
TakeawayReducing form fields will always increase conversions =
FALSE
@SITELOCKHaving fewer fields in your form isnt a blanket
solution.
What you should be doing is looking at the information youre
asking for and whether or not it makes sense to the end user. Tough
to do when were only seeing our forms from a business or developer
perspective.
Thats why conversion testing is so important. You can rely on
factual data rather than your gut feeling or those of your
clients.23
Getting Long Forms to Convert
@SITELOCKAnyone 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.
24
Progress Bars
@SITELOCKReduce 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 oftenlookmore
daunting than they really are
25
Onboarding Flow
@SITELOCKAnyone 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.26
Ask Higher Value QuestionsDo 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?
@SITELOCKInstead 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 yourselfDo 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?
27
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?
@SITELOCKIf 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 thats one or two fields, maybe thats eight or ten
fields. The number isnt so important.
Whats important is that your visitors arent sitting at home
thinking, Why do they need this?!
28
Accessibility of FormsWCAG 2.0 (Web Content Accessibility
Guidelines)PerceivableOperableUnderstandableRobust
@SITELOCKWeb Content Accessibility Guidelines (WCAG) 2.0
Web content more accessible. Following these guidelines will
make content accessible to a wider range of people with
disabilities1 Perceivable1.1Provide 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 Operable2.1Make all functionality available from a
keyboard.2.4Provide ways to help users navigate, find content, and
determine where they are.
3 Understandable3.1Make text content readable and
understandable.3.2Make Web pages appear and operate in predictable
ways.
Robust - future compatibility29
Types of FormsSimplestSimpleVersatileInteractive
@SITELOCKSimplest 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.
30
A Specific PurposeSearchBlog post email subscriptionLead
generation (email opt-ins)Guest post submissionseCommerce order and
checkoutSurveysQuizzesRecommendation Engines
@SITELOCKAnd here's where we start to go beyond the simple
contact form and start getting a bit creative.31
Integrations
Galore!AccountingAnalyticsCalendarCRMDocumentsEmailHelp
DeskPaymentsSocialWeb apps
@SITELOCKBreak these out into image examples? Or, have one
specific example for each one? i.e., Payments (show edd checkout),
Help Desk (support form), etc.32
Real World Examples
@SITELOCK1. Email List Building
@SITELOCK
34
Money Lab
@SITELOCKhttp://www.moneylab.co/email/35
2. Calculators
@SITELOCKDocbraces
@SITELOCKKula Partners built payment calculator for Docbraces
for pricing cost lead
gen.http://docbraces.com/payment-calculator/Get survey example
site37
3. User generated content (guest blog post submissions)
@SITELOCKUser Showcase Blog Submission
@SITELOCKFrontend -
http://fooplugins.com/fooplugins-customer-showcase/Backend show
backend Pending Review
Export this form to dev site!39
4. Guided Paths
@SITELOCKNC State University
@SITELOCKNC State UniversityStudent, Faculty, Staff blog signup
for WordPress
Multisite.https://getontheweb.ncsu.edu/get-started41
Recommendation Engine
@SITELOCKChris Lema Reccomendation Engine (for Scores, vacation
recommendations, where to visit, etc? And BONUS
CTA)http://chrislema.com/quiz-based-recommendation-engine/42
5. eCommerceOrder formsCheckout formsUpsellsEmail list
option
@SITELOCKYou're all familiar with these.
Complex eCommerce forms.43
Complex eCommerce
@SITELOCKOrder Formshttp://www.coffeeambassador.com/order/
EDDUpsells44
6. Bonus Examples!Patient Intake FormsFreelancer/Client
FormsMadLibs Style
@SITELOCKhttps://www.acupunctureorlando.com/patient-forms/https://www.caricaturesorlando.com/our-agreement/Carol
Gann
Quiz based recommendation
enginehttp://chrislema.com/quiz-based-recommendation-engine/
MadLibs style contact form.https://rezzz.com/45
Endless Possibilities
@SITELOCKhttps://www.acupunctureorlando.com/patient-forms/https://www.caricaturesorlando.com/our-agreement/Carol
Gann
MadLibs style contact form.https://rezzz.com/
46
How To Build FormsCustom codeOnline buildersForm plugins (my
preference)
@SITELOCKCustom Code
@SITELOCKThis is the opposite of what I look like when writing
code.48
Online Form BuildersJotForm (saas + plugin)TypeForm (saas +
plugin)
@SITELOCK
49
Form PluginsContact Form 7Gravity FormsCaldera FormsNinja
FormsFormidable Forms
@SITELOCKContact Form
7https://wordpress.org/plugins/contact-form-7-accessible-defaults/
Gravity Forms WCAG
2.0https://wordpress.org/plugins/gravity-forms-wcag-20-form-fields/
Caldera Forms WCAG 2.0Caldera Forms is currently working on a
release which will include full support (incrementally) to meet
WCAG 2.0 requirements.
Ninja FormsWorking on it for the 3.0 release
Formidable FormsAsked on the .org forums50
Thank YouFollow
at:@SiteLock@wpmodderSlideSharehttp://www.slideshare.net/wpprobusinessMy
Blog Posts:http://wpdistrict.sitelock.comhttp://adamwwarner.com
@SITELOCK
