Create a Form with the Form Builder

Table of Contents

• Create a Web Content Record
• Add Fields
• Field Properties
• Form & Button Properties
• Components
• Actions
• Confirmation Text
• Preview
• Embed

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.

Click the New button to create a new record.

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

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

Submissions: Once the form is submitted, relevant Posted Form records will be listed here.

Page Views: Page Views for people accessing the form will be listed here.

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.

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.

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.

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 Tab

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 Tab

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.

NOTE: When selecting Choose existing pattern > Regular 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 Tab

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.

NOTE: 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.

NOTE: 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.

3d. Creating Posted Preferences using a Form

If your organization is on ClickDimensions version 9.2.0+ (8.2.2 for CRM 2011) and is utilizing the ClickDimensions Opt-In Subscription Management style, you will see a Subscription List field in the Mapping tab for Checkbox and Radio Button Fields. Associating the Form Field with a Subscription List will allow you to record opt-in or opt-out Posted Preferences for the Subscription List. This can be set in addition to mapping the fields to a field on the contact/lead records.

Press OK when you are finished making the necessary changes. Like Form Fields, each of the different Components added to the Form 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.

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

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.

Step 6: Add Components

Components are non-field items that can be added to a Form to expand its functionality or styling options. Click here to learn about Components.

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.

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.

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 Post Redirect field.

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.

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.

Step 10: Embed

Once you are ready to publish your form, click the 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.