Build and Manage Forms 

Add form items

Forms can be built from scratch using a set layout or can be created based on a saved form template. The instructions below cover building from scratch. See “Build a Form Using a Template” in the Advanced Form Features section, below, for template instructions. 

1. Choose a starting form layout from the available options. 

Forms are built similarly to how a page is built in Page builder. Form fields are called “Items” and behave similarly to page components. Click in a placeholder (“+” icon) within the form layout to add an item or drag and drop an item from the Items tab in the left-side panel into the form design on the right. 

2. Click the Items tab on the left-side panel.

3. Click and drag a field onto the form layout and release it in the desired location.
4. Click on the form field item to open the field setting panel on the right. 

5. Adjust any settings, as needed. See the Form Field Guide for more information on available settings for specific items. 

6. Click the Options tab on the left-side panel to control form settings for the entire form, such as border and button colors. See the Data tab on the Design Studio: Forms page for more information about the Options tab fields.

Preview form design

Use the Preview feature within SitecoreAI forms to view the form as it would appear on a desktop, tablet or mobile device.

1. Click the Preview icon on the toolbar above the form.
2. Click the appropriate device icon to preview the form. 

(Optional) View form versions

View different versions of the form using the Versions preview.

1. Click the Versions icon on the toolbar above the form.
2. Click the desired version of the form from the list on the left.

To complete and activate the form, units must request a webhook generated by University Communications and Marketing. 

To request a webhook: Send an email to Comms.WebSupport@msu.edu. Be sure to note that a webhook is needed for a new form and include the website(s) the form will be included on and the email address to which the webhook should send the form submission data. 

Users will receive a string of characters to be used as the webhook in Step 5. It is recommended that users keep a record of this character string to refer to in case there’s an issue with the form submission emails and the webhook needs to be confirmed to ensure there are no typos, etc.

1. Click the Settings icon on the toolbar above the form to open the Settings tab.
2. Leave the Form ID field as is. Do not change this.
3. Edit the form name, if needed, by clicking the pencil icon to the right of the name. Click Save to save the changes.
4. Select Generic Form Webhook from the “Choose webhook” drop-down menu.
5. Restrict access to the form:
   1. Click Edit under “Forms available on.”
   2. Check the box to the left of any website for which the form should be available to be placed.
   3. Click Save.
6. Choose a submit action to control the user’s experience after submitting the form and fill in the related fields.
   1. Success message is the default action — A customizable message indicating the form was successfully submitted will appear.
   2. 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.
   3. 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. 

Forms must have a hidden short text field added containing the webhook code for the system to correctly route form data to an email address when a visitor submits the form. 

1. Confirm there is a mechanism for visitors to submit the form. This is typically a button with a label of “Submit” or something similar.
2. Add a Short text item to the form below the submit button item.

3. Click on the Short text item to access the item settings panel on the right.
4. Enter the following settings in the settings panel fields:
   1. Name: TO
   2. Label: TO
   3. Prefill value: Copy and paste the webhook character string provided by University Communications and Marketing (see Step 3, above) into this field.
   4. Hidden: Check the box to hide this field.

The form is now ready for use but it must be activated before it can accept data.

To activate a form from the form edit view:

1. Click the drop-down arrow to the right of the Save and exit button.
2. Click Save and activate.
3. Click Activate.

Alternatively, to activate a form from the Forms listing page:

1. On the Form table view, locate the row for the form in question.
2. Click the three-dots Actions icon at the right end of the form row.

3. Click Activate on the pop-up menu.

4. Click Activate.

1. Open Page Builder.
   1. If in Design Studio: Click Page Builder button in the toolbar at the top of the page.
   2. If not in Design Studio: Open SitecoreAI, choose the environment for the appropriate website and click Page Builder on the side-panel menu.
2. Click the site selector drop-down from the top left corner of the main Page Builder toolbar.
3. Select the necessary website where the form will be embedded.
4. In the Sitemap panel Content Tree, navigate to the page where the form will be embedded.
5. Click the Components tab in the left-side panel to open the page components list.
6. Scroll to the Forms section. Click Forms to expand this section, if needed.
7. Locate the desired form in the list of available forms. Each form appears as a form component in the Forms section of the Components list. 

8. Click and drag the desired form onto the page. Drop it where the form should be placed.
9. Continue to build the page as normal using Page Builder.

After a form has been built, saved, activated and placed on a web page, the web page must be published. 

Follow the standard publishing procedures. See “Publishing Content with Workflows” for more information.

Users can save an existing form layout as a template and can load a saved template to create a new form.

To save a form as a template:

1. Build out the form layout with the items and styling desired to be included in a template.
2. Click the drop-down arrow to the right of the Save button to expand the Save options menu.
3. Click Save as template.
4. Name the template. Template names should be clear and include a unit name so other users can tell the intended use of the template.
5. Choose an option for where to save the template. Saving the template to the current environment will make the template available for users in the same environment. Saving the template to the organization will make the template for users in any MSU environment.
6. Click Save.

