Creating Forms

Overview

This page describes how to create forms that can be embedded in Sugar Market pages or external pages. 

Accessing Form Builder

To access the Form Builder:

1. In the navigation bar, click the Pages and Forms module.
2. Click the Forms submodule.
   
3. From the Forms list view, click the Create button in the toolbar.

You can also quickly create a new form via the navigation bar from the three-dots menu in the Pages and Forms module.

By default, Form Builder navigation is assigned to the Admin Navigation and Marketing Navigation roles. If you do not see the Forms submodule, then ask your Sugar Market administrator to assign the navigation to your role, or contact support.

Working in the Form Builder

The Form Builder steps you through the process of creating a form, which is comprised of the following steps:

• Selecting a form type
• Setting form basics
• Building the Form
• Styling the Form
• Defining form actions
• Publishing the form

• Click the Save Form button at the top of the page to save your work in progress.
  
• Click the Next button after you complete a step to advance to the next step in the builder.

Builder Toolbar

The following options are available in the builder toolbar, though some options may not be available on every step. 

Icon	Function	Description
	Desktop View	Displays form as seen on a desktop computer in both design and preview mode.
	Mobile View	Displays form as seen on a mobile device in both design and preview mode.
	Undo	Revert the last change made.
	Redo	Repeat the last change made.
	Preview	How the form will display on a desktop computer or mobile device.
	Save Form	Save the form in progress and remain in Page Builder.
	More Options	Link to functions listed below:
	Preview	How the form will display on a desktop computer or mobile device.
	Save	Save the form in progress and remain in Page Builder.
	Save as Template	Save the current form as a template to be reused for future forms.
	Exit	Exit Page Builder. A confirmation dialog displays when this action is initiated.

Exiting Form Builder

At any point in the Form Builder, first save your page and then either click the home icon in the navigation bar, or expand the three-dots menu in the builder toolbar, and then select "Exit". The form is saved with a Draft status.

Selecting a Form Type

Before accessing the first step of the Page Builder, you select either a pre-styled theme from which to design your form, or a template that was created from a previous form design. 

To select a form theme:

1. Click the theme thumbnail or template name in the left panel. A preview is displayed in the right panel.
2. Toggle the mobile and desktop views if desired.
3. Click the Select Theme/Template button below the toolbar. 

Note: You cannot change the theme or template for your form after you advance to the next step in the builder. To use another theme or template, you will need to create another form.

Setting Form Basics

In the first step of the Page Builder you name your form, select the location where it will be saved, and define the type of form you are building. Complete the following fields, and then click the Next button.

• Form Name: The internal name used to identify the form in Sugar Market.
• Folder: The location where the form is stored. To store the form in a new folder, click the New Folder button, select an existing folder, and then click the Create button. Name the new folder, and then click the Save button.
• Form Type: The category of form primarily used for organizational purposes.
  Note: You must select the Event or Email Preferences form types to connect your form to event sessions or include email preferences form fields, respectively.
• Description: Optional text to describe the purpose of the form.
• URL Parameters: Select this option to add UTM parameters to pass hidden information through form submissions.
• Double Opt In: Enable this option to get consent from your customers to receive email communication. We recommend you enable this option to maintain a clean, engaged list and to ensure GDPR compliance. New leads who submit a form that has double opt-in enabled will automatically receive a pre-defined email asking for their consent to receive email communications from your company. You can also configure double opt-in in Global Settings to enable it for all future forms you build.

Building the Form

In Step 2 of Form Builder, you set up the fields to be used in your form, including their layout, mappings, and configuration options. You will set styling options in the next step.

Editing Fields

To edit the fields that are already on your form:

1. Mouse over the field on the canvas and then click the pencil icon. The options available for the selected field type are displayed in the field definitions panel on the right.
2. Complete the desired settings, and then click the Apply button at the top of the right-hand panel.

Adding Fields

To add a field to the form, drag a field type from the right-hand panel to the canvas in the desired location. A blue bounding box displays on the canvas where the field will be added.

Note: If you do not see the list of fields, then a field is currently selected. Click the Cancel or Apply button at the top of the panel to return to the field list.

Reordering Fields

To change the location of a field, drag the field to a new location on the canvas and drop when the blue bounding box is in the desired location. You can add up to three different fields in the same row.

Mapping Fields to CRM

Many field types can be mapped to your external CRM to store your visitor's responses. Fields that can be mapped include the Map to Field toggle switch in the field definitions panel. Note: Only Contact and Lead fields can be mapped.

To map a field to your CRM:

1. Click the pencil icon in the field on the canvas.
2. Slide the Map to Field toggle to the On position.
3. In the search box below the toggle, type the name (or portion of the name) of the CRM field to which the form field should be mapped.
4. Select the desired field from the results, and then click the Apply button at the top of the field definitions panel.
   

Configuring Conditional Fields

Conditional form fields allow you to create logic to dynamically display additional fields or specific field values based on a contact's answer to another field on your form. This feature lets you create a more tailored form experience for contacts and helps you collect only relevant data from contacts. For example, with a conditional field, you could add a dropdown field to your form that lists a range of industries. Based on the industry a contact selects from the dropdown field, a conditional field specific to that industry can then be surfaced on the form. An example conditional form field could display only relevant car models to a specific car brand after a car brand is selected in another field.

