Embed an alternative to the UBCMS native forms.
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.
Last reviewed: October 18, 2024
Read more about using forms in the UBCMS, including Formstack, in our Features Library.
This component embeds a Formstack.com form into your page. Add the component to the page. It has one tab.
With this component, you can use the default Formstack embed code but this method does not support turning off jQuery, jQuery UI, or FormStack-derived themes.
When the component is opened for editing, it will initially display 'Use Formstack's Quick Start embed code. -- replace this with the default embed code from your Formstack form.
The UBCMS component will convert the code into a “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.
This component works best for Formstack Forms.
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.
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.
This component uses the default version of the JavaScript embed code from your Formstack form, which is provided on their Share tab.
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.
Your forms can be styled appropriately for use in the UBCMS using our UB Branded theme.
> Learn more about the UB Branded theme.
Formstack fields can be prepopulated using the InfoLoader, or through variable included in a link to the form.
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.
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:
Forms should be intuitively organized with headings, clearly marked required fields and clear instructions about what information is desired.
Forms must also be usable for people using screen readers or tabbing using a keyboard. This includes providing a clear label for each field.
Much of this functionality is already built into our UBCMS components and Formstack forms, but be careful not to circumvent these settings.
Best practice: For the UBCMS, a meaningful value must be supplied in the title or label for each form component such as the Dropdown List or Text Field.
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.
Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.
Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".
Authors are responsible for any third party content that is hosted or linked from their UBCMS pages.
This includes applications such as Formstack forms and Google Maps, that are displayed using their own component, as well as entries from UB's Calendar of Events, and external content hosted using HTML Snippet or External Embed.
Best practice: for Formstack forms, avoid using the date picker and the 'other' option in dropdowns.
Best practice: for the HTML Snippet and External Embed, always run an accessibility test (e.g. using a browser extension), check its behavior in mobile, and consider how it may impact page performance in general.
Best practice: if your code relies on a 'div' or iframe to house its content on your page, it must have an identifying label, often coded as a 'aria-label' or sometimes a 'title', that assistive technology can see. Formstack produces a title automatically, although it is poorly worded, but other applications tend to skip this requirement so it must be added manually on your end.
If you have concerns that external vendor content is not accessible, please contact UB's Web Accessibility officer.