Create a Form with the Form Builder

<< Create Form Fields Introduction Form Actions >>

With ClickDimensions, you can build your own forms or you can integrate ones that currently exist on your website.

Form Fields can be created before you create the actual form or during this process.

IMPORTANT: Your CNAMEs and Domain records also need to be set up before creating your forms for the identification process to work. In order to tie web visit history to a Contact or Lead via a form submission, the domain of the form and the domain of your website need to match. Therefore, you’d need to have your CNAME created through your hosting provider and setup in ClickDimensions.


Step 1: Create a Web Content Record

To create a ClickDimensions form with the Form Builder go to CRM Settings > Web Content.

Here, you can see a few System Views. Active Web Contents will show by default, but you can also change the view to display Active Forms only, if you prefer.  You can also create a Personal View if you would like to create your own criteria to show here.

2017-03-24_11-38-16

2017-05-05_16-16-44

Click the New button to create a new record.

A new Web Content record will appear.

blank web content record

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 Sub Domain Alias field populated – if it is not please see this article to set that up.

Create New Visitor As: Choose which type of record to create in your CRM if it does not match an existing Lead or Contact.

IMPORTANT: 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. In the Create New Visitor As field, you can specify if ClickDimensions will create a Lead or a Contact record.

Campaign: (Optional) If you link a CRM campaign to this Form Capture record, all associated Posted Form records will be linked the campaign you specified. You will be able to view all of the Posted Form records in the Campaign record.

Web Responsive: This determines whether you would like your form to be responsive and scale
automatically based on the device it’s being viewed on. By default this is set to Yes, but you can disable it by setting it to No if you prefer. If you change this value, you’ll want to Save and Publish your Web Content record.

Once all of the required information is entered, click Save.

Step 2: Design by Adding Form Fields

Click the Design button to start adding your form fields to the form.

The Design window will open.

Form Builder

2a. Add Form Fields

In the Design window, you will see the Filter field is set to Form Fields on the right and there is a list of Form Fields. To add them to your form, simply click on the form field you want to add and drag it to the Form column on the left. If you haven’t created your form fields already you may press New at the bottom and create them straight from here. To learn more check out this article.

The Submit button is also moveable on the bottom.

Add field

As you drag and drop the fields to the left a red bar will appear and the field it will be dropped into will turn a darker color of blue.

Repeat until all the fields you want in the form  have been added.

IMPORTANT: Keep in mind that you’ll always want to have an email field on the form so that if someone is already in your CRM and they fill out the form, the information will be mapped to that person’s record. Whether the form is mapped to an existing person or not depends on the email field and if the email that they provide matches an email on an existing record. It will check the Email, Email Address 2, and Email Address 3 fields of all records. [If there are no matches, it will then check to see if their Visitor Key (created when a cookie is placed in their browser, and unique to that browser) matches an existing Lead or Contact’s Visitor Key. If it matches neither, ClickDimensions automatically creates a record with the information provided on the form.]

Form Built

Once the fields have been added you can click and drag the fields in the Form column to re-arrange the order of the form fields.

2b. Remove Form Fields

If a field needs to be taken off of a form, select it and press Remove in the top ribbon.

remove field

Step 3: Set Form Field Properties

Double click on any of these fields or components once you drop them into the form, or select one and choose Properties to edit the field or component.

Field Properties button

The properties window will appear. For Form Field Properties there are three different sections: Display, Formatting, and Mapping.

3a. Display

In the Display section, you are able to change the Label of the form, insert a Default Value, make the field required, make it read only, and change the color, font, and size of the label.

Field Properties

3b. Formatting

In the Formatting section, you can change the width of the label of the field and the width of the actual field by selecting the number of columns you want the label and/or field to span. You can also alter the Validation of the form.  This means that you can use Regular Expressions to set a format of what can be typed. Do this by putting the regex in the Set custom regex field in this particular field. If the content does not fit the required format, then it will not submit the form and will give them the error message you type in the Set error message field when they press submit. (For example, making sure a phone number is the correct amount of numbers). To find the correct regex for you, search online for something like “US phone regex”.

Formating Tab

Also, for form fields of type Email, you can see an additional option (pictured here): Filter free email addresses. This will not allow any of the listed email domains (hotmail, gmail, yahoo, aol) to be submitted as part of an email address. This feature is useful if you want to make sure your customers submit their business or professional email address rather than a personal one.
Email Formatting

