• General Best Practices
  • Product Best Practices
Build Exceptional Online Forms With These Award-Winning Tips
Andrew Martin

The Finalsite Double Diamond Awards introduced at Finalsite University this year recognizes the amazing work our school webmasters put into their websites to create compelling content with Finalsite modules and tools. The awards have also served to inspire school professionals to take their websites in new directions, try new ideas, and explore different ways to use the Finalsite platform. 

The eighth entry in our 10-part series recapping the Double Diamond Awards, the Forms Manager award recognizes schools that used our online forms module to display forms on their website(s) and collect constituent information in unique and creative ways to create an unobtrusive user experience. Taking first place with a simple yet powerful form that utilizes conditional fields to effectively convey information essential to the admission process, the first-ever winner for the Forms Manager Award was ... Conserve School

 

Conserve School (WI)

Most forms collect information as their solitary goal. But sometimes a form is just a wonderful and unique way for users to interact with the site. Conserve School accomplished both with their creative use of Forms Manager to build an online financial aid estimator that provides prospective families with financial aid information specific to their income bracket and number of children.

Conserve School Financial Assistance Estimator

“Conserve School wanted to provide prospective families with estimated tuition for 468 different combinations of family size and taxable income, and that information needed to be displayed as simply as possible,” said Head of School Stefan Anderson. “Conserve School's Financial Aid Estimator form did the trick.”

“In addition to providing the families with a projected financial aid award, those families that clicked on the submit button to learn more about the Conserve School Scholarship Program on the bottom of form also provided Conserve School with information about the financial situation of families exploring Conserve School as an option.”

So, how did the Conserve School create this automatic financial aid calculator? The form itself was added to the page with a Form Element. Simple and straightforward. Creating the form was a little bit more complicated.

As Stefan alluded to above, the financial aid calculator need to serve hundreds of different families, all with different incomes and number of children. With literally hundreds of different combinations to account for, the form needed to be built with conditional fields.  

Conserve School 2019 SY Tuition Calculator in Forms Manager

The automatic calculator is fairly straightforward when viewed in Forms Manager with less than 10 fields total. However, each of the Taxable Income fields, each corresponding to a number of children from one to six or more, contains dozens of income brackets, starting from up to $65,000 all the way up to over $450,000. 

Conserve School Financial Aid Calculator conditional settings

Here is the Conditional Settings field for the first Taxable Income field that only displays when a visitor selects 1 child from the Number of Dependent Children field at the top of the form. 

Conserve School Financial Aid Calculator list item menu

Once the visitor selects 1 child from that first form field, they can select their income bracket from the dropdown menu. This image only shows the first eight income brackets; however, there are 79 items total in this Taxable Income list. Yes, 79 total! With six different options to select for the total number of children, and 79 items per each list, this 2019 SY Tuition Calculator contains exactly 474 total options, just over the 468 options necessary that Stefan mentioned! 

We’re obviously a little biased here, but we think it’s impressive that such a robust form can have nearly 500 options total while remaining compact enough to only display a few fields at once on the page, keeping everything neat and tidy without overwhelming visitors with unnecessary information.

Lastly, the Estimated Cost field at the end of the form automatically populates with the correct tuition once a visitor has selected both a number of children and income bracket. This field pulls in the correct information from the Taxable Income lists from the Assign Currency column. 

Conserve School Financial Aid Calculator tuition cost for a family with an income of $115,000

For example, shown in the image above, a family with a single child and an income around $115,000 will see an estimated tuition cost of $3,391.

Conserve School tuition cost for a family with one child and an income of $115,000

Conserve School thoroughly impressed our panel of Forms Manager judges with their unique approach to providing practical and useful value to prospective families while also serving as an ingenious method to collect information on those same prospective families who may be taking steps towards applying to the school. 


 Download our Forms Manager datasheet to learn how to build exceptional online forms!

DOWNLOAD DATASHEET


Latin School of Chicago (IL)

Another school that made liberal and creative use of conditional fields to simplify their forms, Latin School of Chicago used Forms Manager to build their Reunion 2018 form. Sadly, the form is no longer available to view on the school’s website, but that won’t stop us from taking a look at how the form was built in the back end of Composer, our content management system (CMS).

