NOTE: The Form Designer (New) is available only for customers on ClickDimensions UCI (Unified Client Interface) application. Customers with ClickDimensions On-Premises/Online using the Classic Interface will not be able to access this designer.
The Form Designer (New) comes with an updated and refreshing user interface to create responsive forms. Along with the new drag & drop designer, it also includes an easy-to-use form field configuration, multi-screen preview ability, customizable themes, and conditional form logic.
Follow the steps below to create a Form the Form Designer (New).
Step 1: Create a Web Content Record
To create a ClickDimensions form with the Form Designer (New) go to CRM Web and Events > New Web Content Record.
The page to create a Web Content record will appear.
In the new record, enter the following fields:
Name: This is the reference name of the form. You could use the title of the page that will contain the form – for example: ‘Contact Us’, ‘Newsletter Sign-up’.
Type: Choose 'Form'.
Domain: Select a domain you want to use for the form. Make sure that the Domain record also has the Web Content CNAME field populated - if it is not, please see this article to set that up.
Form Editor Type: Choose ‘Form Designer (New)’
Create New Visitor As: Determines whether a new Lead or Contact will be generated in CRM if the email address included in the form submission does not match any existing records. When an Anonymous Visitor fills out a form and his or her email address does not already exist in a Lead or Contact record in your CRM, ClickDimensions automatically creates a record with the information provided on the form.
NOTE: If 'Create New Visitor As' is left blank, the form will treat that as the field being set to Lead.
Category: This field is required and by default is set to Marketing, but you can select any of the default categories (Marketing, HR, or Other) or add your own custom options to choose from. The value selected here will not display on related Form Submissions records, but you can still use reference it in an Advanced Find or the Intelligent Dashboards.
Campaign: (Optional) If you link a CRM campaign to this Form Capture record, all associated Form Submissions records will be linked the campaign you specified. You can view all the Form Submission records in the Campaign record.
Lead Generation Form: This field is required and set to Yes by default. Its primary purpose is for use in Intelligent Dashboards but you may query on it in an Advanced Find, however, it will not appear on related Form Submissions.
Step 2: Save Web Content Record
Once all the required information is entered, click Save.
Step 3: Open the Form Designer (New)
To access the Designer, navigate to a web content record created with Form Editor Type ‘Form Designer (New)’ and then click Design.
A window will open with the new Form Designer.
Step 4: Configure Form Properties
You can configure the form properties in the right-hand side panel by clicking the Gear icon on the top right. The properties are grouped in sections as follows:
Under the General section you can add Form Title and Description. You can choose to show the Title. Make it Editable or Read-only. In addition, you can also set the responsiveness of the form and limit to one submission.
You can turn Captcha ON/OFF using the Show Captcha checkbox. Please note that Captcha is only shown after you publish the form. Previewing your Form does not show Captcha.
Logo in Form Title
You can upload a logo of your company and further configure the width and height of the logo in pixel units.
In this section you can configure the name and location for page navigation buttons and submit button. You can also show/hide field numbers, configure progress bar and enable/disable table of contents.
In this section you can set how the Form Fields’ title and description would look. Furthermore, you can configure how error messages should be presented for the Form Fields.
In this section, you can define the number of pages, their title and choose to show/hide any page.
In this section, you can choose when to run validation of user inputs. By default, it is set to Run validation when switching to the next page.
In this section, you can define the URL to be redirected to upon Form Complete. You can also configure a custom message to show upon Form Complete.
Step 5: Add/Remove Form Fields
Step 5a: Add Form Fields
You can add a Form Field by clicking on the New Form Field button on the Form Canvas or by simply dragging and dropping the Form Field into the canvas. While doing so, you can also choose where to place the Form Field. Once the Form Field is added to the Canvas, you can also click and drag it to an appropriate location.
Step 5b: Remove Form Fields
To remove any Form Field, simply click that Form Field on the canvas and click the Delete button at the bottom right of the Form Field.
NOTE: When you Undo a delete action, only that Form Field gets added back. All its configuration will be set to default.
Step 6: Configure Form Field Properties
Each Form Field comes with a set of properties that can be configured separately. Depending on the type of the Form Field, the settings available to configure may differ. In general, you can configure the following for each Form Field (depending on its type)
In this section you can configure the name, title, and description of a form field. You can also configure whether the Form Field should be visible, make it a required field or not. Furthermore, you can also put a placeholder text to be shown to the end user.
The Mapper section allows you to map the form field to a Lead/ Contact field. The list of fields available to map depends on the type of the form field. You can also choose to override in CRM or not.
The Choices section is usually shown only for form fields of type List, Radiogroup, Multi-Select and Checkbox fields. In this section you can configure the label for each option and the value to be stored. You can also map each option to a lead or a contact option map. The Lead/Contact option map available for mapping depends on the chosen form field type and Lead/Contact mapping in the mapper section.
The layout section is used to define the look and feel of the form field. You can define how to show the Title and Description. Also, you can configure the size of the field in pixel units.
In this section, you can set data to be validated against an expression and if not matched, set an error message to be displayed.
Step 7: Add conditional Form Logic
The Form Logic tab displays and allows you to edit logical rules that specify the form flow. Click Add New Rule button in the middle of the Form Logic tab to display editors that allow you to specify conditions and select actions to perform when these conditions are met.
The rules follow a simple IF-THEN logic that can be defined for each field separately.
If <field1> <condition>
Once you have defined the rule, click Done to save the rule. You can add multiple rules to a Form. Click a rule to expand it and use UI elements to edit the rule. Click Done to save your changes.
Step 8: Customize your Form with Themes
The Themes tab enables you to customize the applied UI theme. You can change colors, sizes, fonts, shadow effects, and other appearance parameters in a user-friendly interface.
You can choose from a list of pre-loaded Themes and/or customize on top of that. Once you finish customization, click Save. Now if you go back to the Themes tab you may notice that the changes have been saved as a Custom Theme. You can Export this Custom Theme to your local machine as a JSON object by clicking the Export button on the top right menu. You can also import any such theme to a different Form by simply clicking the Import button on the top right menu.
Step 9: Save all changes
You can save your edits at any stage of the process. Simply click on the Save button to do so.
NOTE: It is recommended that you Save your progress at frequent intervals and before closing the designer to avoid loss of work.
Step 10: Preview your Form
The Preview tab allows you to view and fill the form as an end user. Click the Device icon on the top-right and select the desired device from the drop-down menu. You can also click the Orientation icon to switch between the landscape and portrait orientations.
In Preview mode, after you complete the form, you can see the preview submission in a table or JSON format. Click the Preview Form Again button above the results to preview the Form again.
Step 11: Add Post Actions to your Form
For Forms created with the Form Designer (New), Post Actions are moved to the Action Tab on the Form record. All functionalities remain the same as before.
Step 12: Publish your Form
For Forms created with the Form Designer (New), Publishing is now moved to in the CRM Ribbon – Publish button. All forms can be embedded as Widget/iFrame or accessed via URL/Custom URL. Publishing allows the form to be hosted on clickdimensions.com domain and become active for receiving form submissions.
Embed As Widget
A widget allows the Form to be placed within a page on your website. Place the code snippet on your website within the <body> tags.
Embed As Link
This option will take you straight to the form on its own page. Use this link in an email or on your website.
Embed As iFrame
This option allows the Web Content to be placed within a page on your website. The iframe code snippet should be placed on your website within the <body> tags.
This option allows the URL to be customized so that its purpose can be made clearer to the user who clicks it.
Active vs Inactive Form
All Forms created using the Form Designer (New) and published are set to Active by Default which means it continues to receive submissions unless explicitly made inactive.
You have the option to set the form to Inactive in the Publish window.
When an inactive form is accessed, a warning is message presented to the end user.
|Feature Added: 2023.11