Digital Experience Studio > Website Technology > Sitecore CMS > Sitecore User Guide > Design Studio: Forms >

Form Field Guide

Form Field Guide

The following fields and basic content items are available to include in SitecoreAI Forms. Expand each tab to view additional information regarding the various settings available for each item. 

To edit item settings in Design Studio:

  1. Click the item in the form edit canvas. The item will be outlined with a purple border to indicate it is selected. A settings panel will open on the right. The settings panel can also be opened by clicking the Settings icon in the purple toolbar that appears above the item when it has been selected.
  2. Adjust any settings in the panel, as needed.
  3. Repeat for other items, as needed.
  4. Click Save and exit to save the changes and return to the forms listing page.
    These settings are field-specific. For information about form-wide styling option fields, see the Data tab on the “Design Studio: Forms” page. 
Important: Users are responsible for ensuring any forms they build are in compliance with MSU’s Institutional Data Policy. Sitecore forms should not be used for collecting passwords, credit card information or payment data. Use proper, authorized systems for processing payments.

Fields

Field items are used to collect information from the individual submitting the form. Expand each tab to read about the available field types and their settings and options.

The Button field item is typically used for the form submission action. As such, it should be placed at the bottom of the form fields to be filled out by a visitor.

Button field settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

  • Sets a background color for the area behind a button
  • Default: transparent
  • Click the color square to apply a new color to the background of the form using the color picker, HEX code, RGBA numbers or select from the palette.
  • Selected colors should adhere to MSU brand standards.

Shadow settings

  • Adds a shadow effect to a button
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Button color

  • Sets a color for a button
  • Default setting: blue
  • Click the color square to apply a new color to the button using the color picker, HEX code, RGBA numbers or select from the palette.
  • Selected colors should adhere to MSU brand standards.
  • Text and background color contrast must adhere to MSU Web Accessibility standards.

Label color

  • Sets a color for the label on a button
  • Default setting: white
  • Click the color square to apply a new color to the label text using the color picker, HEX code, RGBA numbers or select from the palette.
  • Selected colors should adhere to MSU brand standards.
  • Text and background color contrast must adhere to MSU Web Accessibility standards.

Border color

  • Sets a border color for form buttons
  • Default setting: black
  • No border will be visible unless the border width is greater than 0.
  • Click the color square to apply a new color to the background of the form using the color picker, HEX code, RGBA numbers or select from the palette.
  • Selected colors should adhere to MSU brand standards.

Label

  • Controls the default form button label
  • Default setting: Submit

Font family

  • Controls the font family for form button label
  • Default setting: Arial

Font size

  • Controls the font size for form button label
  • Default setting: 16

Decorations

  • Controls the appearance of text on the button label
  • Options:
    • Italics
    • Bold
    • Underline

Alignment

  • Controls how text is aligned within the button
  • Select an icon for alignment.
  • Options include:
    • Left
    • Center
    • Right
  • Default setting: Center

Button width (drop-down)

  • Fit to text: Default setting; the button width expands to accommodate the text label and label padding.
  • Full width: The button width spans the container.
  • Custom: The user dictates the button width and height.

Button width (numeric)

  • Only visible if “Custom” is selected in the original Button width field
  • Controls how the button size adjusts based on the text label
  • Default setting: 50

Button height (numeric)

  • Only visible if “Custom” is selected in the original Button width field
  • Sets the height of the button
  • Default setting: 100

Margin

  • Controls the area of space around the button, limiting how close other elements can be to the edge of the button
  • Not available if “Full-width” is selected for Button width field
  • Default setting: 0

Label padding

  • Controls the area of space around the button, limiting how close other elements can be to the edge of the button
  • Not available if “Custom” is selected for Button width field
  • Default setting: 16

Border width

  • Sets the width of the button border
  • Default setting: 0 (no border)

Border radius

  • This rounds the corners of the outer border edge.
  • One number controls the radius for all four corners of the border on the element.
  • Default setting: 10

Use an Email field item to collect an email address from a visitor.

Email field settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel

Background color

Shadow settings

  • Adds a shadow effect to an email field
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Name

  • Text field
  • Serves as an internal system name for the field
  • Not visible to visitors
  • The field name is included in the email reporting submitted form data to users. Ensure a clear name is selected so internal email recipients understand which field a form response entry corresponds to. Matching the name to the field label often works well.

Label

  • Text field
  • Serves as the field label on the published form
  • Visible to visitors
  • The field label should make the intent of the field clear to the person filling in the form.
  • Use the label styles tab at the bottom of the settings panel to control the appearance of label text.
  • Label text can be hidden under the label styles tab at the bottom of the settings panel.

Placeholder

  • Optional text field
  • This serves as the default placeholder text within the field, often used as directions for what the visitor should enter in the field.
  • Use the placeholder styles tab at the bottom of the settings panel to control the appearance of placeholder text.

Help text

  • Optional text field
  • Use help text to provide additional guidance to visitors on how the field’s question should be answered.
  • Use the help text styling tab at the bottom of the settings panel to control the appearance of help text.
  • Help text can be hidden under the help text styling tab at the bottom of the settings panel.

Prefill value

  • Optional text field
  • To have the field prepopulated with an address, include the address here.
  • This option is typically not used for Email field types.

Required

  • Check the box to make the field a required field. Forms cannot be submitted until all required fields have been completed.
  • Use form logic to add conditional rules to make required fields become optional or make optional fields become required. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Hidden

  • Check the box to hide the field. Hidden fields are not visible to site visitors.
  • Use form logic to add conditional rules to make hidden fields become visible or to hide visible fields. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Pattern

  • Optional field
  • Use the pattern field to add custom validation rules using regular expression patterns. 

Padding

  • Controls the area of space around the item, limiting how close the field gets to the border of slot the field is in. A higher padding number means more space around the field.
  • Default setting: 16
  • Click the lock icon to adjust padding on one (or more) sides independently. By default, the padding setting is applied to all four sides.

Field styles

  • Field background color
    • Sets the background color for the field
    • Default setting: transparent
    • Click the color square to apply a new color to the background of the field using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Border width
    • Controls the thickness of the outer border of the field box
    • Default setting: 1
  • Border radius
    • Rounds the corners of the outer border edge on the field box
    • One number controls the radius for all four corners of the border on the element
    • Default setting: 6
  • Border color
    • Sets a border color for the field
    • Default setting: grey
    • No border will be visible unless the border width is greater than 0.
    • Click the color square to apply a new color to the background of the form using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
  • Field font
    • Controls the font for the field text
    • Default setting: Arial
  • Field font size
    • Controls the font size for the field text
    • Default setting: 16
  • Inner padding
    • Controls the amount of space around the text entered in the field box. A higher padding number means more space around the text.
    • Default setting: 10
  • Font color
    • Sets a color for text entered in the field
    • Default setting: black
    • Click the color square to apply a new color to the field text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Field decorations
    • Controls the appearance of text entered in the field.
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Label styles

  • Hide label
    • Check this box to hide the label text that appears above or beside the field.
  • Label font
    • Controls the font for the field label
    • Default setting: Arial
  • Label position
    • Controls the location of the field label
    • Options:
      • Top
      • Left
    • Default setting: Top
  • Label font size
    • Controls the font size for the field label
    • Default setting: 16
  • Label width
    • Controls the width of the field label
    • Default setting: 25
  • Label font color
    • Sets a color for the field label text
    • Default setting: dark grey
    • Click the color square to apply a new color to the label text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Asterisk color
    • Sets a color for the field label asterisk on required fields.
    • Default setting: red
    • Click the color square to apply a new color to the required field asterisk using the color picker, HEX code, RGBA numbers or select from the palette.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Label decoration
    • Controls the appearance of the field label text.
    • Options:
      • Italics
      • Bold
      • Underline
    • Default setting: Bold
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Placeholder styles

  • Placeholder font
    • Controls the font for the field placeholder text
    • Default setting: Arial
  • Placeholder font size
    • Controls the font size for the field placeholder text
    • Default setting: 16
  • Placeholder font color
    • Sets a color for the field placeholder text
    • Default setting: medium grey
    • Click the color square to apply a new color to the placeholder text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Help text

  • Hide help text
    • Check this box to hide the help text that appears below the field.
  • Help text font
    • Controls the font for the field help text
    • Default setting: Arial
  • Help text color
    • Sets a color for the field help text
    • Default setting: medium grey
    • Click the color square to apply a new color to the help text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Help text font size
    • Controls the font size for the field help text
    • Default setting: 14
  • Help text top spacing
    • Controls the amount of space between the field and the field help text. A higher spacing number means more space between the field and the help text. Help text should appear near the field it refers to, so visitors are clear which field the help text is associated with.
    • Default setting: 8
  • Text decoration
    • Controls the appearance of the field help text
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Use a Phone field item to collect a phone number from a visitor.

