The Form Designer 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.
Step 1: Create a Web Content Record
To create a Click Form with the Form Designer go to Web and Events > New Web Content.
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.
Create New Visitor As: Set to ‘Contact’ by default.
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 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 No 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
To access the Designer, navigate to a web content Form record created then click Design.
A window will open with the 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:
General
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.
Captcha
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.
Navigation
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.
Field
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.
Pages
In this section, you can define the number of pages, their title and choose to show/hide any page.
Data
In this section, you can choose whether and when to clear the hidden question values, when to update text field value, whether to save partial form results in progress, and whether to save the "other" option value as a separate property.
Validation
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.
Form Complete
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)
General
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/hidden, make it a required field or not. Furthermore, you can also put a placeholder text to be shown to the end user.
Mapper
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.
Choice Options
The Choice Options 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 Contact option map available for mapping depends on the chosen form field type and Contact mapping in the mapper section.
Layout
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.
Data
In this section, you can set a default value for each form field. Simply click a form field and navigate to the Data section and click Set Default Value. A pop-up window opens when you can set an appropriate default value based on the field type.
Validation
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 Consent
Optionally, you can add consent to your form by adding a Consent form field at the end of the form.
You can add multiple consent checkboxes using the '+' sign under the Choices section and configure the consent text with hyperlinks using the rich text editor. In order to submit the form, a response to all of the consent checkboxes are mandatory.
Step 8: 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>
and/or
<field2> <condition>
and/or
…
then <action1>
and <action2>
…
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 9: 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 10: 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 11: 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 12: Add Post Actions to your Form
For Forms created with the Form Designer, Post Actions are moved to the Action Tab on the Form record. All functionalities remain the same as before.
Step 13: Set Form Matching Rules
Click normally identifies Contacts based off of only their Email Address which can cause matching issues if your business have multiple records that share the same Email Address. Our Matching Rules allow you to select additional fields that are used along with the Email Address to help match to a specific Contact record or determine if a new record should be created instead.
To create a set of rules, navigate to the Matching Rules tab on any form record created with the Form Designer (New).
- Use the search box to search for attributes by typing in a keyword.
- Select the attribute(s) to be used for matching by checking the checkbox against it and click the Select button at the bottom.
- The selected attribute(s) gets added to the respective Contact Attribute section in the middle. Click Save button on the top right hand side corner to save the changes.
- You can choose to remove each attribute separately by clicking the X against each. Alternatively, you can Clear All of them using the Clear button on the top right hand side.
Note: The Email Address field will always be included for matching even if it does not appear within the selected Contact Attributes.
Here's how Matching Rules work:
- If the submitter is already identified by Click's tracking script and cookies, then their submission will remain linked to their identified Contact record.
- If the form submission contains data for the selected fields, then the matching rules will be applied when attempting to associate to an existing record.
- If there is an existing record with the same Email Address, but the form submission contains no data for the selected fields, then the default behavior of matching by only the email address will be applied.
- If there is an existing record with the same Email Address, but does not have matching values for the fields in your Matching Rules, then a new record will be created with these values.
- If there is an existing record where the Email Address does not match the form data, but the fields for the Matching Rules match, then a new record will be created.
Step 14: Configure Global Prefill Settings
The Global Prefill Settings allow you to choose a set of contact attributes that needs to be prefilled with existing end user data from CRM when your forms are loaded (from a link in an email) by the end user. This means you can show them what information you already have and let them update the current information and/or add new information.
Note: For the form to prefill the form must be accessed via a direct link in an email sent via Click.
To configure this setting, navigate to the Global Prefill Settings tab on any form record created with the Form Designer (New).
- Filter by Contact attributes by using the Look for dropdown.
- Use the search box to search for attributes by typing in a keyword.
- Select the attribute(s) to be prefilled by checking the checkbox against it and click the Select button at the bottom.
- The selected attribute(s) gets added to the respective Contact Attribute section in the middle. Click Save button on the top right hand side corner to save the changes.
- You can choose to remove each attribute separately by clicking the X against each. Alternatively, you can Clear All of them using the Clear button on the top right hand side.
Please take caution while clearing the attributes. This is a global setting which means it is a shared setting across all your forms. Any changes made and saved to this configuration will be applied across all forms.
Step 15: Publish your Form
For Forms created with the Form Designer, 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.
Custom URL
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 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.08 |
|
Feature Updated: 2024.06 |