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

m

#mStonerNow


m

@chris_c_lucas@gzguta

@mStonerInc

#mStonerNow


m

Let’s get started.• Forms in Higher Ed

• Brand Problems

• Conversion Problems

• Form Solutions

• Examples

• Questions


m

Form Usage in Higher Ed


m

Technology in web projects• Content Management System

• Website search

• Web event calendaring

• Analytics

• Forms


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


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


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


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


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


m

Brand Problems


m13Wednesday, December 3, 14

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


m

Conversion Opportunities





m

What Can Help?




m

Field Bottlenecks

• Help you optimize your form

• Reveal trouble spots

• Minimize form abandonment

• Increase user satisfaction


m

Example:Berkshire Community College


m

Problem Overview


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


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


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




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




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


m

Example:University of Nevada, Reno


m


m


m


m


m


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


m

Questions?


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]


mailto:[email protected]