Phone field settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

Shadow settings

  • Adds a shadow effect to a phone field.
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Name

  • Text field
  • Serves as an internal system name for the field
  • Not visible to visitors
  • The field name is included in the email reporting submitted form data to users. Ensure a clear name is selected so internal email recipients understand which field a form response entry corresponds to. Matching the name to the field label often works well.

Label

  • Text field
  • Serves as the field label on the published form
  • Visible to visitors
  • The field label should make the intent of the field clear to the person filling in the form.
  • Use the label styles tab at the bottom of the settings panel to control the appearance of label text.
  • Label text can be hidden under the label styles tab at the bottom of the settings panel.

Help text

  • Optional text field
  • Use help text to provide additional guidance to visitors on how the field’s question should be answered.
  • Use the help text styling tab at the bottom of the settings panel to control the appearance of help text.
  • Help text can be hidden under the help text styling tab at the bottom of the settings panel.

Prefill value

  • Optional text field
  • To have the field prepopulated with a phone number, include the number here.
  • This option is typically not used for Email field types.

Required

  • Check the box to make the field a required field. Forms cannot be submitted until all required fields have been completed.
  • Use form logic to add conditional rules to make required fields become optional or make optional fields become required. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Hidden

  • Check the box to hide the field. Hidden fields are not visible to site visitors.
  • Use form logic to add conditional rules to make hidden fields become visible or to hide visible fields. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Padding

  • Controls the area of space around the item, limiting how close the field gets to the border of slot the field is in. A higher padding number means more space around the field.
  • Default setting: 16
  • Click the lock icon to adjust padding on one (or more) sides independently. By default, the padding setting is applied to all four sides.

Field styles

  • Field background color
    • Sets the background color for the field
    • Default setting: transparent
    • Click the color square to apply a new color to the background of the field using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Border width
    • Controls the thickness of the outer border of the field box.
    • Default setting: 1
  • Border radius
    • Rounds the corners of the outer border edge on the field box
    • One number controls the radius for all four corners of the border on the element.
    • Default setting: 6
  • Border color
    • Sets a border color for the field
    • Default setting: grey
    • No border will be visible unless the border width is greater than 0.
    • Click the color square to apply a new color to the background of the form using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
  • Field font
    • Controls the font for the field text
    • Default setting: Arial
  • Field font size
    • Controls the font size for the field text
    • Default setting: 16
  • Inner padding
    • Controls the amount of space around the text entered in the field box. A higher padding number means more space around the text.
    • Default setting: 10
  • Font color
    • Sets a color for text entered in the field
    • Default setting: black
    • Click the color square to apply a new color to the field text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Field decorations
    • Controls the appearance of text entered in the field.
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Label styles

  • Hide label
    • Check this box to hide the label text that appears above or beside the field.
  • Label font
    • Controls the font for the field label
    • Default setting: Arial
  • Label position
    • Controls the location of the field label
    • Options:
      • Top
      • Left
    • Default setting: Top
  • Label font size
    • Controls the font size for the field label
    • Default setting: 16
  • Label width
    • Controls the width of the field label
    • Default setting: 25
  • Label font color
    • Sets a color for the field label text
    • Default setting: dark grey
    • Click the color square to apply a new color to the label text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Asterisk color
    • Sets a color for the field label asterisk on required fields
    • Default setting: red
    • Click the color square to apply a new color to the required field asterisk using the color picker, HEX code, RGBA numbers or select from the palette.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Label decoration
    • Controls the appearance of the field label text.
    • Options:
      • Italics
      • Bold
      • Underline
    • Default setting: Bold
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Placeholder styles

  • Placeholder font
    • Controls the font for the field placeholder text
    • Default setting: Arial
  • Placeholder font size
    • Controls the font size for the field placeholder text
    • Default setting: 16
  • Placeholder font color
    • Sets a color for the field placeholder text
    • Default setting: medium grey
    • Click the color square to apply a new color to the placeholder text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Help text

  • Hide help text
    • Check this box to hide the help text that appears below the field.
  • Help text font
    • Controls the font for the field help text
    • Default setting: Arial
  • Help text color
    • Sets a color for the field help text
    • Default setting: medium grey
    • Click the color square to apply a new color to the help text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Help text font size
    • Controls the font size for the field help text.
    • Default setting: 14
  • Help text top spacing
    • Controls the amount of space between the field and the field help text. A higher spacing number means more space between the field and the help text. Help text should appear near the field it refers to, so visitors are clear which field the help text is associated with.
    • Default setting: 8
  • Text decoration
    • Controls the appearance of the field help text
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Use a Short text field item to allow visitors to enter a brief written answer, such as a single line of text. Example use cases include: First Name, Last Name, Address.

Important: The Short text field is also used to add the webhook to the end of a form. Webhooks route the submitted form data to the proper email address. See Step 5 in the “Building Basic Forms” section of the Build and Manage Forms page for specific instructions on using the Short text field item for webhooks. 

For Short text fields used as webhooks, the following fields are necessary:

  • Name: Enter text TO
  • Label: Enter text TO
  • Prefill value: Copy and paste the webhook character string provided into this field.
  • Hidden: Check the box to hide this field from visitors. It is only necessary for backend processing and should not be visible.

Short text field settings panel options:

 

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

Shadow settings

  • Adds a shadow effect to a short text field.
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Name

  • Text field
  • Serves as an internal system name for the field
  • Not visible to visitors
  • The field name is included in the email reporting submitted form data to users. Ensure a clear name is selected so internal email recipients understand which field a form response entry corresponds to. Matching the name to the field label often works well.

Label

  • Text field
  • Serves as the field label on the published form
  • Visible to visitors
  • The field label should make the intent of the field clear to the person filling in the form.
  • Use the label styles tab at the bottom of the settings panel to control the appearance of label text.
  • Label text can be hidden under the label styles tab at the bottom of the settings panel.

Placeholder

  • Optional text field
  • This serves as the default placeholder text within the field, often used as directions for what the visitor should enter in the field.
  • Use the placeholder styles tab at the bottom of the settings panel to control the appearance of placeholder text.

Help text

  • Optional text field
  • Use help text to provide additional guidance to visitors on how the field’s question should be answered.
  • Use the help text styling tab at the bottom of the settings panel to control the appearance of help text.
  • Help text can be hidden under the help text styling tab at the bottom of the settings panel.

Prefill value

  • Optional text field
  • To have the field prepopulated with text, include the text here.
  • This option is typically not used for short text field types. The exception is for short text fields used for webhooks.

Required

  • Check the box to make the field a required field. Forms cannot be submitted until all required fields have been completed.
  • Use form logic to add conditional rules to make required fields become optional or make optional fields become required. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Hidden

  • Check the box to hide the field. Hidden fields are not visible to site visitors.
  • Use form logic to add conditional rules to make hidden fields become visible or to hide visible fields. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Pattern

  • Optional field
  • Use the pattern field to add custom validation rules using regular expression patterns. 

Character limit

  • Sets a maximum number of characters that can be entered in the short text field
  • Default setting: 200
  • For long text entry, use a long text field.

Padding

  • Controls the area of space around the item, limiting how close the field gets to the border of slot the field is in. A higher padding number means more space around the field.
  • Default setting: 16
  • Click the lock icon to adjust padding on one (or more) sides independently. By default, the padding setting is applied to all four sides.

