Design Studio: Forms

• Fields stack in mobile view.
• Forms can be embedded in a full-width page layout, the left column of a two-column page template or a two-thirds sublayout component. Forms cannot be embedded in the right column of a two-column page layout or two-thirds sublayout component.
• Forms are eligible to be embedded in a web page if they’ve been made viewable to users for a website. Forms can be made viewable to users of multiple websites and can be included in multiple websites.
• Webhooks enable forms to generate one email containing form data that is then sent to one email address. Different forms can use different email addresses, but all submissions from the same form will go to the same address. 

Back to top

Users can utilize other form platforms, such as Microsoft Forms or Qualtrics, on a SitecoreAI website, but these forms cannot be embedded. In these cases, users can link to the form from text, a CTA button or a mixed content component. 

Support for Google Apps, Microsoft Forms and Qualtrics are provided by MSU IT Services. See the Technology at MSU website for more information.

Back to top

Design settings are found by clicking the Design icon on the toolbar at the top of the form editor and then the Options tab in the left-side panel. These options control overall form design.

General design settings are sorted into categories, with settings for each category displayed in a collapsible panel. See below for information regarding the data fields associated with:

• Main form settings
• Link settings
• Slot settings
• Text settings
• Validation message settings
• Spacer settings
• Image settings
• Button settings
• Social media settings

Search

• Use this box to search across the Options panel for a specific setting field.

Content width

• Sets the width of the form content
• Default setting: 1000

Border width

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

Border color

• Sets the color of the form border
• Default setting: #000000 (black)
• No border will be visible unless the border width is greater than 0.
• Selected colors should adhere to MSU brand standards.

Background color

• Sets the color of the form background
• Default setting: transparent
• Selected colors should adhere to MSU brand standards.
• Text and background color contrast must adhere to MSU Web Accessibility standards.

Add background image

• Sets an image as the form background
• Default setting: no image
• Selected images should adhere to MSU brand standards and be licensed or permissioned for the unit’s web use.
• Text and background color contrast (including colors within images) must adhere to MSU Web Accessibility standards.

Google Fonts tab

• Select an available Google web font, if desired.

Use retina-quality images

• Checkbox field
• Default setting: Do not use retina-quality images
• Using retina-quality images can slow page load times and decrease the quality of a visitor’s experience on the website, particularly at slow internet speeds. Using retina-quality images is not recommended.

Back to general design settings
Back to top

Link color

• Sets a color for form text links
• Default setting: #337ab7 (blue)
• 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.
• Text and background color contrast must adhere to MSU Web Accessibility standards.

Link font family

• Controls the font family for form text links
• Default setting: Arial

Link font size

• Controls the font size for form text links
• Default setting: 16

Apply to inserted links

• Check this button to apply the changed settings to previously inserted links.

Back to general design settings
Back to top

The slot refers to the layout slot or placeholder space in a form’s structure that acts as a container to help organize items within the layout of the form.

Background color

• Sets the background color for a slot
• Default setting: 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.
• Text and background color contrast must adhere to MSU Web Accessibility standards.

Content background color

• Sets the background color for a content area within a slot
• Default setting: 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.
• Text and background color contrast must adhere to MSU Web Accessibility standards.

Vertical align

• Sets the default vertical alignment of content within a slot
• Options:
  • Top
  • Middle
  • Bottom
• Default setting: top

Minimum height

• Sets a minimum height for a slot
• Default setting: none

Padding

• Controls the area of space around the slot, limiting how close other items can be to the slot
• Default setting: 0

Border width

• Controls the thickness of the outer border of the slot
• Default setting: 0 (no border)

Border radius

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

Border color

• Sets a border color for slots
• 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.

Back to general design settings
Back to top

Default font color

• Sets a color for form text items
• Default setting: black
• 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.
• Text and background color contrast must adhere to MSU Web Accessibility standards.

Default font size

• Controls the font size for form text items
• Default setting: 16

Default line height

• Controls the default line height for form text items
• Default setting: 1.3

Default font family

• Controls the font family for form text items
• Default setting: Arial