NOTE: When selecting Choose existing patternRegular email pattern for an email-type form field’s regex, this is the the value that is applied to the field:
/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/

3c. Mapping

In the Mapping section, you can specify which fields you want to map your form field to in Lead and Contact records. You can also specify if you want the information submitted in the form to override any information currently in the Lead/Contact record field. Override in CRM is only taken into consideration if the field on the lead or contact contains data. In other words, if the field on the lead or contact is blank, regardless of whether the Override in CRM field is checked or not, the information will be mapped to the blank field.

Please note that Override in CRM will show up for form fields of all types except Email. This is because we match the submitter of the form to a lead or contact in your CRM via the email address.

Form checkboxes should have the Override in CRM option enabled if the data should be mapped in CRM. CRM checkboxes always hold a value: checked or unchecked even if the submissions are from new Leads or Contacts. Upon submission, the checkbox will need to override the existing unchecked value with the new value.

Mapping
Press OK when you are finished making the necessary changes.
Each of the different Components also have different Properties that you can edit.

Step 4: Form Properties

Some style elements of the form can be changed, such as text and margins. To do so, click Properties in the Form section of the ribbon.

Form Properties

This will open the Form Properties window. In this window, you can specify the Font Name, Font Size, and Margins for the Form Fields/Form (the Font Name and Size will apply to all form fields, unless you specify a Font for an individual field).

Form Properties window

Step 5: Button Properties

You can also edit the properties of the Submit Button by double clicking on the submit button. In the submit button properties you can change the text on the button, the color or image of the button, and the alignment with in the cell. You can also change the labels of the previous and next buttons used in the form.

Submit button properties

Step 6: Add Form Components

To add components, change the Filter drop down field to Form Components. Just drag and drop these just like the form fields.

Form Components

Here is a list of the following Components that you can include in your form:

6a. Section Title

This lets you add some text within the form. You can change the font, color, size, and weight of the text within the Properties window. Drag and drop the component to the Form Designer, select the component, and click on the Properties button in the Field section of the ribbon (or you can double click on the component in the Form Designer). The Properties window will open and you will be able to make the necessary changes:

2015-04-17_15-52-33

6b. CAPTCHA

The CAPTCHA component is a security addition that will make sure a human is submitting the form, not a computer robot. It will insert a simple slider into your form, which the user will need to slide a switch from left to right in order to submit. If you are accessing the form on a mobile device and not a computer, tapping the lock icon will allow you to submit the form.

The Submit button is grayed out while the CAPTCHA is locked
The Submit button will become active when the user moves the slider to the right

6c. Line

The Line component will insert a horizontal rule line that spans the width of your form (the horizontal width of the line can change based on the number of columns selected). You can alter the thickness and color of the link in the Properties window.

Line

6d. Page Break

By inserting a Page Break, you will divide your form into multiple sections. The Page Break component will insert Next and Previous buttons. Any questions that appear above the Page Break are on the first page, and any questions after the Page Break component will be visible once the user clicks Next on the form.

6e. HTML

If you would like to insert images, text, or HTML into your form, you can do so by using our HTML Component. Open the Properties window to edit the HTML. This is very similar to the Free Style Editor. View this post to learn about the buttons in this editor.

 

2016 HTMl Component Form Builder

6.e Part 1 Add an Image

You can add images by clicking the Image Manager button. This will allow you to see the Image Manager, where you can organize your folders of image files in the first column.  Create new folders or subfolders by clicking + New Folder at the bottom of the column.

In the middle column, you can upload images, either by clicking Upload an Image or dragging and dropping image files from your computer into the designating upload space.

You if you select an image file that you have already uploaded into the Image Manager, a preview of the image file will appear in the third column.  You also have edit options for this image, accessed by clicking the Edit button in the top right corner of the third column.

Once you’re satisfied with the image you’d like to insert into your HTML Component, click Ok.

6.e Part 2 Link to a File

You can make files accessible within the HTML Component by using the Link Manager. Click Link Manager button, and within the Link Manager, select the File tab.

In the first column, you can create and arrange folders and subfolders to store your files. Create new folders with the + New Folder button in the bottom left corner of the column.