Field styles

  • Field background color
    • Sets the background color for the field
    • Default setting: transparent
    • Click the color square to apply a new color to the background of the field using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Border width
    • Controls the thickness of the outer border of the field box
    • Default setting: 1
  • Border radius
    • Rounds the corners of the outer border edge on the field box
    • One number controls the radius for all four corners of the border on the element.
    • Default setting: 6
  • Border color
    • Sets a border color for the field
    • Default setting: grey
    • No border will be visible unless the border width is greater than 0.
    • Click the color square to apply a new color to the background of the form using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
  • Field font
    • Controls the font for the field text
    • Default setting: Arial
  • Field font size
    • Controls the font size for the field text
    • Default setting: 16
  • Inner padding
    • Controls the amount of space around the text entered in the field box. A higher padding number means more space around the text.
    • Default setting: 10
  • Font color
    • Sets a color for text entered in the field
    • Default setting: black
    • Click the color square to apply a new color to the field text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Field decorations
    • Controls the appearance of text entered in the field
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Label styles

  • Hide label
    • Check this box to hide the label text that appears above or beside the field.
  • Label font
    • Controls the font for the field label
    • Default setting: Arial
  • Label position
    • Controls the location of the field label
    • Options:
      • Top
      • Left
    • Default setting: Top
  • Label font size
    • Controls the font size for the field label
    • Default setting: 16
  • Label width
    • Controls the width of the field label
    • Default setting: 25
  • Label font color
    • Sets a color for the field label text
    • Default setting: dark grey
    • Click the color square to apply a new color to the label text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Asterisk color
    • Sets a color for the field label asterisk on required fields
    • Default setting: red
    • Click the color square to apply a new color to a required field asterisk using the color picker, HEX code, RGBA numbers or select from the palette.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Label decoration
    • Controls the appearance of the field label text
    • Options:
      • Italics
      • Bold
      • Underline
    • Default setting: Bold
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Placeholder styles

  • Placeholder font
    • Controls the font for the field placeholder text
    • Default setting: Arial
  • Placeholder font size
    • Controls the font size for the field placeholder text
    • Default setting: 16
  • Placeholder font color
    • Sets a color for the field placeholder text
    • Default setting: medium grey
    • Click the color square to apply a new color to the placeholder text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Help text

  • Hide help text
    • Check this box to hide the help text that appears below the field.
  • Help text font
    • Controls the font for the field help text
    • Default setting: Arial
  • Help text color
    • Sets a color for the field help text
    • Default setting: medium grey
    • Click the color square to apply a new color to the help text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Help text font size
    • Controls the font size for the field help text
    • Default setting: 14
  • Help text top spacing
    • Controls the amount of space between the field and the field help text. A higher spacing number means more space between the field and the help text. Help text should appear near the field it refers to, so visitors are clear which field the help text is associated with.
    • Default setting: 8
  • Text decoration
    • Controls the appearance of the field help text
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Autocomplete

  • Field type
    • Drop-list
    • Select the type of data expected for this field. This assists autocomplete in anticipating what type of data to prompt.
    • Options:
      • Full name
      • Honorific prefix
      • First name
      • Last name
      • Honorific suffix
      • User name
      • Current password
      • Organization title
      • Organization
      • Street address
      • Country code
      • Country name
      • Postal code
      • Credit card name
      • Language
      • Birth date
      • Birth day
      • Birth month
      • Birth year
      • Sex
  • Field subtype
    • Options vary depending on selection made for field type.

Use a Long text field item to allow visitors to enter a longer written answer, such as a paragraph or multiple lines of text.

Long text field settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

Shadow settings

  • Adds a shadow effect to a long text field
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Name

  • Text field
  • Serves as an internal system name for the field
  • Not visible to visitors
  • The field name is included in the email reporting submitted form data to users. Ensure a clear name is selected so internal email recipients understand which field a form response entry corresponds to. Matching the name to the field label often works well.

Label

  • Text field
  • Serves as the field label on the published form
  • Visible to visitors
  • The field label should make the intent of the field clear to the person filling in the form.
  • Use the label styles tab at the bottom of the settings panel to control the appearance of label text.
  • Label text can be hidden under the label styles tab at the bottom of the settings panel.

Placeholder

  • Optional text field
  • This serves as the default placeholder text within the field, often used as directions for what the visitor should enter in the field.
  • Use the placeholder styles tab at the bottom of the settings panel to control the appearance of placeholder text.

Help text

  • Optional text field
  • Use help text to provide additional guidance to visitors on how the field’s question should be answered.
  • Use the help text styling tab at the bottom of the settings panel to control the appearance of help text.
  • Help text can be hidden under the help text styling tab at the bottom of the settings panel.

Prefill value

  • Optional text field
  • To have the field prepopulated with text, include the text here.
  • This option is typically not used for long text field types. 

Required

  • Check the box to make the field a required field. Forms cannot be submitted until all required fields have been completed.
  • Use form logic to add conditional rules to make required fields become optional or make optional fields become required. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Hidden

  • Check the box to hide the field. Hidden fields are not visible to site visitors.
  • Use form logic to add conditional rules to make hidden fields become visible or to hide visible fields. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Character limit

  • Sets a maximum number of characters that can be entered in the Short text field.
  • Default setting: 1000
  • For long text entry, use a Long text field.

Padding

  • Controls the area of space around the item, limiting how close the field gets to the border of slot the field is in. A higher padding number means more space around the field.
  • Default setting: 16
  • Click the lock icon to adjust padding on one (or more) sides independently. By default, the padding setting is applied to all four sides.

Field styles

  • Field background color
    • Sets the background color for the field
    • Default setting: transparent
    • Click the color square to apply a new color to the background of the field using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Border width
    • Controls the thickness of the outer border of the field box.
    • Default setting: 1
  • Border radius
    • Rounds the corners of the outer border edge on the field box
    • One number controls the radius for all four corners of the border on the element.
    • Default setting: 6
  • Border color
    • Sets a border color for the field
    • Default setting: grey
    • No border will be visible unless the border width is greater than 0.
    • Click the color square to apply a new color to the field border using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
  • Field font
    • Controls the font for the field text
    • Default setting: Arial
  • Field font size
    • Controls the font size for the field text
    • Default setting: 16
  • Inner padding
    • Controls the amount of space around the text entered in the field box. A higher padding number means more space around the text.
    • Default setting: 10
  • Font color
    • Sets a color for text entered in the field
    • Default setting: black
    • Click the color square to apply a new color to the field text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Field decorations
    • Controls the appearance of text entered in the field.
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Label styles

  • Hide label
    • Check this box to hide the label text that appears above or beside the field.
  • Label font
    • Controls the font for the field label
    • Default setting: Arial
  • Label position
    • Controls the location of the field label
    • Options:
      • Top
      • Left
    • Default setting: Top
  • Label font size
    • Controls the font size for the field label
    • Default setting: 16
  • Label width
    • Controls the width of the field label
    • Default setting: 25
  • Label font color
    • Sets a color for the field label text
    • Default setting: dark grey
    • Click the color square to apply a new color to the label text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Asterisk color
    • Sets a color for the field label asterisk on required fields.
    • Default setting: red
    • Click the color square to apply a new color to the required field asterisk using the color picker, HEX code, RGBA numbers or select from the palette.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Label decoration
    • Controls the appearance of the field label text
    • Options:
      • Italics
      • Bold
      • Underline
    • Default setting: Bold
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Placeholder styles

  • Placeholder font
    • Controls the font for the field placeholder text
    • Default setting: Arial
  • Placeholder font size
    • Controls the font size for the field placeholder text
    • Default setting: 16
  • Placeholder font color
    • Sets a color for the field placeholder text
    • Default setting: medium grey
    • Click the color square to apply a new color to the placeholder font text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Help text

  • Hide help text
    • Check this box to hide the help text that appears below the field.
  • Help text font
    • Controls the font for the field help text
    • Default setting: Arial
  • Help text color
    • Sets a color for the field help text
    • Default setting: medium grey
    • Click the color square to apply a new color to the help text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Help text font size
    • Controls the font size for the field help text
    • Default setting: 14
  • Help text top spacing
    • Controls the amount of space between the field and the field help text. A higher spacing number means more space between the field and the help text. Help text should appear near the field it refers to, so visitors are clear which field the help text is associated with.
    • Default setting: 8
  • Text decoration
    • Controls the appearance of the field help text
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Autocomplete

  • Field type
    • Drop-list
    • Select the type of data expected for this field. This assists autocomplete in anticipating what type of data to prompt.
    • Options:
      • Full name
      • Honorific prefix
      • First name
      • Last name
      • Honorific suffix
      • User name
      • Current password
      • Organization title
      • Organization
      • Street address
      • Country code
      • Country name
      • Postal code
      • Credit card name
      • Language
      • Birth date
      • Birth day
      • Birth month
      • Birth year
      • Sex
  • Field subtype
    • Options vary depending on selection made for field type.

Use a Select field item to allow visitors to choose one option from a drop-down list of predefined choices.

Select field settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

Shadow settings

  • Adds a shadow effect to a select field
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Name

  • Text field
  • Serves as an internal system name for the field
  • Not visible to visitors
  • The field name is included in the email reporting submitted form data to users. Ensure a clear name is selected so internal email recipients understand which field a form response entry corresponds to. Matching the name to the field label often works well.

Label

  • Text field
  • Serves as the field label on the published form
  • Visible to visitors
  • The field label should make the intent of the field clear to the person filling in the form.
  • Use the label styles tab at the bottom of the settings panel to control the appearance of label text.
  • Label text can be hidden under the label styles tab at the bottom of the settings panel.

Placeholder

  • Optional text field
  • This serves as the default placeholder text within the field, often used as directions for what the visitor should enter in the field.
  • Use the placeholder styles tab at the bottom of the settings panel to control the appearance of placeholder text.

Help text

  • Optional text field
  • Use help text to provide additional guidance to visitors on how the field’s question should be answered.
  • Use the help text styling tab at the bottom of the settings panel to control the appearance of help text.
  • Help text can be hidden under the help text styling tab at the bottom of the settings panel.