Background color

• Controls the background color for the text item
• Default setting: 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.
• Text and background color contrast must adhere to MSU Web Accessibility standards.

Shadow settings

• Adds a drop shadow around the text item
• 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 of the text item
• Default setting: 0 (no border)

Border color

• Sets a border color for text items
• 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 text within a text item, limiting how close text can be to the edge of the item
• Default setting: 10

Back to general design settings
Back to top

Required field

• Controls the validation message that appears if a required field is not completed
• Single-line text
• Default setting: This field is required.

Email field

• Controls the validation message that appears if an email field is not completed using an email format
• Single-line text
• Default setting: Email address must follow the format user@example.com.

Phone field

• Controls the validation message that appears if a phone field is not completed using a phone number format
• Single-line text
• Default setting: Phone number must follow the format +(country_code)(phone_number).

ReCAPTCHA

• Controls the validation message that appears requiring reCAPTCHA
• Single-line text
• Default setting: Validate using the reCAPTCHA.

Invisible ReCAPTCHA

• Controls the validation message that appears if reCAPTCHA is incorrectly completed
• Single-line text
• Default setting: reCAPTCHA validation failed.

File type

• Controls the validation message that appears if an unsupported file type is entered in a file field
• Single-line text
• Default setting: File type not supported.

File size

• Controls the validation message that appears if an uploaded file exceeds the maximum file size
• Single-line text
• Default setting: Max file size exceeded.

File number

• Controls the validation message that appears if uploaded files exceed the maximum file count
• Single-line text
• Default setting: Max number of files exceeded.

File error

• Controls the validation message that appears if a file upload fails for a reason other than file type, file size or file number
• Single-line text
• Default setting: File did not upload.

Back to general design settings
Back to top

Background color

• Default setting: 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 drop shadow effect to the 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

• Controls the height of the spacer
• Default setting: 40

Border width

• Controls the thickness of the outer border of the spacer
• Default setting: 0 (no border)

Border color

• Sets a border color for form spacers
• 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 spacer outer border edge
• One number controls the radius for all four corners of the border on the element.
• Default setting: 0

Back to general design settings
Back to top

Background color

• Sets a background color for the area behind a button
• Default setting: 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 drop shadow effect to an image border
• 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 of the button
• Default setting: 0 (no border)

Border color

• Sets a border color for form images
• 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.

Alignment

• Controls how an 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 other elements can be to the edge of the image
• Default setting: 0

Image border radius

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

URL link

• Sets a URL navigated to when the image is clicked on by a visitor
• Link field
• Must include a full URL, including https://
• Default setting: none

Alt text

• Sets an alternative text string to describe images to visually impaired visitors
• Alt text should be in place for any image used to convey information to users, in accordance with MSU Web Accessibility standards.

Back to general design settings
Back to top

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 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.
• 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(s)
• Default setting: submit

Font family

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

Font size

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

Alignment

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

Button width

• Controls how the button size adjusts based on the text label
• Options:
  • 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.

Label padding

• Controls the area of space around the text within a button, limiting how close text can be to the edge of the button
• Default setting: 16

Margin

• Controls the area of space around the button, limiting how close other elements can be to the edge of the button
• Default setting: 16

Border width

• Controls the thickness of the outer border of the button
• Default setting: 0 (no border)

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: 10

Back to general design settings
Back to top

Background color

• Sets a background color for a social media element
• Default setting: 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.
• Text and background color contrast must adhere to MSU Web Accessibility standards.

Shadow settings

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

Spacing

• Adds spacing between social media icons
• Enter pixels for spacing between elements
• Default setting: 2

Alignment

• Controls social media icon alignment
• Select an icon for alignment
• Options include:
  • Left
  • Center
  • Right
• Default setting: center

Icon style

• Controls the social media icon style
• Drop-list selection
• Controls the style of the social media icons
• 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 matches 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 matches 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 display 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 display 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 display 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.

Social settings

