Wayne State Web Team

Wayne State University Web Team Blog

Introducing Formy - Our self-service form manager

Over the past seven years the Web Communications department has strived to not only give our end users the best experience but to also create tools that can be deployed across campus. We started with the CMS, then the Events Calendar, RSVP system, URL Shortener, Social Media Dashboard and more. Today we are introducing our newest self-service tool, a Web Form Manager (opens new window) which we have been calling Formy.

# The problem

Without a way to get feedback or information from users, the Web would be a boring place. Typically a site has two or more forms: a request for information form, contact form, and possibly more. Every department has different requirements for what they need from the user and because of that each form has to be created by hand. Creating forms can be a pain: there are many requirements, a server with database and email capabilities and of course a programmer. Up until now we've charged our normal hourly rate to create forms. This can range from $150 - $750 per form, depending on how complex it is and what type of manager/approval system needs to be created. Although we could keep going this route forever and continue to spend hundreds of hours creating forms, we knew we had to make a change to focus on larger projects. After a few hundred  forms we started to develop a pattern, we knew we could solve 80 percent of all form needs on campus with a core set of features.

We realized we have been creating forms for the past two years in the events calendar RSVP system. So we took all the existing constructs (and codebase) and migrated it to a self-standing form creator.

# Creating forms with Formy

To create a form visit forms.wayne.edu (opens new window), sign in with your AccessID and you'll see a list of forms that you have either created or have access to. Click "create a form" and the process is very similar to creating an RSVP in the events calendar. It's a three step process starting with some basic information.

(opens new window)

# Basic information

The first step is to name your form and provide a description that the user will see no mater where the form is used. From there you can set the limits and the thank you page/email responses.

(opens new window)

# Choosing fields

The second step is where it starts to get fun. Every form starts out with the First Name, Last Name, and Email address fields. Almost every form in the system has these fields so we auto populate them. To add other fields simply click on the field type on the right. We have options for almost every form element type and if you don't see something you're looking for, just let us know and we can probably add it.

(opens new window)

# File uploads

We made two important additions to the forms creator, the first is the "upload file" field. We found that most of the forms we were asked to custom create involved some sort of file upload, so we built that right in. You can even add multiple file fields per form.

(opens new window)

# Reorder fields

The second is the ability to drag and drop the field order. Although it isn't something the user will see, the previous way to reorder fields was clunky and at times would end in a phone call to our department for help.

(opens new window)

# Require authentication

A bonus addition: We also recognize that a lot of the forms we created need to first authenticate that the user has some sort of Wayne State affiliation. So we added the "Require Authentication" option which will first ask the user to log in before they can fill out the form. This also ties their AccessID and any information about them to the form so you don't have to ask for information we as a university already know.

(opens new window)

# Submit for approval

Once the form is up to your standards the next step is to submit it for approval. This process is the exact same as the Events Calendar. It comes into our queue and we check it over just to make sure the flow of the form makes sense to the intended audience and that you're going to get the information you need. We typically approve forms within the same day.

(opens new window)

The third step is optional, but it allows you to setup access to the form submissions and get alerts when someone completes the form. This is nice if you are creating a "Request for Information" form for example and you want the admissions counselor to have access to the submissions and/or you want a group email address like "askcoe@wayne.edu" to get alerted immediately.

# Sharing and embedding forms

Now that your form is done the next step is to direct people to fill it out. There are two ways to do this.

(opens new window)

Every form that is approved will have a forms.wayne.edu/1234567 URL associated with it. This URL will not change and you can direct users to fill out your form at that basic Wayne State page.

(opens new window)

To embed the form on an existing Web page just visit "Step 1" of the form and you will notice a "CMS Embed" area right below the description. This line, which looks like "[form id="1234567"]" is what you can copy & paste in to any CMS page and your form will automatically be embedded in that spot.

Tip: You can change the label on the submission button from "Save" by adding it to the embed code. For example if you wanted it to say "Request Information" you would simply add it like this:

[form id="1234567" button="Request Information"]

# Getting submissions

(opens new window)

Once your form is promoted and users fill it out, submissions will start to come in to forms.wayne.edu and you may be alerted by email if you have that set up. Every submission will have it's own row in the list and you can click on the first field to see all the information about the submission including downloading of any files.

(opens new window)

We have a few things in place to prevent duplicate submissions (often users click the submit button multiple times quickly) or spam submissions but sometimes they do come through. We allow you to delete any individual submission but instead of removing the data completely we just strike it out and don't count it against the total number of entries. You can always view and undelete it at any time.

(opens new window)

Lastly, if you need to export the submissions the process is the same as the Events Calendar. You can choose the fields and order, then click the "Export to Excel" button.

# Data and statistics

The centralized form idea is something we have been thinking about for a few years. The data structure was actually created years ago when we added RSVP's to the events calendar. What this means is all the forms and information are stored in one spot. To date we have ~1,700 forms in the system with more than ~100,000 total submissions. It also means that over the next few months we will be migrating all regular forms over to Formy forms. This will ensure there is one location for all user-submitted data. We can ensure the security of that data and push it to other systems as needed.

# Feedback

Like all the tools we create they come out of university need with the goal of empowering the campus community. With that comes ever evolving changes as the campus needs change. We are always open to feedback and you can send it to web@wayne.edu. Often there may be existing ways to accomplish your needs.