Required

  • Check the box to make the field a required field. Forms cannot be submitted until all required fields have been completed.
  • Use form logic to add conditional rules to make required fields become optional or make optional fields become required. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Padding

  • Controls the area of space around the item, limiting how close the field gets to the border of slot the field is in. A higher padding number means more space around the field.
  • Default setting: 16
  • Click the lock icon to adjust padding on one (or more) sides independently. By default, the padding setting is applied to all four sides.

Options

  • Short text
  • Use the options section to add options for form visitors to choose.
  • Click + Add option to add additional options.
  • Click the X next to an option to remove a specific option.
  • Click Delete options to remove all options.
  • Select fields allow form visitors to select one item. Make sure your options are mutually exclusive. 

Custom values (Under Options)

  • Toggle switch
  • Activating the Custom values toggle allows the form builder to specify a publicly visible option (top box) that is visible to form visitors and an alternative data label that is sent via the webhook to unit users (bottom box). This can be useful when internal data needs include jargon or technical information that is not user-friendly and would not be appropriate to show on a publicly visible form.

Field styles

  • Field background color
    • Sets the background color for the field
    • Default setting: transparent
    • Click the color square to apply a new color to the background of the field using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Border width
    • Controls the thickness of the outer border of the field box
    • Default setting: 1
  • Border radius
    • Rounds the corners of the outer border edge on the field box
    • One number controls the radius for all four corners of the border on the element.
    • Default setting: 6
  • Border color
    • Sets a border color for the field
    • Default setting: grey
    • No border will be visible unless the border width is greater than 0.
    • Click the color square to apply a new color to the field border using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
  • Field font
    • Controls the font for the field text
    • Default setting: Arial
  • Field font size
    • Controls the font size for the field text
    • Default setting: 16
  • Inner padding
    • Controls the amount of space around the text entered in the field box. A higher padding number means more space around the text.
    • Default setting: 10
  • Font color
    • Sets a color for text entered in the field
    • Default setting: black
    • Click the color square to apply a new color to the field text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Field decorations
    • Controls the appearance of text entered in the field
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Label styles

  • Hide label
    • Check this box to hide the label text that appears above or beside the field.
  • Label font
    • Controls the font for the field label
    • Default setting: Arial
  • Label position
    • Controls the location of the field label
    • Options:
      • Top
      • Left
    • Default setting: Top
  • Label font size
    • Controls the font size for the field label
    • Default setting: 16
  • Label width
    • Controls the width of the field label
    • Default setting: 25
  • Label font color
    • Sets a color for the field label text
    • Default setting: dark grey
    • Click the color square to apply a new color to the label text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Asterisk color
    • Sets a color for the field label asterisk on required fields
    • Default setting: red
    • Click the color square to apply a new color to the required field asterisk using the color picker, HEX code, RGBA numbers or select from the palette.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Label decoration
    • Controls the appearance of the field label text
    • Options:
      • Italics
      • Bold
      • Underline
    • Default setting: Bold
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Placeholder styles

  • Placeholder font
    • Controls the font for the field placeholder text
    • Default setting: Arial
  • Placeholder font size
    • Controls the font size for the field placeholder text
    • Default setting: 16
  • Placeholder font color
    • Sets a color for the field placeholder text
    • Default setting: medium grey
    • Click the color square to apply a new color to the placeholder font text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Help text

  • Hide help text
    • Check this box to hide the help text that appears below the field.
  • Help text font
    • Controls the font for the field help text
    • Default setting: Arial
  • Help text color
    • Sets a color for the field help text
    • Default setting: medium grey
    • Click the color square to apply a new color to the help text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Help text font size
    • Controls the font size for the field help text
    • Default setting: 14
  • Help text top spacing
    • Controls the amount of space between the field and the field help text. A higher spacing number means more space between the field and the help text. Help text should appear near the field it refers to, so visitors are clear which field the help text is associated with.
    • Default setting: 8
  • Text decoration
    • Controls the appearance of the field help text
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Use a Multi select field item to allow visitors to choose multiple options from a drop-down list of predefined choices.

Multi select field settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

Shadow settings

  • Adds a shadow effect to a multi select field.
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Name

  • Text field
  • Serves as an internal system name for the field
  • Not visible to visitors
  • The field name is included in the email reporting submitted form data to users. Ensure a clear name is selected so internal email recipients understand which field a form response entry corresponds to. Matching the name to the field label often works well.

Label

  • Text field
  • Serves as the field label on the published form
  • Visible to visitors
  • The field label should make the intent of the field clear to the person filling in the form.
  • Use the label styles tab at the bottom of the settings panel to control the appearance of label text.
  • Label text can be hidden under the label styles tab at the bottom of the settings panel.

Placeholder

  • Optional text field
  • This serves as the default placeholder text within the field, often used as directions for what the visitor should enter in the field.
  • Use the placeholder styles tab at the bottom of the settings panel to control the appearance of placeholder text.

Help text

  • Optional text field
  • Use help text to provide additional guidance to visitors on how the field’s question should be answered.
  • Use the help text styling tab at the bottom of the settings panel to control the appearance of help text.
  • Help text can be hidden under the help text styling tab at the bottom of the settings panel.

Required

  • Check the box to make the field a required field. Forms cannot be submitted until all required fields have been completed.
  • Use form logic to add conditional rules to make required fields become optional or make optional fields become required. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Padding

  • Controls the area of space around the item, limiting how close the field gets to the border of slot the field is in. A higher padding number means more space around the field.
  • Default setting: 16
  • Click the lock icon to adjust padding on one (or more) sides independently. By default, the padding setting is applied to all four sides.

Options

  • Short text
  • Use the options section to add options for form visitors to choose.
  • Click + Add option to add additional options.
  • Click the X next to an option to remove a specific option.
  • Click Delete options to remove all options.
  • Multi select fields allow form visitors to select more than one item. 

Number of options

  • Numeric value
  • Specify the minimum number of options a user must select to submit the form.
  • Default setting: 0

Custom values (Under Options)

  • Toggle switch
  • Activating the Custom values toggle allows the form builder to specify a publicly visible option (top box) that is visible to form visitors and an alternative data label that is sent via the webhook to unit users (bottom box). This can be useful when internal data needs include jargon or technical information that is not user-friendly and would not be appropriate to show on a publicly visible form.

Field styles

  • Field background color
    • Sets the background color for the field
    • Default setting: transparent
    • Click the color square to apply a new color to the background of the field using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Border width
    • Controls the thickness of the outer border of the field box
    • Default setting: 1
  • Border radius
    • Rounds the corners of the outer border edge on the field box
    • One number controls the radius for all four corners of the border on the element.
    • Default setting: 6
  • Border color
    • Sets a border color for the field
    • Default setting: grey
    • No border will be visible unless the border width is greater than 0.
    • Click the color square to apply a new color to the field border using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
  • Field font
    • Controls the font for the field text
    • Default setting: Arial
  • Field font size
    • Controls the font size for the field text
    • Default setting: 16
  • Inner padding
    • Controls the amount of space around the text entered in the field box. A higher padding number means more space around the text.
    • Default setting: 10
  • Font color
    • Sets a color for text entered in the field.
    • Default setting: black
    • Click the color square to apply a new color to the field text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Field decorations
    • Controls the appearance of text entered in the field
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Label styles

  • Hide label
    • Check this box to hide the label text that appears above or beside the field.
  • Label font
    • Controls the font for the field label
    • Default setting: Arial
  • Label position
    • Controls the location of the field label
    • Options:
      • Top
      • Left
    • Default setting: Top
  • Label font size
    • Controls the font size for the field label
    • Default setting: 16
  • Label width
    • Controls the width of the field label
    • Default setting: 25
  • Label font color
    • Sets a color for the field label text
    • Default setting: dark grey
    • Click the color square to apply a new color to the label text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Asterisk color
    • Sets a color for the field label asterisk on required fields
    • Default setting: red
    • Click the color square to apply a new color to the required field asterisk using the color picker, HEX code, RGBA numbers or select from the palette.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Label decoration
    • Controls the appearance of the field label text
    • Options:
      • Italics
      • Bold
      • Underline
    • Default setting: Bold
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Placeholder styles

  • Placeholder font
    • Controls the font for the field placeholder text
    • Default setting: Arial
  • Placeholder font size
    • Controls the font size for the field placeholder text
    • Default setting: 16
  • Placeholder font color
    • Sets a color for the field placeholder text
    • Default setting: medium grey
    • Click the color square to apply a new color to the placeholder font text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Help text

  • Hide help text
    • Check this box to hide the help text that appears below the field.
  • Help text font
    • Controls the font for the field help text
    • Default setting: Arial
  • Help text color
    • Sets a color for the field help text
    • Default setting: medium grey
    • Click the color square to apply a new color to the help text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Help text font size
    • Controls the font size for the field help text
    • Default setting: 14
  • Help text top spacing
    • Controls the amount of space between the field and the field help text. A higher spacing number means more space between the field and the help text. Help text should appear near the field it refers to, so visitors are clear which field the help text is associated with.
    • Default setting: 8
  • Text decoration
    • Controls the appearance of the field help text
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Use a Date field item to allow visitors to enter a calendar date.

