SugarCRM SupportProduct GuidesSugar MarketSugar Market User GuideFormsCreating Forms

Creating Forms

Overview

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

Accessing Form Builder

Access Form Builder by navigating to Create > Form:

SM UG EMB menu

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

Working in the Form Builder Wizard

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

After selecting a form type, the remaining four steps are displayed at the bottom of the wizard, where you can select a step to move forward and backward in the wizard, as long as you have already submited the required information on the current page.
SM UG EMB overview
 
  • 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 wizard.
Wizard Toolbar

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

Icon Function Description
Desktop Desktop View Displays form as seen on a desktop computer in both design and preview mode.
Mobile Mobile View Displays form as seen on a mobile device in both design and preview mode.
undo Undo Revert the last change made.
redo Redo Repeat the last change made.
Preview Preview How the form will display on a desktop computer or mobile device.
Send test email Save Form Save the form in progress and remain in Page Builder.
Overflow menu 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 wizard, first save your page and then either click the sugar cube icon at the top left, or expand the More Options menu in the wizard toolbar, and then select "Exit". The form is saved with a Draft status and is accessible by navigating to Manage > Landing Pages > Pages and Forms > Forms. 

SM UG EMB exit

Selecting a Form Type

Before accessing the first step of the Page Builder wizard, 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 type:

  1. Click the theme thumbnail or template name in the left panel. A preview displays 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 wizard. To use another theme or template, you will need to create another form.

SM UG Pages theme

Setting Form Basics

In the first step of the Page Builder wizard 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 Builder - Basics

  • Form Name : This is the internal name used to identify the form in Sugar Market.
  • Folder : Where the form is stored. To store the form in a new folder, click the New Folder button, name the folder, and then click the Save button.
  • Form Type : Category of form primarily used for organizational purposes. When using the Event form type, you must associate the form with an event in Sugar Market's Events module.
  • 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 have 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.

2017-02-13 15-02-24

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.

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.
    SM UG Forms map
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.
    SM UG Forms overwrite
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 Place Holder Text

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

To add place holder 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.
    SM UG Forms placeholder
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 wizard, 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 wizard.
previewstyle

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.
    9d228b0a6de147a43a9db289447c99c4588a7d54c0a5204faf89a56189a7dac4

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.
Form Builder Edit in Mobile

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.

SM UG Forms syncredirect

  • 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. Including a redirect location is required for form publication.
Triggering an Email Confirmation

To send an email you previously created as an auto-responder 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.
  3. Click the Add button.

SM UG Forms confirmemail

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.

SM UG Forms alerts

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.
    SM UG Forms addrule
  4. Click the blue Action box.
    SM UG Forms addaction
  5. Select an action from the list, and then click the Add button, or define another condition to be combined with the first condition. 
    SM UG Forms action
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:

SM UG Forms reorderrules

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 wizard. 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.

Last modified: 2021-02-25 23:23:27