In the middle column, upload a file or multiple files either by clicking Upload a File, then select the files on your computer to upload them, or drag and drop the files of your choice into the designated upload area.

NOTE: You can upload one or more files at once, but the maximum size allowed for each file is 10 MB.

Select the file you wish to link into your HTML Component, then click Insert Link.

Once you’re happy with your HTML Component setup, click Ok in the bottom right corner, and your changes will be saved and you will be taken back to the designer.

 

HTML Component Properties Finished

6f. File Upload

This allows the person submitting the form to upload a file with the max size of 10MB with their submission. Most file types are allowed, however .exe’s are not. The file will be saved in the Notes section of the corresponding Posted Field record.

2015-04-17_15-53-02

Please Note: The dedicated ClickDimensions user needs to have the appropriate permissions to create a note in CRM. This is required in order to allow ClickDimensions to create a note in the Posted Field record with the file that was uploaded.

Regardless of the maximum file size you configure for the File Upload component, the maximum file size for attachments in your CRM is governed by the System Settings in the Administration area of CRM:

File Size

Also: If you use the Firefox web browser, to view an uploaded file you must click both the large and small “NOTES” text buttons on the Posted Field record.

Notice both the large and small “NOTES” text links above the uploaded file; you must click both of them to view the file in Firefox. File Upload Firefox

Step 7: Add Actions

The Form Builder also gives you the opportunity to specify some actions to take once someone has submitted the form. These Actions are detailed here.

Actions Tab

Step 8: Enter the Confirmation Text

In the Form Builder you are able to create confirmation text that will appear once the form has been successfully submitted or redirect to another page. To edit the text or redirect, click on the Confirmation Text button.

Confirmation Text Button

From here, you can use the HTML Editor to edit and style your confirmation message to match the look of your website or send the user to a different page.

confirmation text updated editor

Or redirect the visitor by placing the URL of the website into the Post Redirect field.

Post Redirect

NOTE: The URL in the Post Redirect field must include http:// or https:// in order for the form to redirect on submission.

It is recommended to only add confirmation text in the HTML editor OR specify a redirect URL in the the Post Redirect field. The form will redirect immediately, so if both are added, the confirmation text will not be displayed.

Click Save and Close to save the changes made to the confirmation text.

Step 9: Preview Your Form

You can view the form by clicking the Preview button.

Preview

This will open your form in a new window. The form is not functional, so you will not be able to submit the form and see the confirmation message in the preview window.

Preview Pane

Step 10: Embed

Once you are ready to publish your form, click the Embed button.

Embed button

This will open a window that contains URL to the form, the Iframe code, and the Widget code for you to insert into your website. To learn more about the ways you can Embed your form click here.


Posted Form records will now start to come into your CRM containing the information submitted in the form.


Step 1: Create a Web Content Record

To create a ClickDimensions form with the Form Builder go to Settings > ClickDimensions > Web Content.

Web Content

Press the New button to create a new record.

New Web Content

A new 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

Create New Visitor As: Choose which type of record to create in your CRM if it does not match an existing Lead or Contact.

Tip: 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. In the Create New Visitor As field, you can specify if ClickDimensions will create a Lead or a Contact record.

Campaign: (Optional) If you link a CRM campaign to this Form Capture record, all associated Posted Form records will be linked the campaign you specified. You will be able to view all of the Posted Form records in the Campaign record.

Domain: Select a domain you want to use for the form. Make sure that the Domain record also has the Sub Domain Alias field populated – if it is not please see this article to set that up.

Web Responsive: This determines whether you would like your form to be responsive and scale
automatically based on the device it’s being viewed on. By default this is set to Yes, but you can disable it by setting it to No if you prefer. If you change this value, you’ll want to Save and Publish your Web Content record.

Auto Responder Email Template: It’s best to leave this field blank. There is a better option for this in the Actions area of the form that you will later see.

Once all of the required information is entered, click Save.

Step 2: Design by Adding Form Fields

Click the Design button to start adding your form fields to the form.

Design button

The Design window will open.

2a. Add Form Fields

In the Design window, you will see the Filter field is set to Form Fields on the right and there is a list of Form Fields. To add them to your form, simply click on the form field you want to add and drag it to the Form column on the left. If you haven’t created your form fields already you may press New at the bottom and create them straight from here. To learn more check out this article.