Date field settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

Shadow settings

  • Adds a shadow effect to a date field.
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Name

  • Text field
  • Serves as an internal system name for the field
  • Not visible to visitors
  • The field name is included in the email reporting submitted form data to users. Ensure a clear name is selected so internal email recipients understand which field a form response entry corresponds to. Matching the name to the field label often works well.

Label

  • Text field
  • Serves as the field label on the published form
  • Visible to visitors
  • The field label should make the intent of the field clear to the person filling in the form.
  • Use the label styles tab at the bottom of the settings panel to control the appearance of label text.
  • Label text can be hidden under the label styles tab at the bottom of the settings panel.

Help text

  • Optional text field
  • Use help text to provide additional guidance to visitors on how the field’s question should be answered.
  • Use the help text styling tab at the bottom of the settings panel to control the appearance of help text.
  • Help text can be hidden under the help text styling tab at the bottom of the settings panel.

Prefill value

  • Date
  • To have a specific date prepopulated in the field, enter it here.
  • Click the calendar icon to select a date from a calendar interface. Alternatively, type a date in the box using the MM/DD/YYYY format.

Required

  • Check the box to make the field a required field. Forms cannot be submitted until all required fields have been completed.
  • Use form logic to add conditional rules to make required fields become optional or make optional fields become required. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Hidden

  • Check the box to hide the field. Hidden fields are not visible to site visitors.
  • Use form logic to add conditional rules to make hidden fields become visible or to hide visible fields. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Padding

  • Controls the area of space around the item, limiting how close the field gets to the border of slot the field is in. A higher padding number means more space around the field.
  • Default setting: 16
  • Click the lock icon to adjust padding on one (or more) sides independently. By default, the padding setting is applied to all four sides.

Field styles

  • Field background color
    • Sets the background color for the field
    • Default setting: transparent
    • Click the color square to apply a new color to the background of the field using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Border width
    • Controls the thickness of the outer border of the field box
    • Default setting: 1
  • Border radius
    • Rounds the corners of the outer border edge on the field box
    • One number controls the radius for all four corners of the border on the element.
    • Default setting: 6
  • Border color
    • Sets a border color for the field
    • Default setting: grey
    • No border will be visible unless the border width is greater than 0.
    • Click the color square to apply a new color to the field border using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
  • Field font
    • Controls the font for the field text
    • Default setting: Arial
  • Field font size
    • Controls the font size for the field text
    • Default setting: 16
  • Inner padding
    • Controls the amount of space around the text entered in the field box. A higher padding number means more space around the text.
    • Default setting: 10
  • Font color
    • Sets a color for text entered in the field
    • Default setting: black
    • Click the color square to apply a new color to the field text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Field decorations
    • Controls the appearance of text entered in the field
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Label styles

  • Hide label
    • Check this box to hide the label text that appears above or beside the field.
  • Label font
    • Controls the font for the field label
    • Default setting: Arial
  • Label position
    • Controls the location of the field label
    • Options:
      • Top
      • Left
    • Default setting: Top
  • Label font size
    • Controls the font size for the field label
    • Default setting: 16
  • Label width
    • Controls the width of the field label
    • Default setting: 25
  • Label font color
    • Sets a color for the field label text
    • Default setting: dark grey
    • Click the color square to apply a new color to the label text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Asterisk color
    • Sets a color for the field label asterisk on required fields
    • Default setting: red
    • Click the color square to apply a new color to the required field asterisk using the color picker, HEX code, RGBA numbers or select from the palette.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Label decoration
    • Controls the appearance of the field label text
    • Options:
      • Italics
      • Bold
      • Underline
    • Default setting: Bold
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Help text

  • Hide help text
    • Check this box to hide the help text that appears below the field.
  • Help text font
    • Controls the font for the field help text
    • Default setting: Arial
  • Help text color
    • Sets a color for the field help text
    • Default setting: medium grey
    • Click the color square to apply a new color to the help text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Help text font size
    • Controls the font size for the field help text
    • Default setting: 14
  • Help text top spacing
    • Controls the amount of space between the field and the field help text. A higher spacing number means more space between the field and the help text. Help text should appear near the field it refers to, so visitors are clear which field the help text is associated with.
    • Default setting: 8
  • Text decoration
    • Controls the appearance of the field help text
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Use a Number field item to allow visitors to enter a numerical response.

Number field settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

Shadow settings

  • Adds a shadow effect to a number field.
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Name

  • Text field
  • Serves as an internal system name for the field
  • Not visible to visitors
  • The field name is included in the email reporting submitted form data to users. Ensure a clear name is selected so internal email recipients understand which field a form response entry corresponds to. Matching the name to the field label often works well.

Label

  • Text field
  • Serves as the field label on the published form
  • Visible to visitors
  • The field label should make the intent of the field clear to the person filling in the form.
  • Use the label styles tab at the bottom of the settings panel to control the appearance of label text.
  • Label text can be hidden under the label styles tab at the bottom of the settings panel.

Placeholder

  • Optional text field
  • This serves as the default placeholder text within the field, often used as directions for what the visitor should enter in the field.
  • Use the placeholder styles tab at the bottom of the settings panel to control the appearance of placeholder text.

Help text

  • Optional text field
  • Use help text to provide additional guidance to visitors on how the field’s question should be answered.
  • Use the help text styling tab at the bottom of the settings panel to control the appearance of help text.
  • Help text can be hidden under the help text styling tab at the bottom of the settings panel.

Prefill value

  • Numeric value
  • To have a specific number prepopulated in the field, enter it here.

Required

  • Check the box to make the field a required field. Forms cannot be submitted until all required fields have been completed.
  • Use form logic to add conditional rules to make required fields become optional or make optional fields become required. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Hidden

  • Check the box to hide the field. Hidden fields are not visible to site visitors.
  • Use form logic to add conditional rules to make hidden fields become visible or to hide visible fields. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Padding

  • Controls the area of space around the item, limiting how close the field gets to the border of slot the field is in. A higher padding number means more space around the field.
  • Default setting: 16
  • Click the lock icon to adjust padding on one (or more) sides independently. By default, the padding setting is applied to all four sides.

Field styles

  • Field background color
    • Sets the background color for the field
    • Default setting: transparent
    • Click the color square to apply a new color to the background of the field using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Border width
    • Controls the thickness of the outer border of the field box
    • Default setting: 1
  • Border radius
    • Rounds the corners of the outer border edge on the field box
    • One number controls the radius for all four corners of the border on the element.
    • Default setting: 6
  • Border color
    • Sets a border color for the field
    • Default setting: grey
    • No border will be visible unless the border width is greater than 0.
    • Click the color square to apply a new color to the field border using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
  • Field font
    • Controls the font for the field text
    • Default setting: Arial
  • Field font size
    • Controls the font size for the field text
    • Default setting: 16
  • Inner padding
    • Controls the amount of space around the text entered in the field box. A higher padding number means more space around the text.
    • Default setting: 10
  • Font color
    • Sets a color for text entered in the field
    • Default setting: black
    • Click the color square to apply a new color to the field text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Field decorations
    • Controls the appearance of text entered in the field
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Label styles

  • Hide label
    • Check this box to hide the label text that appears above or beside the field.
  • Label font
    • Controls the font for the field label
    • Default setting: Arial
  • Label position
    • Controls the location of the field label
    • Options:
      • Top
      • Left
    • Default setting: Top
  • Label font size
    • Controls the font size for the field label
    • Default setting: 16
  • Label width
    • Controls the width of the field label
    • Default setting: 25
  • Label font color
    • Sets a color for the field label text
    • Default setting: dark grey
    • Click the color square to apply a new color to the label text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Asterisk color
    • Sets a color for the field label asterisk on required fields
    • Default setting: red
    • Click the color square to apply a new color to the required field asterisk using the color picker, HEX code, RGBA numbers or select from the palette.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Label decoration
    • Controls the appearance of the field label text
    • Options:
      • Italics
      • Bold
      • Underline
    • Default setting: Bold
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Placeholder styles

  • Placeholder font
    • Controls the font for the field placeholder text
    • Default setting: Arial
  • Placeholder font size
    • Controls the font size for the field placeholder text
    • Default setting: 16
  • Placeholder font color
    • Sets a color for the field placeholder text
    • Default setting: medium grey
    • Click the color square to apply a new color to the placeholder font text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Help text

  • Hide help text
    • Check this box to hide the help text that appears below the field.
  • Help text font
    • Controls the font for the field help text
    • Default setting: Arial
  • Help text color
    • Sets a color for the field help text
    • Default setting: medium grey
    • Click the color square to apply a new color to the help text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Help text font size
    • Controls the font size for the field help text
    • Default setting: 14
  • Help text top spacing
    • Controls the amount of space between the field and the field help text. A higher spacing number means more space between the field and the help text. Help text should appear near the field it refers to, so visitors are clear which field the help text is associated with.
    • Default setting: 8
  • Text decoration
    • Controls the appearance of the field help text
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Use a Radio field item to allow visitors to choose one option from a list of predefined choices.