Latin School of Chicago Reunion 2018 form

“Our Reunion 2018 form for homecoming and reunion registrations is an amazing work of art and precision,” said Trisha Flassing, Digital Marketing Strategist at Latin School. “You can see how elegantly it serves up a lot of information loaded with many conditional statements to display the proper price and options for you, depending on your class graduation year.”

“It keeps as much as it can hidden until the options need to be displayed, so that the user encounters an approachable form, rather than an overwhelming one,” Trisha continued. “It also appears that the form is custom-made for the user. It's a beautiful, bespoke beast of a form!”

Trisha definitely isn’t wrong. The Reunion 2018 form requires more than a few mouse scrolls to reach the very bottom in Forms Manager, but as Trisha said, numerous conditional fields kept the form short on the website so visitors aren’t overwhelmed with this beast of a form.

The top portion is straightforward with the standard name, contact info, class year, and location fields that everyone has to fill out. The conditional fields come into play once the visitor has to select which of the activities they want to participate in on Friday, Saturday, and Sunday. Each day offered two different activities, each with a corresponding set of fields that required filling out. 

However, not everyone will see the options for the Friday activities. The Reunion 2018 form has several conditional fields for Friday so that day’s events are only shown when a visitor marks their class year as either 1968 or 1988. The Reunion Kickoff Dinner will show to visitors who select either of the two options, while the 1988 Welcome Party will only display for those who select 1988 as their class year, as one would expect.

 

For all other alumni, the entire Friday section will remain hidden, eliminating a good portion of the form they do not need to fill out. Conditional fields match the remaining fields for all of the Saturday and Sunday activities, either to record the number of attendees or the number of tickets purchased (along with the pricing information). 

Lastly, a Total Amount field automatically calculates the ticket prices accumulated throughout the form, including the always-helpful donation field added to the end of the form. 

Forms Manager Best Practice  

As demonstrated by Latin School, text fields in which visitors are asked to enter credit card information should not be added to the main form. Forms Manager will not encrypt and store this sensitive information, opening your school to major security issues, and your school could be held responsible for any financial loss incurred by those whose identity and/or payment information is compromised.

Instead, to comply with Payment Card Industry (PCI) data security standards, credit card payment transactions should be a separate form. For forms intended to collect payment information, visitors click Submit and are then brought over a secure connection to a separate, short form where they fill out their payment information, a process every online shopper is already familiar with.

Schools should also use dedicated systems for any data that can be associated with individual users, such as SSNs, health information, financial information, admission information, etc.

Notre Dame Academy (MA)

Notre Dame Academy took a unique approach with Forms Manager that lead to the creation of the Love-in-Action Evaluation Form-Spring 2019. Again, the form is no longer available on the website, so we’ll have to take a look at the form in Forms Manager.

Notre Dame Academy Love-in-Action Form

“This is an excellent example of an evaluation form for non-school people to score a student on their community service performance based on a selection of several criteria,” said Client Success Manager Jennifer Settle. “The form is certainly unusual, and I don’t think I’ve seen another school use Forms Manager to build a form quite like this before!”

With results just shy of 500 submissions throughout the form’s duration on Notre Dame’s website, we think the creativity and uniqueness of the form was certainly a success. We can partially attribute this to the form’s simplicity.

It’s not necessarily the literal length of the form that’s often a deterrent, but the time necessary to fill out the form versus the person’s interest in the subject matter. For example, there are only 10 fields in Notre Dame’s form, and only six of those fields are required. The other four fields are optional where people can leave comments, but browsing through the pages of submissions shows that more visitors than not took the time to leave comments, mostly praise for the students.  

These results clearly show that those who took the time to fill out this form were willing to spend just a little bit longer to supply the school with more information. That’s great for a unique form like this, but consider the simplicity of this form and its results when building forms for pages where you really want to collect information from as many people as possible, such as the application or inquiry pages. A shorter form that collects a little bit of information is always better than a longer and more complex form that collects no information because no one wants to fill it out. 

Forms Manager Best Practice

