Forms methods - ucsf-ckm/ucsf-library-ux-and-web-documentation GitHub Wiki

Overview

We have a few different types of forms on the main library website.

  1. help center form (Zendesk)
  2. general contact form (Zendesk)
  3. single area contact forms (WPForms)
  4. single area subscribe to newsletters form (Elementor form)
  5. general subscribe to newsletters form (Elementor form)

Help Center widget

  • There is a Help widget on every page. When the user does not find an answer right away, it offers a general contact form with 5 choices for I need help with.
  • Zendesk generates the form, and form submissions open a ticket in Zendesk.

generic widget

Help Center pages

  • There is also a Contact us link on every page of the Help Center (part of Zendesk, not part of main library site) that opens the same general contact form with 5 choices for I need help with.
  • Zendesk generates the form, and form submissions open a ticket in Zendesk.

General contact form

  • There is a Send a Message link in the footer that opens the same general contact form with 5 choices for I need help with.
  • Zendesk generates the form, and form submissions open a ticket in Zendesk.

generic

Single area contact form

  • When a user is already on a page in a specific area, the Contact us link provides a more focused form (fields vary)
  • We create these forms using the plugin WPForms Plus and insert individual forms into our pages with the Elementor Pro widget: WPForms
  • Form submissions usually notify a Zendesk email address that opens a ticket for a specific Zendesk group. In a few exceptions, notifications were just sent to an @ucsf.edu address, but that no longer works after campus increased email security in 2023.

Placing an existing form into a webpage via the Elementor Pro widget for WPForms

single

Example of a WPForms form embedded in a page

single

Example of notifications and other settings for each WPForms form

single

example of necessary Zendesk steps

We need a form that will submit a Zendesk ticket to the group UC Library Search Support.

  1. Set up a new group in Zendesk: UC Library Search
  2. Create a new address in Zendesk [email protected] and use triggers to that assign any tickets to group UC Library Search
  3. Create a form on the library website using WPForms that submits to [email protected]

Single area subscribe to newsletters form

Individual mailing lists on expert pages use an Elementor form which connects to Campaign Monitor by way of the MailOptin plugin.

  • When a user is already on a page in a specific area, the news sign-up is also specific
  • We create these using the forms widget in Elementor Pro along with integration of our Campaign Monitor account via MailOptin
  • Form submissions add the email address to the specified Campaign Monitor list

single example

single

Opt-in confirmation email

When someone subscribes, the form (Elementor form > Additional Options generates a success message: Thanks for subscribing! Check your email to confirm.

When the address hits Campaign Monitor (Campaign Monitor > Lists & Subscribers > Settings > Confirmed opt-in email), it sends out a confirmation email.

email text

confirmed

These interactions are controlled by these settings for each list (which become available after setting Subscription opt-in to Confirmed opt-in (confirmation required)

opt-in settings

General subscribe to newsletters form

The same approach is used on https://www.library.ucsf.edu/news-updates/

WPForms Support docs