Attention
This article covers the process of editing HTML code for a lead registration form.
To correctly fill out the fields of a lead record added automatically after a registration on a landing page, edit the unique HTML code and add the edited code to the landing page code.
The list of lead page fields that are filled out upon a registration on a landing page is located in the “fields” block of the generated HTML code. Match these fields to the web form fields. Below is an example of the “fields” block in the HTML code.
fields:
"Name": "css-selector", // Name of a visitor, submitting the page
"Email": "css-selector", // Visitor's email
"Zip": "css-selector", // Visitor's ZIP code
"MobilePhone": "css-selector", // Visitor's phone number
"Company": "css-selector", // Name of a company (for business landing pages)
"Industry": "css-selector", // Company industry (for business landing pages)
"FullJobTitle": "css-selector", // Visitor's job title (for business landing pages)
"UseEmail": "css-selector" // Logical value: 'true' equals to visitor's opt-in to receive emails
Which fields can be mapped to a lead record?
You can set up mapping for both standard lead fields and custom fields. Field mapping setup for custom fields, lookups and non-standard fields is covered in separate articles.
Below are values of standard fields from the HTML code and corresponding lead page fields:
-
“Name” —> [Full name];
-
“Email” —> [Email];
-
“Zip” —> [ZIP code];
-
“MobilePhone” —> [Mobile phone];
-
“Company” —> [Account name];
-
“Industry” —> [Industry];
-
“FullJobTitle” —> [Job title].
-
“UseEmail” —> This checkox indicates whether the customer agreed to receive promotional materials.
The fields that are not used in the landing web form can be deleted from the HTML code.
How to match web form fields to the lead record fields
To fill in the lead page, replace the “css-selector” expression with the id or class of the corresponding field of the landing page form.
1.Copy unique HTML code in the [STEP 2. Copy the code and configure and map the fields] into any text editor.
2.Replace the “css-selector” text in the code to the corresponding selector name from the code of the landing page on your website.
The procedure for viewing source code may be different in different browsers. Below is an example of filling out the [Full name] field in Chrome.
a.Go to the landing page and open the source code (Fig. 1).
Fig. 1 Example of a landing page source code
b.Click the 
icon in the source code area (Fig. 2).
Fig. 2 Selecting a code item on the page
c.Click the [Full name] field on the landing page (Fig. 3).
Fig. 3 Selecting an item to view code
d.The code of the selected field will be highlighted in the source code area of the page (Fig. 4).
Fig. 4 Highlighted code fragment that corresponds to the [Full name] field
e.Copy the value that is contained in the “id” parameter of the source code (Fig. 5).
Fig. 5 Copying the “id” value from the source code
f.Replace the “css-selector” of the “Name” value of the source code:
fields: {
"Name": "#edit-ts-form-name", // Name of a visitor, submitting the page
"Email": "css-selector", // Visitor's email
"Zip": "css-selector", // Visitor's ZIP code
Attention
You can use the “id” or “class” values to replace the “css-selector” parameters of the landing page fields. If the “id” value is used, be sure to put the “#” character before it when editing the HTML code. For example, #edit-ts-form-name.
3.Replace “css-selector” for the remaining other fields in the same manner.
Note
Delete any fields in the generated HTML code that are not used on the landing page.
Recommendations on field mapping setup
-
One web form field can be mapped to several fields in bpm’online. For example, the value specified by the customer in the “Name” field of your form can be used to automatically fill in the [Name] (of the contact) and [Name] (of the account) fields of the lead page in bpm’online.
-
One field of a lead page in bpm’online can only be mapped to one field of your web form. You should not set up your lead page field to be autofilled with values from two fields of your form, because one of the values will overwrite the other one.
-
We recommend that the mapped fields are of the same type and format. If a lookup field form is filled in by the customer with a text value that matches a lookup value, the field will be filled in with that value. For example, if your form contains a “Country” text field and the customer enters “USA” in that field, which matches a lookup value in the countries lookup, then the [Country] lookup field on the lead page in bpm’online will be filled in with that value. There is also some additional input logic implemented for [Country], [State/province] and [City] fields. In case the field values entered by the customer cannot be found in bpm’online, those values will automatically be saved in the additional text fields of the [Verification required] block on the lead page.
-
Lookup fields must have the same list of values. In case the lookup values of your form fields do not correspond to bpm’online values, those fields will remain blank or will be filled in with a default value (this feature can be set up).
Add the modified HTML code to the code of the landing page on the website.
See also
•How to add a new record in the [Landing pages and web forms] section
•How to create a landing page on your website
•How to set up a landing page for adding contacts and other records in bpm’online
•How to set up mapping of custom fields between a landing page and bpm'online
•How to set up mapping of lookups and other non-text fields
•How to set up autofill for lead page fields not filled in by the customer