When you create a form that performs exceptionally well, or one that is intricately complex that you’d rather not manually replicate in the future, click the blue Copy button under the Selection Control menu at the top right of the Forms Manager menu to save for future use. You can also save lists created for the radio buttons, checkboxes, and select lists. 

Forms Manager menu to copy, save, and delete form elements

Doing so will place the form element or list into a clipboard so you can then paste that element or list into another form. Once the form is saved and closed, the contents of the clipboard will be lost.

To permanently save a form element or list that can be used indefinitely, click on the element to highlight it. Once highlighted, click the green Save button under Selection Controls. Name the element, add an optional comment, and check Add to the shared saved element library if the element can be used by other forms editors. Saved elements can always be edited in the future from the Dashboard without opening a specific form. Creating an extensive library of your most-used forms elements and lists will eliminate hours of duplicated work in the future.

Stone Ridge School of the Sacred Heart (MD)

Another unique use of Forms Manager, Stone Ridge School of the Sacred Heart created a bus transportation form for students in the greater Bethesda, Maryland area who needed bus transportation to not just Stone Ridge School, but Georgetown Preparatory School as well, another Finalsite school. We love seeing two Finalsite schools teaming up to help their constituents!

Once again, the form is no longer available on Stone Ridge’s website, so we’ll have to take a look at the form in Forms Manager. Stone Ridge has created a mostly identical form for the past several years; we’ll look at the most recent form for the 2019-2020 school year.

Stone Ridge School Student Transportation Contract in Forms Manager

“This functional form expertly captures all our students who need bus transportation,” said Patty Lynch, Stone Ridge School E-Communication Manager. “A few years ago, we decided to work with Georgetown Prep, and their students can use our buses. We have many brothers who hop on our bus, as well as other students from VA who need to get to Bethesda, MD.”

To serve multiple schools, each with specific needs for their own families, Stone Ridge’s form needed to be fairly complex with numerous options for pick-up and drop-off locations, times, and the ability to accept payments for the families that choose one of the transportation options.

Stone Ridge School Bus Transportation Routes

Virginia parents can choose between multiple one-way or two-way transportation options with various combinations of morning, afternoon, or evening buses and the corresponding changes in prices. D.C. and Potomac parents have a single one-way, morning-only option with a $1,500 fee. The form requires every parent to pay $500 per student, and they can choose to pay by check or through their existing FACTS payment plan. 

After selecting when they’d like their child or children picked up, the parent is then required to select from a list of available pick-up and drop-off locations. In total, the form lists 13 different locations dotted across 10 of the 92 zip codes of enrolled students. While complex with dozens (perhaps hundreds) of different combinations, this transportation form is ultimately simple to understand and navigate, and only requires a few minutes of your time to complete.

Key Takeaway

When schools think of online forms they most commonly think of application, tuition, or inquiry forms, and we certainly can’t blame them. They’re the most frequently encountered forms, but they’re far from the only ways to use forms, as these four schools have so expertly shown. It’s not always about just collecting marketing information. Conserve School was able to collect information while also providing a useful tool to prospective families; Latin School, Notre Dame, and Stone Ridge improved the school experience for their current community through unique applications of online forms. 

We cannot wait to share creative ways schools use Forms Manager to improve the user experience and collect information during our second annual Double Diamond Awards show during Finalsite University 2020 next March in Orlando.


Request a demo of Forms Manager


Andrew-Martin-Headshot
ABOUT THE AUTHOR

As Finalsite’s Product Marketing Specialist, Andrew writes blogs and creates videos to share information about all the latest and greatest Finalsite products. Andrew has more than 10 years of video production experience and a journalism degree from the University of South Carolina. He has an incredible passion for movies, television, reading, and writing fantasy and science-fiction. 

  • Awards
  • Best Practices
  • Double Diamond Awards
  • Inspiration
  • Product
There are no news posts to display

Virtual Social Media Workshop

Join us virtually on January 17, 2020 for a full day of social media strategy from the comfort of your couch, office, or favorite coffee shop.

FinalsiteU 2020 | March 4-6, 2020

Join 300+ school professionals from around the globe for the industry's "must-attend conference of the year."