Formstack Component

Provides a simple way for authors to embed an existing Formstack.com form into a UBCMS page.

Using This Component

Add the component to the page. It is represented by a bar and has one tab.

The component as it looks when first loaded onto the page.

The component when first loaded onto the page. Click the edit button to enter the code.

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.

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

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

Use the Default Formstack Code

With this component, you can use the default code from Fromstack.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 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.

The component opened for editing, showing code pasted in.

The component opened for editing, showing code pasted in.

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.

Errors

If there are any problems with the code that was copied 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.

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

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

Restrictions

None.

Advanced - Using User Info Loader with Formstack

The following instructions should only be attempted by advanced UBCMS users.

The User Info Loader component can be used to automatically pass information from the UBCMS to Formstack.

  1. Add the User Info Loader component to the page your Formstack form is loaded.
  2. Identify the 'input id' value for each Formstack field you wish to populate using the Inspect/Inspect Element tool.
    • Switch to Preview mode first and right-click on the specific field in your Formstack form and choose 'Inspect' or Inspect Element.'
    • A report will load at the bottom of your browser window.
    • Look for 'user id = field123456' where the 'XXXX' is a string of numbers.
    • Double click the 'field123456' value to select it, and click Control-C (or Command-C) to copy the value.
  3. Use Control-V (or Command-V) to paste the 'input id' into the User Info Loader field you wish to pass to Formstack.
  4. Test your form carefully to be sure the correct information is passed.
Example of InfoLoader working with a Formstack form, showing matching Inspect Element and InfoLoader details.

Example of InfoLoader working with a Formstack form, showing matching Inspect Element and InfoLoader details.

Was This Page Helpful?

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

On this page:

See an Example:

Read more about using forms in the UBCMS, including Formstack, in this Advanced Topic.

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.

Related Components:

Last Reviewed:

April 23, 2018