Note: Only a Dropdown field value can be used to trigger conditional logic. Email fields, Hidden fields, Dropdown fields that are triggering conditional fields, and structural elements cannot be set as conditional.

Conditional Fields

Follow these steps to configure configure conditional fields on your form:

1. Add a Dropdown field and any conditional fields that will be triggered when a specific value from the dependent dropdown field is selected.
   
2. Click the logic icon on the conditional field.
   
3. Select the Conditionally Display This Field logic option.
   
4. Using the Form Field dropdown, select the dependent dropdown field you want to use to trigger the conditional field. Dropdown fields are listed by their Field Name.
5. Using the Operator dropdown, select the operator that needs to be met for the selected dropdown field value.
6. Using the Value dropdown, select the specific dropdown field value you want to use to trigger the conditional field. In the screenshot below, you can see the logic set for this conditional field will only display the field on the form IF the Industries dropdown field is set to the Construction value. 
   
7. If needed you can add additional OR conditions by clicking the + Or button.
   
8. Click "Apply". Once conditional logic is applied to a field the logic icon for the field will be highlighted in blue.
   
9. To preview how the conditional field will appear to contacts, open the Preview view and set the dependent dropdown field conditions you configured to trigger the conditional field. In the screenshots below you can see how the conditional field does not appear until the dependent Construction value is selected for the dropdown field. 
   

Conditional Field Values

Follow these steps to configure configure conditional field values on your form:

Note: Only dropdown, radio, and checkbox fields can be set as conditional fields when configuring conditional field values. 

1. Add a Dropdown field and any conditional fields that you want to adjust the displayed values of, based on the value selected for the dependent dropdown field.
   
2. Click the logic icon on the conditional field.
   
3. Select the Conditionally Display This Field's Options logic option.
   
4. Using the Form Field dropdown, select the dependent dropdown field you want to use to trigger the conditional field. Dropdown fields are listed by their Field Name.
5. Using the Equals dropdown, select the dependent dropdown field value that you want to use to set the conditional field values.
6. Then toggle on the conditional field values you want to appear when the set dependent field value is selected. In the screenshot below, you can see the logic set for this conditional field will only display the Civic, CR-V, and Accord field values IF the Make dependent dropdown field is set to the Honda value. 
   
7. Use the Equal field to set the conditional field values you want to appear for any other of the dependent field's values. For example, here are the conditional field values set to be displayed when the Renault dependent field value is selected.
   
   Note: If any dependent values have no conditional field values set to be displayed the conditional field will be hidden if that dependent value is selected. For example, if the dependent field value Ford is selected the Make conditional field will be hidden since no conditional field values have been selected to be displayed. We will display a warning message to alert you of this behavior and highlight which dependent field values have no conditional field values selected to be displayed.
   
8. Click "Apply". Once conditional logic is applied to a field the logic icon for the field will be highlighted in blue and the field container is displayed with a dotted line border.
   
9. To preview how the conditional field values will appear to contacts, open the Preview view and set the dependent dropdown field conditions you configured to trigger the conditional field values. In the screenshots below you can see how only the configured conditional field values are displayed when the dependent field value is set to Honda.
   

Overwriting CRM Data

You may want to use the information you are collecting through your form to keep your CRM updated, especially for information that is likely to change (e.g., job title). 

To overwrite your CRM field with the data collected through your form:

1. Enable to Map to Field option for the field.
2. Enable the Overwrite Data option, and then click the Apply button.
3. On the Actions step, ensure you enable the Sync with External CRM option.
   

Identifying Fields as Required

Required fields are identified by a red asterisk on the canvas. The Email field is always required.

To set a field as required:

1. Click the pencil icon in the field on the canvas.
2. Scroll to the bottom of the field definitions panel and slide the Required Field toggle to the On position.
3. Click the Apply button at the top of the field definitions panel. 

Setting Default Field Text

To identify text that displays as the default for a field:

1. Click the pencil icon in the field on the canvas.
2. Scroll to the bottom of the field definitions panel and slide the Default Value toggle to the On position.
3. Type the default text in the text box below the toggle, and then click the Apply button at the top of the field definitions panel. 

Setting Placeholder Text

It can be helpful to add text to be displayed to your visitors in a field, indicating the type of information that should be input or an example.

To add placeholder text:

1. Click the pencil icon in the field on the canvas.
2. Type the text in the Field Place Holder Text box.
3. Click the Apply button at the top of the field definitions panel. The text displays in the field on the canvas.
   

Previewing the Form Design

At any point during the design process, click the Preview button in the toolbar to see your form in both desktop and mobile views. Click the X at the top right of the preview page to exit and return to the designer.

Note: While Sugar Market attempts to render a preview that represents how the form will look on your external site, we cannot guarantee that other elements from your site will not overwrite our style settings since we are not hosting the site.

Styling the Form

In Step 3 of the Form Builder, you can set style options for all elements of your form, including resizing the form and changing fonts and colors. Style settings apply to the current view mode only, allowing you to customize your form's style for mobile or desktop. After your form styling is complete, click the Next button at the bottom right to advance to the last step in the builder.

