Formstack Component

Embed an alternative to the UBCMS native forms.

This feature works comparably in both the Classic and Flex UI versions of the UBCMS. In the future, screenshots and language will be updated to reflect Flex UI.

On this page:

Accessibility
  • Forms Must be Accessible.
  • Third Party Content Must Be Accessible.

> Read more.

Last reviewed: September 21, 2021

The UBCMS is not an appropriate place for ANY regulated private data, such as bank credit/debit card numbers, government-issued ID numbers, health information or computer passwords.

Read more about using forms in the UBCMS, including Formstack, in our Features Library.

Using This Component

The component opened for editing, showing where the code is pasted.

The component opened for editing, showing where the code is pasted.

This component will embed a Formstack.com form into your page.

Add the component to the page. It has one tab.

When the component is opened for editing, it will initially display 'Use Formstack's Quick Start embed code.' Simply paste in the code from your Formstack form here. There are no further options or settings.

Use the Default Formstack Code

With this component, you can use the default code from Formstack.com. There is no need to turn off jQuery (unlike earlier ways of embedding these forms in the HTML Snippet). Conversely, this method does not support turning off jQuery, jQuery UI, or FormStack-derived themes.

The component opened for editing, showing code pasted in.

The component opened for editing, showing code pasted in.

The UBCMS component will convert the code into the “no jquery” version of the code.

The component validates the pasted Formstack code and will alert the author if there are any problems.

Initially a "Form is loading…" message may be displayed, but will disappear as the actual form is loaded from Formstack.

Where Do I Find the Code in Formstack?

This component uses the default version of the embed code from your Formstack form.

This code is located with your form on Formstack.com. Look in the Publish tab, under 'Quick Start.'

Where to find the embed code on the FormStack.com site.

Where to find the embed code on the Formstack.com site.

Need to turn off jQuery or jQuery UI?

This component uses the default code from Fromstack.com. If you NEED to use the code with jQuery or jQuery UI turned off, consider embedding your form using the HTML Snippet.

Styling the Form for UBCMS Use

We have created a UB theme that will style your form to match the UB brand and UBCMS style.

Look for it in Formstack by opening one form in Build, then click Styles in the upper left of the page to display available themes. If you see 'UB Branded -- use this theme only', select it so it is marked Active. The styling will immediately be applied to your live form.

If you do not see it, ask the DCT Help Team to share a copy. (Note: to transfer a theme to another account, you must Copy a blank form that has that theme applied -- see Formstack's documentation.)

Errors in UBCMS Author

The component displaying an error message when bad code has been entered.

An error displays when bad code is embedded.

If there are any problems with the code that was embedded from Formstack, the component will display an error message in the Author environment; e.g. if jQuery is turned OFF in Formstack.com when the code was generated, or if only part of the code was copied.

Best Practice: Preventing Spam & Delivery Errors

While spam can clog your intake, bad agents can also abuse our forms to spam third parties, threatening our reputation and potentially getting our forms blacklisted. While some forms can be protected behind secure pages (where only UB constituents can see them), most of our forms are on public pages, where they are at risk from clumsy behavior and abuse.

These native Formstack features are recommended for high-volume or very sensitive forms:

  • Invisible reCAPTCHA - This additional setting in the 'Form Extras' tab forces untrusted users to complete a challenge before they can submit the form. This helps block robots and discourages human spammers by slowing them down. Google's algorithmns decide who is trustworthy based on their online behavior, and most users will not see the puzzle.
  • Email Validation - This additional setting on the Email field adds a second email box. The user must fill in both fields and they must match. This resists accidental entry of a bad email address. It also reduces email bounces (e.g. from a misdirected confirmatione mail) -- high bounce levels can result in our forms being blacklisted.
  • Skip the Confirmation Email - Generally we encourage confirmations to set expectations and provide a record of their submission, but this feature gives bad agents a tool to enter a third party address, and thus generate spam or even a phishing attack to that third party. Not only is this behavior undesirable, but high bounce levels or spam complaints can result in our forms being blacklisted.

Technical Restrictions

  • For the UBCMS, the vendor warns against embedding more than one Formstack form on a page. There is a workaround, but it requires developer level skills.
  • In Formstack, do not use the default Other in a dropdown list with the additional text field - both will be labeled the same id. Instead use a separate and clearly labeled "other" text field.
  • In Formstack, do not use the built in date picker. Instead provide separate day, month, and year fields.
Known Issue - One Form Per Page

> Read more about this Known Issue

Be careful with Formstack options

Do not use the default Other in a dropdown list with the additional text field - both will be labeled the same id. Instead use a separate and clearly labeled "other" text field.

Do not use the built in date picker. Instead provide separate day, month, and year fields.

Accessibility Concerns

See an Example

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)