Marketing Creatio
PDF
This documentation is valid for Creatio version 7.15.0. We recommend using the newest version of Creatio documentation.

How to edit unique HTML code

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];

a.“Company” —> [AccountClick the btn_lendings_code.png icon in the source code area (Fig. 1).

Fig. 1 Selecting a code item on the page

scr_landings_choose_element.png 

b.Click the [Full name] field on the landing page (Fig. 2).

Fig. 2 Selecting an item to view code

scr_landings_choose_field.png 

c.The code of the selected field will be highlighted in the source code area of the page (Fig. 3).

Fig. 3 Highlighted code fragment that corresponds to the [Full name] field

scr_landings_code_fragment.png 

d.Copy the value that is contained in the “id” parameter of the source code (Fig. 4).

Fig. 4 Copying the “id” value from the source code

scr_landings_copy_id.png 

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

1.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 Creatio. 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(Fig. 5).

Fig. 5 Selecting a default web form

scr_landings_new_landing00001.png 

However, you are not limited the default web forms. In fact, you set up a landing page web form for adding records of any kind, including contacts and accounts.

To set up a landing page for adding a custom record:

1.Add a new type of landing page to the “Landing types” lookup.

For example, to create a web form for new contact registration, add a new record in the lookup and select the “Contact” object in the [Object] field. Working with lookups is covered in a separate article.

2.After adding a new web form in the “Landing types” lookup, use the Section Wizard to add a new type of record in the [Landing pages and web forms] section. To open the Section Wizard, go to the [Landing pages and web forms] section, and in the [View] menu select [Open section wizard] (Fig. 6).

Fig. 6 Adding a new record type in the Section Wizard.

landings_configure_section_properties.png 

Working with the Section Wizard is covered in a separate article.

For example, to set up a contact registration form, add a new page on the section settings step and select the new landing type. Click the [Add] button to add a contact registration form in the [Landing pages and web forms] section.

3.Add a new record in the [Landing pages and web forms] section. To do this:

Click the [New] button and select the form that you set up: “Contact registration form”.

Fill out the opened landing edit page.

Set up default values for the required fields on the [Default values] tab. If any of the required fields is not filled in on the web form, these fields will be filled in with the values that you set up here,

Save the record.

4.After adding a new landing page record, set up mapping between the web form on your website and Creatio. To do this:

Edit the unique HTML code.

Add the modified code to the source code of the landing page on your website.

The procedure for mapping a landing page web form to Creatio is covered in a separate article. The article covers mapping of the [Leads] section fields. Fields from other sections are mapped in a similar way. Editing the unique HTML code and adding the modified code to the website source code are similar, regardless of the section used by the landing page.

See also

How to create a landing page on your website

Adding new records in the [Landing pages and web forms] section

How to connect your website landing page to Creatio

Map custom fields between a landing page and Creatio

How to set up mapping of lookups and other non-text fields

Landing page setup FAQ

Did you find this information useful?

How can we improve it?