Download - Putting Web Forms Online (Beyond the PDF)

Transcript
Page 1: Putting Web Forms Online (Beyond the PDF)

m

Putting Web Forms Online (Beyond the PDF)

Chris Lucas and Greg ZgutaDec. 2, 2014

m

1Wednesday, December 3, 14

Page 2: Putting Web Forms Online (Beyond the PDF)

m

#mStonerNow

2Wednesday, December 3, 14

Page 3: Putting Web Forms Online (Beyond the PDF)

m

@chris_c_lucas@gzguta

@mStonerInc

#mStonerNow

3Wednesday, December 3, 14

Page 4: Putting Web Forms Online (Beyond the PDF)

m

Let’s get started.• Forms in Higher Ed

• Brand Problems

• Conversion Problems

• Form Solutions

• Examples

• Questions

4Wednesday, December 3, 14

Page 5: Putting Web Forms Online (Beyond the PDF)

m

Form Usage in Higher Ed

5Wednesday, December 3, 14

Page 6: Putting Web Forms Online (Beyond the PDF)

m

Technology in web projects• Content Management System

• Website search

• Web event calendaring

• Analytics

• Forms

6Wednesday, December 3, 14

Page 7: Putting Web Forms Online (Beyond the PDF)

m

More PDFs, more Problems• Paper, paper, and more paper (and faxes

and emails)

• Not really “online” forms

• Old forms are never removed from the site

• Search results filled with PDFs instead of web pages

7Wednesday, December 3, 14

Page 8: Putting Web Forms Online (Beyond the PDF)

m

CMS Form Tools• Work directly in the CMS

• Typically don’t have stellar ease of use for content editors

• Form features are limited

• Work best for simple forms

8Wednesday, December 3, 14

Page 9: Putting Web Forms Online (Beyond the PDF)

m

Custom Web Forms• Require web development resources

• No access for content editors (unless you build it)

• Often require back end solutions to work with other databases/systems

• All features must be built from the ground up

9Wednesday, December 3, 14

Page 10: Putting Web Forms Online (Beyond the PDF)

m

Best of Breed Forms Tools• Offer administration tools and utilities to

manage forms and data

• Provide options for how forms are hosted on pages

• Are purpose-built to make form creation easy for content editors

• Advanced features like integrations, custom branding and analytics

10Wednesday, December 3, 14

Page 11: Putting Web Forms Online (Beyond the PDF)

m

Key Decision Criteria• Self service ability for content editors

• Technical support for form creation

• Increase in higher ed websites hosted externally

• Cost versus capabilities

11Wednesday, December 3, 14

Page 12: Putting Web Forms Online (Beyond the PDF)

m

Brand Problems

12Wednesday, December 3, 14

Page 13: Putting Web Forms Online (Beyond the PDF)

m13Wednesday, December 3, 14

Page 14: Putting Web Forms Online (Beyond the PDF)

m

Low utility for form owners and users

• Confusing—”Is this the right place?”

• Uncertainty and low confidence

• Users more likely to abandon unbranded forms

14Wednesday, December 3, 14

Page 15: Putting Web Forms Online (Beyond the PDF)

m

Conversion Opportunities

15Wednesday, December 3, 14

Page 16: Putting Web Forms Online (Beyond the PDF)

m16Wednesday, December 3, 14

Page 17: Putting Web Forms Online (Beyond the PDF)

m17Wednesday, December 3, 14

Page 18: Putting Web Forms Online (Beyond the PDF)

m18Wednesday, December 3, 14

Page 19: Putting Web Forms Online (Beyond the PDF)

m

What Can Help?

19Wednesday, December 3, 14

Page 20: Putting Web Forms Online (Beyond the PDF)

m20Wednesday, December 3, 14

Page 21: Putting Web Forms Online (Beyond the PDF)

m21Wednesday, December 3, 14

Page 22: Putting Web Forms Online (Beyond the PDF)

m

Field Bottlenecks

• Help you optimize your form

• Reveal trouble spots

• Minimize form abandonment

• Increase user satisfaction

22Wednesday, December 3, 14

Page 23: Putting Web Forms Online (Beyond the PDF)

m

Example:Berkshire Community College

23Wednesday, December 3, 14

Page 24: Putting Web Forms Online (Beyond the PDF)

m

Problem Overview

24Wednesday, December 3, 14

Page 25: Putting Web Forms Online (Beyond the PDF)

m

Form optionsCustom web form

• Unlimited customization possibilities

• Connect form directly to Datatel export/import process

• Use server-side code to help deliver required features

Custom Formstack form

• Built-in administration tools for form submission/review/approval

• Ability to create additional forms based on the theme

• Less code/more configuration

25Wednesday, December 3, 14

Page 26: Putting Web Forms Online (Beyond the PDF)

m

Solution Requirements• The form needed to have multiple pages

• Ability to have conditional steps

• Must be mobile friendly

• Must have proper required fields to ensure valid data

• Admissions needs an approval step to review submitted applications

26Wednesday, December 3, 14

Page 27: Putting Web Forms Online (Beyond the PDF)

m

Design Process• Review of the existing PDF form

• Wireframe proposed new steps and fields based on new website design

• Development of HTML/CSS for a theme within Formstack

• Quality assurance with web team and Admissions prior to launch

27Wednesday, December 3, 14

Page 28: Putting Web Forms Online (Beyond the PDF)

m28Wednesday, December 3, 14

Page 29: Putting Web Forms Online (Beyond the PDF)

m29Wednesday, December 3, 14

Page 30: Putting Web Forms Online (Beyond the PDF)

m

Implementation• Mapping of fields to Datatel Colleague

database

• Development of CSS and Javascript to style and enable form elements

• Creation of application form steps in Formstack

• Creation of a custom theme in Formstack

30Wednesday, December 3, 14

Page 31: Putting Web Forms Online (Beyond the PDF)

m31Wednesday, December 3, 14

Page 32: Putting Web Forms Online (Beyond the PDF)

m32Wednesday, December 3, 14

Page 33: Putting Web Forms Online (Beyond the PDF)

m

Impact (so far)• 481 Conversions (applications!) in the first

three months

• 21% conversion rate

• Additional forms created which inherit the theme/styles:

• Request Information

• Schedule a Tour

33Wednesday, December 3, 14

Page 34: Putting Web Forms Online (Beyond the PDF)

m

Example:University of Nevada, Reno

34Wednesday, December 3, 14

Page 35: Putting Web Forms Online (Beyond the PDF)

m

35Wednesday, December 3, 14

Page 36: Putting Web Forms Online (Beyond the PDF)

m

36Wednesday, December 3, 14

Page 37: Putting Web Forms Online (Beyond the PDF)

m

37Wednesday, December 3, 14

Page 38: Putting Web Forms Online (Beyond the PDF)

m

38Wednesday, December 3, 14

Page 39: Putting Web Forms Online (Beyond the PDF)

m

39Wednesday, December 3, 14

Page 40: Putting Web Forms Online (Beyond the PDF)

m

Takeaways• Web forms are a core component of web

infrastructure

• There are three primary paths for implementing forms:

• CMS forms

• Custom web forms

• Best of breed third party form tools

• Tools like Formstack provide highly customized, highly useable solutions

40Wednesday, December 3, 14

Page 41: Putting Web Forms Online (Beyond the PDF)

m

Questions?

41Wednesday, December 3, 14

Page 42: Putting Web Forms Online (Beyond the PDF)

m

Thank You!

For more information about mStoner:773-305-0537 | [email protected]

Want to work with us? Contact Mallory Wood at 802-457-9234 [email protected]

42Wednesday, December 3, 14