• Creates a link for individual social media icons
• URL fields
• Click a social icon to activate. Colored icons are activated and include a link field. Grey icons are not activated.
• Enter the full URL (including https://) for the social media channel.
• Available channels:
  • Facebook
  • X
  • Instagram
  • Pinterest
  • YouTube
  • LinkedIn
  • Tumblr
  • SoundCloud
  • TikTok
  • Snapchat
  • Website (generic)

Back to general design settings
Back to top

Logic Settings are found by clicking the Logic icon on the toolbar at the top of the form editor. These options control form behavior as visitors fill out the form.

Form field (Conditions)

• Each field within a form can be used as a condition.
• The type of field controls the logic condition rules available. For example, a date field could have conditions based on the entered date (e.g., is, is after, is before) while an email field could have conditions based on the entered text (e.g., contains, does not contain, is empty). 

And/Or (Conditions)

• When multiple conditions are added, an and/or drop-down appears.
• Selecting “and” requires all conditions within the condition group be met.
• Selecting “or” requires that one of the conditions in the condition group be met.

Actions

One or more actions can be added to be executed when conditions are met. 

• Hide field
  • The field will not be displayed if the outlined conditions are met.
  • Example use case: If a user selects email as a preferred contact method, hide the phone number field.
• Show field
  • The field will be displayed if the outlined conditions are met.
  • Example use case: If a user selects email as a preferred contact method, show an email address field.
• Make a field required
  • The field will be required if the outlined conditions are met.
  • The form cannot be submitted if the required field is not completed.
  • Example use case: If a user selects email as a preferred contact method, the email address field becomes required.
• Make a required field optional
  • A field with a default setting of required will not be required if outlined conditions are met.
  • Example use case: By default, a form requires a phone number and an email address. If a user selects email as a preferred contact method, the phone number field becomes optional.

Back to top

Form Settings are found by clicking the Settings icon on the toolbar at the top of the form editor. These options control form behavior.

Form ID

• The Form ID is automatically generated by Sitecore.
• Do not edit the Form ID field.

Name

• The Name field is the name of the form.
• The Name is visible in the system for Sitecore users but is not visible to website visitors.
• Form names should be clear and connect to the unit or website the form is designed to serve. This helps ensure that users find and select the correct form when placing a form on a website.

Style

• Most users will not use this setting.
• Advanced users may opt to design a specific style set for forms.

Choose webhook

• Webhooks are tools that automate the sharing of data from one system to another. In this case, sharing data from a Sitecore form to an email service.
• Drop-list setting
• Generic Form Webhook is the option to be used on campus, unless otherwise specified by a developer.

Form available on

• By default, forms are available on all sites.
• Users should change this setting to limit the form to the website(s) it is relevant to. This helps ensure the data collected is accurate and relevant for the intended use case.
• Click the Edit button to open the site selection panel.

Choose submit action

• This setting controls what the site visitor experiences after submitting a form.
• Drop-list selection
• Options:
  • Success message — Default. A customizable message indicating the form was successfully submitted will appear.
  • Redirect to a URL — The user is taken to a new web page, such as a “Thank you for your submission” page with next steps or additional information to continue the user journey. This can be used with Google Analytics tracking to measure form conversions, if units set up the page as a conversion in their analytics.
  • None — Nothing happens for the visitor after they submit the form. This is not recommended. Users need some sort of confirmation to feel assured that their submission was received. 

Success message

• Rich text editor field
• Text entered in this field will appear on the page when a form has been successfully submitted, if the “Success message” Submit action is selected.

Redirect URL

• Link field
• Users should include the full URL (starting with https://).
• Users will be redirected to this page when a form has been successfully submitted if the “Redirect to a URL” Submit action is selected.

Dynamic URL parameters

• Multi-select list field
• Users check the field data that should be included as parameters added to the redirect URL, if the “Redirect to a URL” Submit action is selected.
• URL parameters can be used within the site’s analytics to measure performance.

Fail message

• Rich text editor field
• Text entered in this field will appear on the page when a form has not been successfully submitted.

Back to top

Each form field contains its own set of data template settings and options. See the “Form Field Guide” for more information about settings and data template options for form fields.

Back to top