Radio field settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

Shadow settings

  • Adds a shadow effect to a radio button field
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Name

  • Text field
  • Serves as an internal system name for the field
  • Not visible to visitors
  • The field name is included in the email reporting submitted form data to users. Ensure a clear name is selected so internal email recipients understand which field a form response entry corresponds to. Matching the name to the field label often works well.

Label

  • Text field
  • Serves as the field label on the published form
  • Visible to visitors
  • The field label should make the intent of the field clear to the person filling in the form.
  • Use the label styles tab at the bottom of the settings panel to control the appearance of label text.
  • Label text can be hidden under the label styles tab at the bottom of the settings panel.

Help text

  • Optional text field
  • Use help text to provide additional guidance to visitors on how the field’s question should be answered.
  • Use the help text styling tab at the bottom of the settings panel to control the appearance of help text.
  • Help text can be hidden under the help text styling tab at the bottom of the settings panel.

Required

  • Check the box to make the field a required field. Forms cannot be submitted until all required fields have been completed.
  • Use form logic to add conditional rules to make required fields become optional or make optional fields become required. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Padding

  • Controls the area of space around the item, limiting how close the field gets to the border of slot the field is in. A higher padding number means more space around the field.
  • Default setting: 16
  • Click the lock icon to adjust padding on one (or more) sides independently. By default, the padding setting is applied to all four sides.

Options

  • Short text
  • Use the options section to add options for form visitors to choose.
  • Click + Add option to add additional options.
  • Click the X next to an option to remove a specific option.
  • Click Delete options to remove all options.
  • Radio button fields allow form visitors to select one item. Make sure your options are mutually exclusive. 

Options spacing

  • Numeric
  • Controls spacing between Radio button list items. The higher the value, the more space between options. Options should be close enough together to appear related to the same question.
  • Default value: 10

Custom values (Under Options)

  • Toggle switch
  • Activating the Custom values toggle allows the form builder to specify a publicly visible option (top box) that is visible to form visitors and an alternative data label that is sent via the webhook to unit users (bottom box). This can be useful when internal data needs include jargon or technical information that is not user-friendly and would not be appropriate to show on a publicly visible form.

Radio button styles

  • Radio button background color
    • Sets the background color for the Radio button
    • Default setting: white
    • Click the color square to apply a new color to the radio button using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Border width
    • Controls the thickness of the outer border of the radio button
    • Default setting: 2
  • Border radius
  • Rounds the corners of the outer border edge on the radio button
    • One number controls the radius for all four corners of the border on the element.
    • Default setting: 17 (forms a circle)
  • Border color
    • Sets a border color for the field
    • Default setting: grey
    • No border will be visible unless the border width is greater than 0.
    • Click the color square to apply a new color to the field border using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
  • Fill size
    • Controls the size for the dot that fills the Radio button, indicating the button has been selected
    • Default setting: 14
  • Inner padding
    • Controls the amount of space around the dot that fills the Radio button, indicating the button has been selected. A larger padding number will result in a larger Radio button to accommodate the padding.
    • Default setting: 9
  • Fill color
    • Sets a color for the dot entered in the radio button, indicating the button has been selected
    • Default setting: black
    • Click the color square to apply a new color to the field text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Label styles

  • Hide main label
    • Check this box to hide the label text that appears above or beside the field.
  • Label font
    • Controls the font for the field label
    • Default setting: Arial
  • Label font size
    • Controls the font size for the field label
    • Default setting: 16
  • Label height
    • Controls the height of the field label
    • Default setting: 30
  • Label font color
    • Sets a color for the field label text
    • Default setting: dark grey
    • Click the color square to apply a new color to the label text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Asterisk color
    • Sets a color for the field label asterisk on required fields
    • Default setting: red
    • Click the color square to apply a new color to the required field asterisk using the color picker, HEX code, RGBA numbers or select from the palette.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Label decoration
    • Controls the appearance of the field label text
    • Options:
      • Italics
      • Bold
      • Underline
    • Default setting: Bold
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Help text

  • Hide help text
    • Check this box to hide the help text that appears below the field.
  • Help text font
    • Controls the font for the field help text
    • Default setting: Arial
  • Help text color
    • Sets a color for the field help text
    • Default setting: medium grey
    • Click the color square to apply a new color to the help text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Help text font size
    • Controls the font size for the field help text
    • Default setting: 14
  • Help text top spacing
    • Controls the amount of space between the field and the field help text. A higher spacing number means more space between the field and the help text. Help text should appear near the field it refers to, so visitors are clear which field the help text is associated with.
    • Default setting: 8
  • Text decoration
    • Controls the appearance of the field help text
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Use a Checkbox field item to allow visitors to check a box next to a single item or choice.

Checkbox field settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

Shadow settings

  • Adds a shadow effect to a Checkbox field.
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Name

  • Text field
  • Serves as an internal system name for the field
  • Not visible to visitors
  • The field name is included in the email reporting submitted form data to users. Ensure a clear name is selected so internal email recipients understand which field a form response entry corresponds to. Matching the name to the field label often works well.

Label

  • Text field
  • Serves as the field label on the published form
  • Visible to visitors
  • The field label should make the intent of the field clear to the person filling in the form.
  • Use the label styles tab at the bottom of the settings panel to control the appearance of label text.
  • Label text can be hidden under the label styles tab at the bottom of the settings panel.

Help text

  • Optional text field
  • Use help text to provide additional guidance to visitors on how the field’s question should be answered.
  • Use the help text styling tab at the bottom of the settings panel to control the appearance of help text.
  • Help text can be hidden under the help text styling tab at the bottom of the settings panel.

Required

  • Check the box to make the field a required field. Forms cannot be submitted until all required fields have been completed.
  • Use form logic to add conditional rules to make required fields become optional or make optional fields become required. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Padding

  • Controls the area of space around the item, limiting how close the field gets to the border of slot the field is in. A higher padding number means more space around the field.
  • Default setting: 16
  • Click the lock icon to adjust padding on one (or more) sides independently. By default, the padding setting is applied to all four sides.

Checkbox styles

  • Checkbox background color
    • Sets the background color for the checkbox
    • Default setting: white
    • Click the color square to apply a new color to the checkbox using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Border width
    • Controls the thickness of the outer border of the checkbox
    • Default setting: 2
  • Border radius
    • Rounds the corners of the outer border edge on the checkbox
    • One number controls the radius for all four corners of the border on the element.
    • Default setting: 2
  • Border color
    • Sets a border color for the field
    • Default setting: grey
    • No border will be visible unless the border width is greater than 0.
    • Click the color square to apply a new color to the field border using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
  • Tick font size
    • Controls the size for the check that fills the checkbox, indicating the box has been selected
    • Default setting: 20
  • Inner padding
    • Controls the amount of space around the check that fills the checkbox, indicating the box has been selected. A larger padding number will result in a larger checkbox to accommodate the padding.
    • Default setting: 10
  • Tick color
    • Sets a color for the check entered in the checkbox, indicating the box has been selected
    • Default setting: black
    • Click the color square to apply a new color to the field text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Label styles

  • Hide label
    • Check this box to hide the label text that appears above or beside the field.
  • Label font
    • Controls the font for the field label
    • Default setting: Arial
  • Label font size
    • Controls the font size for the field label
    • Default setting: 16
  • Label font color
    • Sets a color for the field label text
    • Default setting: dark grey
    • Click the color square to apply a new color to the label text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Asterisk color
    • Sets a color for the field label asterisk on required fields
    • Default setting: red
    • Click the color square to apply a new color to the required field asterisk using the color picker, HEX code, RGBA numbers or select from the palette.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Label decoration
    • Controls the appearance of the field label text
    • Options:
      • Italics
      • Bold
      • Underline
    • Default setting: Bold
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Help text

  • Hide help text
    • Check this box to hide the help text that appears below the field.
  • Help text font
    • Controls the font for the field help text
    • Default setting: Arial
  • Help text color
    • Sets a color for the field help text
    • Default setting: medium grey
    • Click the color square to apply a new color to the help text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Help text font size
    • Controls the font size for the field help text.
    • Default setting: 14
  • Help text top spacing
    • Controls the amount of space between the field and the field help text. A higher spacing number means more space between the field and the help text. Help text should appear near the field it refers to, so visitors are clear which field the help text is associated with.
    • Default setting: 8
  • Text decoration
    • Controls the appearance of the field help text
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Use a Checkbox group field item to allow visitors to check one or more boxes next to an item or choice within a list of predefined items.