To load a template when creating a form:

1. Create a blank form (see Step 1 under “Building Basic Forms,” above.)
2. Click Load template.
3. Search for and locate the desired saved template. The Preview button opens the template in a pop-up window for closer inspection.
4. Click Use.
5. Click Use Template.
6. Make any necessary changes and proceed as normal to build, save and activate the form.

To remove a template and all form content:

1. Click Clear design.
2. Click Clear.

Sitecore users can create robust forms that utilize logic rules to route site visitors to different questions as they fill out a form. For example, a question could be skipped (i.e., hidden) if a visitor responds to a previous question in a particular manner.

1. Click the Logic icon on the toolbar above the form.
2. Click the Add logic button at the top right corner.
3. Select the condition required for the logic rule to run from the drop-down list of available options. Conditions for a field vary depending on the type of field.

4. Click Add action to set what happens when the condition(s) are met. Actions can include:
   1. Hide field
   2. Show field
   3. Make a field required
   4. Make a required field optional

Form styles are style sheets that apply to one or more forms. This is an efficient way to ensure all forms across a website share the same design properties for a cohesive look. Form styling should align to MSU’s brand standards, color palette and Web Accessibility Standards.

To create a Form style using Styles builder:

1. Open Design Studio.
2. Click Styles to open the form styles tab.
3. Click + Create Style.
4. Name the form style. Include a unit name to clarify for users the intended purpose of this style.
5. Click Add.
6. Use the Styles builder panel on the left to navigate to different elements and add styling. Use the Preview panel on the right to view the impact of style changes made in the Styles builder panel.
   1. Style settings covered by style sheets include Field, Checkbox, Radio, Label, Placeholder, Help text, ReCAPTCHA, Button, Back button, Spacer, Text, Image and Social media.
   2. In general, for style settings related to border width, radius, padding or font size, enter a number. For style settings related to color, click the color square to open a color picker and enter a HEX code, RGBA code or select a color with the color picker or palette.
   3. See the Data tab on the Design Studio: Forms page for more information about the specific options that can be controlled with style sheets.
7. When all desired style settings have been established, click Save.

To create a Form style using CSS editor:

1. Open Design Studio.
2. Click Styles to open the Form styles tab.
3. Click + Create Style.
4. Name the Form style. Include a unit name to clarify for users the intended purpose of this style.
5. Click Add.
6. Click the CSS editor button at the top right of the Styles builder panel on the left.

7. Click Edit as CSS.
8. Edit the CSS code in the CSS editor panel on the left. Use the Preview panel on the right to view the impact of style changes made in the CSS editor panel.
9. When all desired style settings have been established, click Save.

1. On the Form table view, locate the row for the form in question.
2. Click the three-dots Actions icon at the right end of the form row.

3. Click Settings on the pop-up menu.

4. Scroll to the bottom and locate the “Form available on” setting. Click Edit.

5. Check the box next to the website(s) where this form is eligible to appear. 

6. Click Save.

1. Log in to SitecoreAI.
2. On the launchpad, click to select the appropriate environment where the form is housed. (See Fig. 2)
3. Click Design Studio on the right-side panel. (See Fig. 3) It opens in a new browser tab.
4. Click Forms on the left-side toolbar navigation. (See Fig. 4)
5. Locate the form in the Forms table. Use Search, Filter by status or Filter by label, if needed.
6. The Forms table provides the following form analytics:
   1. Views — The number of site visitors who have viewed the form.
   2. Interactions — The number of site visitors who have interacted with the form, such as entering data into a field.
   3. Submissions — The number of site visitors who have submitted the form.
   4. Status — An Active tag indicates the form is live. Inactive means the form has not yet been activated and cannot accept submissions.
   5. Labels — Sitecore users can add tags to forms to facilitate ease of identification.
   6. Not archived / Archived — Toggle this switch to alternate between views of forms that are not archived or have been archived. “Not archived” does not automatically mean “Live.”

When a form is no longer needed and should not be used, it can be archived. This helps reduce the number of forms visible in the interface.

1. On the Form table view, locate the row for the form in question.
2. Click the three-dots Actions icon at the right end of the form row.

3. Click Archive on the pop-up menu.

Forms are environment-specific but MSU’s Sitecore users may have websites in different environments and wish to use the same form layout. This can be done by building a form in one environment and then copying it to another environment. The user should have access to both environments before attempting this. 

1. On the Form table view for the first environment, locate the row for the form in question.
2. Click the three-dots Actions icon at the right end of the form row.

3. Click Copy to environment on the pop-up menu.

4. Select the appropriate environment from the list of available options.
5. Click Copy.

When a form is no longer needed and data is no longer needed, it can be deleted. This helps reduce the number of forms visible in the interface. 

1. On the Form table view, locate the row for the form in question.
2. Click the three-dots Actions icon at the right end of the form row.

3. Click Delete on the pop-up menu.

4. Click Delete.