Forms

By combining these built-in form components, you can create a wide variety of forms to meet most basic needs, but we primarily recommend their use for generating simple email messages (contact and feedback forms or quick registration or service requests). For more complex or critical needs (including storing responses), please consider a more robust platform such as Formstack.

1. Ensure your forms send email from a suitable account.
   • By default, UBCMS forms generate email 'From' one of our admin accounts, ubinfo@buffalo.edu.
     
   • Please change this to a more suitable account you control.
   • Consider establishing an admin account or at least an email alias so there is good coverage for any replies or delivery errors that are generated.
2. Set a clear 'thank you' page, and consider a unique page for each form.
   • This allows you to set expectations, next steps or other useful information
     
   • By having a unique results page for each form, you can collect usage data for each form submission.
   • For third party services, having this page means your visitors will not land in an undesirable place, such as Formstack's corporate site!
     
3. Consider sending your submitters an acknowledgment email.
   • For UBCMS forms, you can automatically CC the submitter on the submitted email.
   • For Formstack forms, a Confirmation under Settings: Emails & Actions.
   • However, this practice can be 'hijacked' by bad agents to generate spam to third parties, and can generate a lot of bounces from bad email addresses, so it may not be wise on high profile or high volume forms.  
4. Preserve data for important submissions.
   • For UBCMS forms, you can use the Store option, but its data handling is not very powerful.
   • We encourage use of Formstack, which collects all data in a friendly table interface.
5. Create UB branded forms.
   • Your forms can be styled appropriately for use in the UBCMS using our UB Branded theme.
   • Learn more about the UB Branded theme.
6. Always test your form when you first create it to be sure the sequence from submission to delivery is desirable.
7. Regularly test your form to ensure delivery to all recipients is successful.

• Remember that admin email accounts need to be renewed annually.
  • Try emailing the intended recipient directly to be sure your email gets through.
  • Try a test of your form, to see how it functions.
• If the form fails to work, or an error message appears:
  • Take a screen shot of the error message.
  • File a UBCMS Help Desk request.  
• If emails are unexpectedly being filtered into ‘junk’ folders, or not reaching their targets, Unit Web Leads/Site Owners or Technical Leads should contact the UBit Mail Team.
  • Use the general EIS service request form.
    
  • For ‘Service or Machine Name’, choose “Email – Exchange”.
• If this becomes urgent, Unit Web Leads/Site Owners or Technical Leads should contact UBit at 716-645-3816 and indicate this is an ‘email issue’. You will put you in touch with an available manager who will prioritize your request.
• But if the issue lies with a third party (e.g. Formstack), you will need to work directly with their support service.

We have found Formstack (formstack.com) to be a reliable and robust solution for forms that are more complex than the basic UBCMS tools. A reasonably priced local site license will likely meet your needs.

To use a Formstack in the UBCMS, you will first need to build your form in Formstack.com, then embed the code for the form into your UBCMS page using one of these two methods.

Our custom solution to embed a Formstack form into a UBCMS page is the Formstack component.

Using this component, authors only need to paste the default Formstack embed code directly into the Formstack component on their UBCMS page. This code is provided with your form on FormStack.com. Look in the Publish tab, under 'Quick Start' for 'Embed this form on your website (JavaScript)'. Copy that code and paste it into the UBCMS component. No further adjustments are required.

This method of embedding a Formstack form relies on the HTML Snippet.

This approach works well, but requires using the regular embed code option insteasd of the QuickStart. In Formstack, open the Embed Form section, and use the 'JavaScript Embed Script ' but be sure to select the Advanced Option of 'I don't need jQuery' otherwise the UBCMS page could be corrupted.

This method is required to embed multiple Formstack forms on a page. Use the Formstack component for the first form, then an HTML Snippet for each additional form. (Read more about this Known Issue.)

This method supports prefilling field values. Add these values in both places in the embed code, for the <script> and also the <noscript> URLs. (There are also more advanced ways to pull in user data from our SSO session if the user has logged in already.)

Here is an example of code:

      <script type="text/javascript" src="https://abc.formstack.com/forms/js.php/some_form?nojquery=1&Field=value"></script><noscript><a href="https://abc.formstack.com/forms/some_form?Field=value" title="Online Form">Online Form</a></noscript><script type='text/javascript'>if (typeof $ == 'undefined' && jQuery){ $ = jQuery}</script>

We suggest you delete the embed code's link back to Formstack. It will look like this example:

      <div style="text-align:right; font-size:x-small;"><a href="http://www.formstack.com?utm_source=jsembed&utm_medium=product&utm_campaign=product+branding&fa=h,5469134" title="Powered by Formstack">Powered by Formstack</a></div>

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, or you would like to update your version, a master copy is in Box as a text file (UB login required).  > UB-branded CSS style sheet  

To appy our master style sheet, open any of your Formstack forms,switch to Build, then click the Style tab in the upper left. In the Themes Library, edit an existing theme and overwrite with the new code, or click Create Theme and paste in the code.

We make our UB-branded theme the default so it is applied automatically to all our own forms.

(Note: you can also transfer a theme to another account. Copy a blank form that has that theme applied to another registered Formstack user -- see Formstack's documentation.)

This method of embedding a Formstack form relies on the HTML Snippet and requires using the Embed Form option and the JavaScript Embed Script. Select 'I don't need jQuery' when the embed code is generated otherwise the page could be corrupted.  

Add the values you wish to prefill in both places in the embed code, for the <script> and also the <noscript> URLs.  

Here is an example of code:

      <script type="text/javascript" src="https://abc.formstack.com/forms/js.php/some_form?nojquery=1&Field=value"></script><noscript><a href="https://abc.formstack.com/forms/some_form?Field=value" title="Online Form">Online Form</a></noscript><script type='text/javascript'>if (typeof $ == 'undefined' && jQuery){ $ = jQuery}</script>

We suggest you delete the embed code link back to Formstack. It will look like this example:

      <div style="text-align:right; font-size:x-small;"><a href="http://www.formstack.com?utm_source=jsembed&utm_medium=product&utm_campaign=product+branding&fa=h,5469134" title="Powered by Formstack">Powered by Formstack</a></div>

Formstack fields can be set as hidden or read-only (to prevent the user from changing the pre-filled value).

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.