Checkbox group field settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

Shadow settings

  • Adds a shadow effect to a Checkbox group field
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Name

  • Text field
  • Serves as an internal system name for the field
  • Not visible to visitors
  • The field name is included in the email reporting submitted form data to users. Ensure a clear name is selected so internal email recipients understand which field a form response entry corresponds to. Matching the name to the field label often works well.

Label

  • Text field
  • Serves as the field label on the published form
  • Visible to visitors
  • The field label should make the intent of the field clear to the person filling in the form.
  • Use the label styles tab at the bottom of the settings panel to control the appearance of label text.
  • Label text can be hidden under the label styles tab at the bottom of the settings panel.

Help text

  • Optional text field
  • Use help text to provide additional guidance to visitors on how the field’s question should be answered.
  • Use the help text styling tab at the bottom of the settings panel to control the appearance of help text.
  • Help text can be hidden under the help text styling tab at the bottom of the settings panel.

Required

  • Check the box to make the field a required field. Forms cannot be submitted until all required fields have been completed.
  • Use form logic to add conditional rules to make required fields become optional or make optional fields become required. See “Add Form Logic” under “Advanced Form Creation Features” on the Build and Manage Forms page.

Padding

  • Controls the area of space around the item, limiting how close the field gets to the border of slot the field is in. A higher padding number means more space around the field.
  • Default setting: 16
  • Click the lock icon to adjust padding on one (or more) sides independently. By default, the padding setting is applied to all four sides.

Options

  • Short text
  • Use the options section to add options for form visitors to choose.
  • Click + Add option to add additional options.
  • Click the X next to an option to remove a specific option.
  • Click Delete options to remove all options.
  • Checkbox group fields allow form visitors to select more than one item. 

Options spacing

  • Numeric
  • Controls spacing between Checkbox group list items. The higher the value, the more space between options. Options should be close enough together to appear related to the same question.
  • Default value: 10

Number of options

  • Numeric value
  • Specify the minimum number of options a user must select to submit the form.
  • Default setting: 0

Custom values (Under Options)

  • Toggle switch
  • Activating the Custom values toggle allows the form builder to specify a publicly visible option (top box) that is visible to form visitors and an alternative data label that is sent via the webhook to unit users (bottom box). This can be useful when internal data needs include jargon or technical information that is not user-friendly and would not be appropriate to show on a publicly visible form.

Checkbox styles

  • Checkbox background color
    • Sets the background color for the checkbox
    • Default setting: white
    • Click the color square to apply a new color to the checkbox using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Border width
    • Controls the thickness of the outer border of the checkbox
    • Default setting: 2
  • Border radius
    • Rounds the corners of the outer border edge on the checkbox
    • One number controls the radius for all four corners of the border on the element.
    • Default setting: 2
  • Border color
    • Sets a border color for the field
    • Default setting: grey
    • No border will be visible unless the border width is greater than 0.
    • Click the color square to apply a new color to the field border using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
  • Tick font size
    • Controls the size for the check that fills the checkbox, indicating the box has been selected
    • Default setting: 20
  • Inner padding
    • Controls the amount of space around the check that fills the checkbox, indicating the box has been selected. A larger padding number will result in a larger checkbox to accommodate the padding.
    • Default setting: 10
  • Tick color
    • Sets a color for the check entered in the checkbox, indicating the box has been selected
    • Default setting: black
    • Click the color square to apply a new color to the field text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Label styles

  • Hide main label
    • Check this box to hide the label text that appears above or beside the field.
  • Label font
    • Controls the font for the field label
    • Default setting: Arial
  • Label font size
    • Controls the font size for the field label
    • Default setting: 16
  • Label font color
    • Sets a color for the field label text
    • Default setting: dark grey
    • Click the color square to apply a new color to the label text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Asterisk color
    • Sets a color for the field label asterisk on required fields
    • Default setting: red
    • Click the color square to apply a new color to the required field asterisk using the color picker, HEX code, RGBA numbers or select from the palette.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Label decoration
    • Controls the appearance of the field label text.
    • Options:
      • Italics
      • Bold
      • Underline
    • Default setting: Bold
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Help text

  • Hide help text
    • Check this box to hide the help text that appears below the field.
  • Help text font
    • Controls the font for the field help text
    • Default setting: Arial
  • Help text color
    • Sets a color for the field help text
    • Default setting: medium grey
    • Click the color square to apply a new color to the help text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Help text font size
    • Controls the font size for the field help text
    • Default setting: 14
  • Help text top spacing
    • Controls the amount of space between the field and the field help text. A higher spacing number means more space between the field and the help text. Help text should appear near the field it refers to, so visitors are clear which field the help text is associated with.
    • Default setting: 8
  • Text decoration
    • Controls the appearance of the field help text
    • Options:
      • Italics
      • Bold
      • Underline
  • Apply to all
  • Check this button to apply changed styling to all form elements.

Use a T&C checkbox field item to allow visitors to confirm they agree to stated terms and conditions. This type of field is required, by default, if it is placed in a form.

T&C checkbox field settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

Shadow settings

  • Adds a shadow effect to a T&C checkbox field.
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Legal text

  • Add the terms and conditions text that the form submitter agrees to by checking the box. 

Name

  • Text field
  • Serves as an internal system name for the field
  • Not visible to visitors
  • The field name is included in the email reporting submitted form data to users. Ensure a clear name is selected so internal email recipients understand which field a form response entry corresponds to. Matching the name to the field label often works well.

Label

  • Text field
  • Serves as the T&C checkbox field label on the published form
  • Visible to visitors
  • The field label should make the intent of the field clear to the person filling in the form.
  • Use the label styles tab at the bottom of the settings panel to control the appearance of label text.
  • Label text can be hidden under the label styles tab at the bottom of the settings panel.
  • Default setting: I accept

Padding

  • Controls the area of space around the item, limiting how close the field gets to the border of slot the field is in. A higher padding number means more space around the field.
  • Default setting: 16
  • Click the lock icon to adjust padding on one (or more) sides independently. By default, the padding setting is applied to all four sides.

Checkbox styles

  • Checkbox background color
    • Sets the background color for the checkbox
    • Default setting: white
    • Click the color square to apply a new color to the checkbox using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Border width
    • Controls the thickness of the outer border of the checkbox
    • Default setting: 1
  • Border radius
  • Rounds the corners of the outer border edge on the checkbox
    • One number controls the radius for all four corners of the border on the element.
    • Default setting: 6
  • Border color
    • Sets a border color for the field
    • Default setting: grey
    • No border will be visible unless the border width is greater than 0.
    • Click the color square to apply a new color to the field border using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
  • Tick font size
    • Controls the size for the check that fills the checkbox, indicating the box has been selected
    • Default setting: 16
  • Inner padding
    • Controls the amount of space around the check that fills the checkbox, indicating the box has been selected. A larger padding number will result in a larger checkbox to accommodate the padding.
    • Default setting: 10
  • Tick color
    • Sets a color for the check entered in the checkbox, indicating the box has been selected
    • Default setting: black
    • Click the color square to apply a new color to the field text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Label styles

  • Label font
    • Controls the font for the field label
    • Default setting: Arial
  • Label font size
    • Controls the font size for the field label
    • Default setting: 16
  • Label height
    • Controls the height of the field label
    • Default setting: 24
  • Label font color
    • Sets a color for the field label text
    • Default setting: dark grey
    • Click the color square to apply a new color to the label text using the color picker, HEX code, RGBA numbers or select from the palette.
    • Selected colors should adhere to MSU brand standards.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Asterisk color
    • Sets a color for the field label asterisk on required fields
    • Default setting: red
    • Click the color square to apply a new color to the required field asterisk using the color picker, HEX code, RGBA numbers or select from the palette.
    • Text and background color contrast must adhere to MSU Web Accessibility standards.
  • Label decoration
    • Controls the appearance of the field label text
    • Options:
      • Italics
      • Bold
      • Underline
    • Default setting: Bold
  • Apply to all
    • Check this button to apply changed styling to all form elements.