The Submit button is also moveable on the bottom.

As you drag and drop the fields to the left a red bar will appear and the field it will be dropped into will turn a darker color of blue.

Repeat until all the fields you want in the form  have been added.

IMPORTANT: Keep in mind that you’ll always want to have an email field on the form so that if someone is already in your CRM and they fill out the form, the information will be mapped to that person’s record. Whether the form is mapped to an existing person or not depends on the email field and if the email that they provide matches an email on an existing record. It will check the Email, Email Address 2, and Email Address 3 fields of all records. [If there are no matches, it will then check to see if their Visitor Key (created when a cookie is placed in their browser, and unique to that browser) matches an existing Lead or Contact’s Visitor Key. If it matches neither, ClickDimensions automatically creates a record with the information provided on the form.]

Once the fields have been added you can click and drag the fields in the Form column to re-arrange the order of the form fields.

2b. Remove Form Fields

If a field needs to be taken off of a form, select it and press Remove in the top ribbon.

Remove Field

Step 3: Set Form Field Properties

Double click on any of these fields or components once you drop them into the form, or select one and choose Properties to edit the field or component.

The properties window will appear. For Form Field Properties there are three different sections: Display, Formatting, and Mapping.

3a. Display

In the Display section, you are able to change the Label of the form, insert a Default Value, make the field required, make it read only, and change the color, font, and size of the label.

3b. Formatting

In the Formatting section, you can change the width of the label of the field and the width of the actual field by selecting the number of columns you want the label and/or field to span. You can also alter the Validation of the form.  This means that you can use Regular Expressions to set a format of what can be typed. Do this by putting the Regex in the Set custom regex field in this particular field. If the content does not fit the required format, then it will not submit the form and will give them the error message you type in the Set error message field when they press submit. (For example, making sure a phone number is the correct amount of numbers). To find the correct Regex for you, search online for something like “US phone regex”.
Also, for form fields of type Email, you can see an additional option (pictured here): Filter free email addresses. This will not allow any of the listed email domains (hotmail, gmail, yahoo, aol) to be submitted as part of an email address. This feature is useful if you want to make sure your customers submit their business or professional email address rather than a personal one.

3c. Mapping

In the Mapping section, you can specify which fields you want to map your form field to in Lead and Contact records. You can also specify if you want the information submitted in the form to override any information currently in the Lead/Contact record field. Override in CRM is only taken into consideration if the field on the lead or contact contains data. In other words, if the field on the lead or contact is blank, regardless of whether the Override in CRM field is checked or not, the information will be mapped to the blank field.

Please note that Override in CRM will show up for form fields of all types except Email. This is because we match the submitter of the form to a lead or contact in your CRM via the email address.

Form checkboxes should have the Override in CRM option enabled if the data should be mapped in CRM. CRM checkboxes always hold a value: checked or unchecked even if the submissions are from new Leads or Contacts. Upon submission, the checkbox will need to override the existing unchecked value with the new value.


Press OK when you are finished making the necessary changes.
Each of the different Components also have different Properties that you can edit.

Step 4: Form Properties

Some style elements of the form can be changed, such as text and margins. To do so, click Properties in the Form section of the ribbon.

Form Properties

This will open the Form Properties window. In this window, you can specify the Font Name, Font Size, and Margins for the Form Fields/Form (the Font Name and Size will apply to all form fields, if you have not already specified a Font for an individual field).

Form General Properties

Step 5: Button Properties

You can also edit the properties of the Submit Button by double clicking on the submit button. In the submit button properties you can change the text on the submit button, the color or image of the button, and the alignment with in the cell of the button can be changed. You can also change the labels of the previous and next buttons used in the form.
Submit Button Properties

Step 6: Add Form Components

To add components, change the Filter drop down field to Form Components. Just drag and drop these just like the form fields.

Here is a list of the following Components that you can include in your form:

6a. Section Title

This lets you add some text within the form. You can change the font, color, size, and weight of the text within the Properties window. Drag and drop the component to the Form Designer, select the component, and click on the Properties button in the Field section of the ribbon (or you can double click on the component in the Form Designer). The Properties window will open and you will be able to make the necessary changes:

2015-04-17_15-33-32

6b. CAPTCHA

The CAPTCHA component is a security addition that will make sure a human is submitting the form, not a computer robot. It will insert a simple slider into your form, which the user will need to slide a switch from left to right in order to submit.