To set styles for any form element:

1. Select the element on the canvas, including labels, fields, text, and buttons. The style options available for the selected element are displayed in the right-hand panel.
2. Make the desired changes, and then click the Preview button in the toolbar to view the updated styles. 
3. Click the Save Form button in the toolbar. 

Copying Styles

After styling a field, you can copy the styles and paste them to other fields on your form.

To copy a style:

1. With a form element selected on the canvas, click the Copy Style icon at the top of the right-hand panel.
2. Select the element on the canvas to which you want to apply the copied style, and then click the Paste Style icon.
   

Designing for Mobile

Sugar Market's forms are built to work natively across all devices. When editing your form, it is useful to preview it in both desktop and mobile view to ensure your design looks as expected for both device types. You can make changes in mobile view that will not overwrite the settings you made in desktop view.

Defining Form Actions

Form actions define anything that happens after a visitor clicks the form submit button. Use form actions to add a redirect URL, send a confirmation email, or set up conditional actions depending on the form's questions. Adding the right form actions to your website's forms can make them a more powerful marketing tool.

• Sync with External CRM: Enable this option to create new or update existing contacts in your external CRM following a form complete. 
  
• Redirect to: Identify a location where your visitors will be directed after completing your form. To set the redirect URL, click the blue box, type the URL in the text field, and then click the Add button.
  Note: You will not be able to add a confirmation email, form alerts, or publish your form until you set a redirect URL.

Triggering an Email Confirmation

To automatically send a confirmation email to everyone who submits your form:

1. Click the plus icon on the right-hand side of the Form Actions section, and then select Confirmation Email.
2. Select the name of the email, and then click the Select button.
   Note: Only active Legacy Trigger Email Campaigns can be used as a confirmation email. To access Legacy Features click the Open button in the navigation bar and then click the Legacy Features module.
3. Click the Add button.

Triggering Form Submission Alerts

To automatically notify a Sugar Market user of form submissions:

1. Click the plus icon on the right-hand side of the Form Actions section, and then select Form Alert.
2. In the Notify User field, type a user name or part of a user name, and then select the desired name from the results.
3. From the Frequency dropdown list, select how often alerts should be sent to the selected user.
4. Click the Add button. The user will be sent email notifications for form submissions according to the frequency you selected.

Defining Field Submission Rules

After a form is completed, field submission rules allow you to evaluate how the questions were answered and to launch specific actions. The form complete must meet all of the conditions within a rule for the associated actions to occur. Once a rule has been satisfied, no further rules will be evaluated. For example, if you set up an action to add everyone in the Technology industry to a specific nurture, and a second action to add everyone with the title Manager to a different nurture, every form submitter who already met the first part of the flow will not proceed to the second rule. So in this example, anyone in the Technology industry with the title of Manager will only be added to the first nurture.

To create a field submission rule:

1. In the Field Submission Rules section, click the Add Rule button.
2. Identify the condition, including the field to be evaluated, the modifier, and the field value.
3. Click the Add button.
   
4. Click the blue Action box.
   
5. Select an action from the list, and then click the Add button, or define another condition to be combined with the first condition.
   Note: Only active Legacy Trigger Email Campaigns can be used as a Send Email action. To access Legacy Features click the Open button in the navigation bar and then click the Legacy Features module.
    
   

Reordering Rules

Since subsequent rules will not be evaluated when a previous rule is met, it is important to order your rules carefully. When you have multiple rules defined, you can reorder them by dragging the rule number:

Defining the Same Action for Every Form Submitter

To set up the same action for everyone who submits the form, create the rule If Email contains @. This will assign the same action (e.g., Add to Nurture) to everyone who submits the form since all email addresses must contain the @ symbol.

Publishing the Form

When all rules are configured and the form is styled as you want, click the Publish button at the bottom right in Step 4 of the Form Builder. The button will be disabled if there is missing required information or the form is not properly configured (e.g., missing email field).  

In the confirmation dialog, you can download the form code to then use in your Sugar Market page or external page.

Note: You cannot delete fields from published forms, so ensure you are satisfied with your design before you publish the form.

Restricting Form Submissions

You can use a suppression list to prevent visitors using specific email addresses or domains from submitting forms on your landing pages. For more information on creating suppression lists, refer to the Suppression Lists page.

You can follow these steps to enable a suppression list to restrict form submissions on your landing pages:

1. Create a new suppression list or edit an existing one.
2. Select the domain level option if you wish to also suppress the email domain(s) listed in your suppression list.
3. Apply the suppression list to your landing pages by selecting the Landing Pages option.
   
4. Add the email addresses and domains you wish to prevent from submitting a form on your landing pages.
5. Save your suppression list.

Managing Duplicate Form Submissions

Sugar Market works to automatically deduplicate form submissions using the following logic:

• Check for a matching email address.
• If the email address does not exist, a new record is created and data from the form submission is populated on the record.
• If the email address exists, the record is updated with any data from the form submission.
• If the email address exists for multiple records, the record that was most recently updated is updated with any data from the form submission.