Use a reCAPTCHA field item to filter out bot responses by ensuring form respondents are human. Classic captcha requires human intervention to check a box on the form. Invisible captcha does not require a human to check a box on the form. Both are available using this field item.

reCAPTCHA field settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

Shadow settings

  • Adds a shadow effect to a reCAPTCHA field
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Theme

  • Controls the appearance of the reCAPTCHA field
  • Options:
    • Light
    • Dark
  • Default setting: Light

Padding

  • Controls the area of space around the item, limiting how close the field gets to the border of slot the field is in. A higher padding number means more space around the field.
  • Default setting: 10
  • Click the lock icon to adjust padding on one (or more) sides independently. By default, the padding setting is applied to all four sides.

Alignment

  • Controls how the reCAPTCHA is aligned within the field
  • Select an icon for alignment.
  • Options include:
    • Left
    • Center
    • Right
  • Default setting: Center

Invisible reCAPTCHA

  • Checkbox
  • Checking this box adds a no-checkbox, invisible challenge to the form instead of the classic checkbox captcha.

The File upload field type is not currently available. Units requiring file uploads via form submission should explore alternative form solutions until this feature is enabled.

Basic Items

Basic items are used to add design elements and contextual information to the form. Expand each tab to read about the available items types and their settings and options.

Use an Image field item to add an image to the form.

Image basic item settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

Shadow settings

  • Adds a shadow effect to an image field.
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Border width

  • Controls the thickness of the outer border around the image
  • Default setting: 0

Border color

  • Sets a color for the border around the image
  • Default setting: grey
  • No border will be visible unless the border width is greater than 0.
  • Click the color square to apply a new color to the background of the form using the color picker, HEX code, RGBA numbers or select from the palette.
  • Selected colors should adhere to MSU brand standards.

Alignment

  • Controls how the image is aligned within the form
  • Select an icon for alignment.
  • Options include:
    • Left
    • Center
    • Right
  • Default setting: Left

Padding

  • Controls the area of space around the image, limiting how close the image gets to the border of the form. A higher padding number means more space around the image.
  • Default setting: 0
  • Click the lock icon to adjust padding on one (or more) sides independently. By default, the padding setting is applied to all four sides.

Image width

  • Optional field
  • Controls the width of the image
  • Default setting: no width limit applied

Image height

  • Optional field
  • Controls the height of the image
  • Default setting: no height limit applied

URL link

  • Optional field
  • Enables user to add a link to the image. When the image is clicked on by a visitor, the browser navigates to the URL.
  • Enter a full URL including https://.

Alt text

  • Enter alternative text to describe the image for visitors with visual impairments.
  • If the image includes text, be sure to include all text within the alt text.
  • Alt text for images is an important element in adherence to MSU Web Accessibility standards.

Add image

  • Click the Add image button to upload an image file.
  • Images can be selected from Media Library, Local Files (i.e., file saved to computer), a Direct Link (i.e., web link, such as that available from the Content Hub DAM) or other web-based photo and file storage services.

Use the Text basic item to add text to the form outside of a question. Text items can be used for directions, introductory message or other messaging to the visitor.

Text basic item settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

Shadow settings

  • Adds a shadow effect to a text field
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Border width

  • Controls the thickness of the outer border around the text field.
  • Default setting: 0

Border color

  • Sets a color for the border around the text field
  • Default setting: black
  • No border will be visible unless the border width is greater than 0.
  • Click the color square to apply a new color to the background of the form using the color picker, HEX code, RGBA numbers or select from the palette.
  • Selected colors should adhere to MSU brand standards.

Border radius

  • Rounds the corners of the outer border edge
  • One number controls the radius for all four corners of the border on the element.
  • Default setting: 0

Padding

  • Controls the area of space around the item, limiting how close the text gets to the border of the text field. A higher padding number means more space around the text.
  • Default setting: 10
  • Click the lock icon to adjust padding on one (or more) sides independently. By default, the padding setting is applied to all four sides.

Use the Spacer basic item to add extra space to the form outside of a question.

Spacer basic item settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

Shadow settings

  • Adds a shadow effect to a spacer
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Height

  • Numeric
  • Sets the height of the spacer. A greater height adds more space between the item above and below the spacer.
  • Default setting: 34

Border width

  • Controls the thickness of the outer border around the text field
  • Default setting: 0

Border color

  • Sets a color for the border around the text field
  • Default setting: black
  • No border will be visible unless the border width is greater than 0.
  • Click the color square to apply a new color to the background of the form using the color picker, HEX code, RGBA numbers or select from the palette.
  • Selected colors should adhere to MSU brand standards.

Border radius

  • Rounds the corners of the outer border edge
  • One number controls the radius for all four corners of the border on the element.
  • Default setting: 0

Use the Social media basic item to add a unit’s social media links to the form to promote the channels to visitors.

Social media basic item settings panel options:

Search for a setting

  • Use this field to locate setting fields within the panel.

Background color

Shadow settings

  • Adds a shadow effect to a social media links field.
  • Click the Set box shadow button to open the box shadow settings interface.
  • Options:
    • Horizontal length
    • Vertical length
    • Blur radius
    • Spread radius
    • Color

Spacing

  • Controls the amount of space between the social media icons. A higher spacing number means more space between each icon.
  • Default setting: 2

Alignment

  • Controls how the social media icons are aligned within the form
  • Select an icon for alignment.
  • Options include:
    • Left
    • Center
    • Right
  • Default setting: Center

Icon style

  • Controls the style of the social media icons
  • Selected colors should adhere to MSU brand standards.
  • Available options:
    • Default – Round outline style icons in platform colors with a circle border
    • Blue – Round outline style icons in blue with a circle border
    • Grey circle – Round outline style icons in light grey with a circle border
    • Grey round thin – Outline style icons on medium grey circle background. The icon color either appears white or matching the item background color, depending on the icon.
    • Mint round thin – Outline style icons on medium green circle background. The icon color either appears white or matching the item background color, depending on the icon.
    • Peach circle – Round outline style icons in peach with a circle border
    • White circle – Round outline style icons in white with a circle border
    • White half circle – Outline style icons appear in white surrounded by a white circle border, shown at half transparency. The color of the icon and circle ultimately depend on the item background color. For example, icon and circle appear light grey when on a black background.
    • White half roundsquare – Platform icons appear cut out of white squares with rounded corners, shown at half transparency. The color of the rounded square ultimately depends on the item background color. For example, the rounded squares appear light grey when on a black background. The color of the icon matches the item background color.
    • White solid – Platform icons displayed in white
    • White half solid – Platform icons appear in white, shown at half transparency. The color of the icon ultimately depends on the item background color. For example, the icons appear light grey when on a black background.
    • White roundsquare – Platform icons appear cut out of white squares with rounded corners. The color of the icon matches the item background color.
    • White solid – Platform icons displayed in white
    • White square – Outline style icons on a white square. The color of the icon is either black or matches the item background color, depending on the icon.
    • Anthracite square – Outline style icons on a dark grey square. The color of the icon is either white or matches the item background color, depending on the icon.
    • Black half round – Platform icons appear cut out of black circles, shown at half transparency. The color of the icon matches the item background color. The color of the circle ultimately depends on the item background. For example, the circles appear grey when on a white background.
    • Black half roundsquare – Platform icons appear cut out of black squares with rounded corners, shown at half transparency. The color of the icon matches the item background color. The color of the rounded square ultimately depends on the item background. For example, the rounded squares appear grey when on a white background.
    • Black half solid – Platform icons appear in black, shown at half transparency. The color of the icon ultimately depends on the item background color. For example, the icons appear grey when on a white background.
    • Black round – Platform icons appear cut out of black circles. The color of the icon matches the item background color.
    • Black roundsquare – Platform icons appear cut out of black squares with rounded corners. The color of the icon matches the item background color.
    • Black solid – Platform icons displayed in black
    • Black square – Outline style icons on a black square. The color of the icon is either white or matches the item background color, depending on the icon.

Channel icons

  • Click the social media icon to activate the channel in the form icon set.
  • Colored icons are activated and include a link field. Grey icons are not activated.
  • Available channels:
    • Facebook
    • X
    • Instagram
    • Pinterest
    • YouTube
    • LinkedIn
    • Tumblr
    • SoundCloud
    • TikTok
    • Snapchat
    • Website (generic)

Channel URL

  • Enter a full URL for each activated social media channel.
  • Enter the full URL (including https://).

Saved Items

Users can save items and their configuration settings for reuse in multiple forms. Saved items will appear in this section of the Items panel. 

See “Save a Form Item for Reuse” in the “Advanced Form Creation Features” section of the “Build and Manage Forms” page for more information on creating saved items.

 

Documentation updated: Mar. 31, 2026

Is there an issue with this documentation? Report it here.