The Submit button is grayed out while the CAPTCHA is locked
The Submit button will become active when the user moves the slider to the right

6c. Line

The Line component will insert a horizontal rule line that spans the width of your form (the horizontal width of the line can change based on the number of columns selected). You can alter the thickness and color of the link in the Properties window.

6d. Page Break

By inserting a Page Break, you will divide your form into multiple sections. The Page Break component will insert Next and Previous buttons. Any questions that appear above the Page Break are on the first page, and any questions after the Page Break component will be visible once the user clicks Next on the form.

6e. HTML

If you would like to insert images, text, or HTML into your form, you can do so by using our HTML Component. Open the Properties window to edit the HTML. This is very similar to the Free Style Editor. View this post to learn about the buttons in this editor.

html component new editor

6.e Part 1 Add an Image

You can add images by clicking the Image Manager button. This will allow you to see the Image Manager, where you can organize your folders of image files in the first column.  Create new folders or subfolders by clicking + New Folder at the bottom of the column.

Image Manager - DD

In the middle column, you can upload images, either by clicking Upload an Image or dragging and dropping image files from your computer into the designating upload space.

Image Manager - DD - Upload

You if you select an image file that you have already uploaded into the Image Manager, a preview of the image file will appear in the third column.  You also have edit options for this image, accessed by clicking the Edit button in the top right corner of the third column.

Image Manager - Freestyle - Preview

Once you’re satisfied with the image you’d like to insert into your HTML Component, click Ok.

6.e Part 2 Link to a File

You can make files accessible within the HTML Component by using the Link Manager. Click Link Manager button, and within the Link Manager, select the File tab.

html component new editor link button

In the first column, you can create and arrange folders and subfolders to store your files. Create new folders with the + New Folder button in the bottom left corner of the column.

HTML Component - File - Folders

In the middle column, upload a file or multiple files either by clicking Upload a File, then select the files on your computer to upload them, or drag and drop the files of your choice into the designated upload area.

HTML Component - File - Upload Files

Select the file you wish to link into your HTML Component, then click Insert Link.

HTML Component - File - Insert Link

Once you’re happy with your HTML Component setup, click Ok in the bottom right corner, and your changes will be saved and you will be taken back to the designer.

html component new editor ok button

6f. File Upload

This allows the person submitting the form to upload a file with the max size of 10MB with their submission. Most file types are allowed, however .exe’s are not. The file will be saved in the Notes section of the corresponding Posted Form Field record.

2015-04-17_15-37-55

Please Note: The dedicated ClickDimensions user needs to have the appropriate permissions to create a note in CRM. This is required in order to allow ClickDimensions to create a note in the Posted Field record with the file that was uploaded.

Regardless of the maximum file size you configure for the File Upload component, the maximum file size for attachments in your CRM is governed by the System Settings in the Administration area of CRM:

Step 7: Add Actions

The Form Builder also gives you the opportunity to specify some actions to take once someone has submitted the form. These Actions are detailed here.

2015-04-17_16-11-40

Step 8: Enter the Confirmation Text

In the Form Builder you are able to create confirmation text that will appear once the form has been successfully submitted or redirect to another page. To edit the text or redirect, click on the Confirmation Text button.

Confirmation Text Button

From here, you can use the HTML Editor to edit and style your confirmation message to match the look of your website or send the user to a different page.

Or redirect the visitor by placing the URL of the website into the redirect box.

Confirmation Redirect

Only fill out either the HTML editor or the Post Redirect field because only one will show.

Click Save and Close to save the changes made to the confirmation text.

Step 9: Preview Your Form

You can view the form by clicking the Preview button.

Preview Button

This will open your form in a new window. The form is not functional, so you will not be able to submit the form and see the confirmation message in the preview window.

Preview Pane

Step 10: Embed

Once you are ready to publish your form, click the Embed button.

Embed Button

This will open a window that contains URL to the form, the Iframe code, and the Widget code for you to insert into your website. To learn more about the ways you can Embed your form click here.

Posted Form records will now start to come into your CRM containing the information submitted in the form.


Feature Added: 2010
Feature Updated: 8.12.0
ClickDimensions Version Need: Any
<< Create Form Fields Introduction Form Actions >>