Optin Fields

OVERVIEW

Optin fields block provides you multiple separate fields which are mostly used to serve Data Enrichment use cases such as collecting lead and customer information.

To add an Optin Fields block, simply drag and drop the Column block in the workspace.

After adding Optin fields block, it appears as below:

The setting of the block include 2 tabs:

• Content: Create fields and determine where will the data collected be pushed in CDP 365

• Advanced: Adjust general elements of all fields

A - CONTENT

Content tab includes these sections:

1. Form fields

2. Submit button

3. Sync data to Events & Business Objects

4. Success Script

5. Limited Submit

Detailed information

1. Form fields

a. Display labels?

This option allow you to hide or show the labels of all fields by turning off or on the Switch button.

b. Add & edit fields

• To add more fields to the template, click and choose the fields you want.

• To show/ hide a field, click on the icon

• To edit a field, click on the icon and adjust in the pop-up

General settings

These are the settings having in most type of fields

Specific settings

Depending on the type of field, the specific setting will change accordingly.

• Email

• Phone

• Dropdown select

• Datetime

• Radio button/ Checbox

• Privacy Notice

2. Submit button

✔️ Button Text - Enter the content displayed in the button

✔️ Button Click Action - Choose what will happen after resondent Submit the form. There are 7 actions:

1. Go to View: Go to a specific view of the template

2. Redirect an url

• Static: Enter text

• Dynamic: Select field and index

3. Open email client

4. Click to call

5. Click to copy text - Copy a specific text to the clipboard

6. Reload the page - Reload the current page

7. Open in the new window

✔️ Width - Change the width of the button in pixel, %, defauult (a value given by the system)

✔️ Align - Change the alignment of the button comparing to the block (left, center, right)

✔️ Button Size - Change the size of the button

3. Sync data to Event & Business Objects

Choose where and how the data be stored after a person submit the form.

• Source: Choose the desired Event Source

• Event: Choose the desired Event which was assigned in the Source

• Field name: Choose a fields in the Optin fields or set a fixed value to sync the data to attributes you want

• Hash: Choose if you want to secure the data or not. The list includes the method to hash the information

• Attribute name: Choose the BO and Attributes to be synced the data from the Event

Sync data to Business Objects

You could also determine to sync the data to Visitors or Customers to enrich the data by turn on the switch button.

This action is the same as the action of uploading audience to CDP 365 by files.

• Business Object: Visitors or Customers

• Method: With the data collected from the lead form, users could choose how the data will be synced

  • Add new only: Only audience which does not exist in CDP 365 are added

  • Update only: Only update the information of existing audience

  • Add new & update: Perform both actions (Add new audience & update the existing ones)

The audience is marked as new or existing based on the Visitor ID & Customer ID recorded through the event

4. Success Scripts

This is the scripts that will load after the button has been clicked

5. Verified Submit

Verified submit helps users to set up conditions to validate the information entered on the form when clicking the submit button

To set the condition, perform the following steps:

1. Click con pencil button in Conditions.

2. After clicking, the pop up condition will appear as shown below

• (2.1) List of fields in form

• (2.2) Hash option. Include option: None, MD5, SHA2567

• (2.3) Operator. Include option: Matches any of và Doesn't match any of. In the same set of conditions and, the operators must be the same.

• (2.4) Select an item: click on and select or Select a field. After clicking, will be display pop up Select a field as shown below:

  • Content Sources: Select Business Object. In the same set of conditions and, the Business Object must be the same.

  • Select attribute: Select attribute of selected business object.

  • + Refine by attribute: Add a condition to filter the data of the selected attribute.

3. Set the conditions and click Apply

4. Input Error Message.

B - ADVANCED

This tab contains advanced settings allowing you flexibly customize your Optin field

It includes 6 sections:

1. Form Fields Styling

a. All Form Field Styling

• Allow fields to display inline?: An inline style may be used to apply a unique style for fields

• Margin: Margins are used to create space around elements, outside of any defined borders (Top, Right, Bottom, Left)

• Gap: Set the gap between rows and columns

• Input Field Size: Size of field includes X Small Rounded, Large Rounded, Large Squared, Small Squared, etc.

• Style

  1. Solid: Applies a single color uniformly within the whole of an object by selecting the Background color

  2. Gradient: It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the Gradient Style:

     • Linear: Change the angle of the gradient

     • Radial: Change the positioning (right center, left top, left center, etc)

     • First color & first color location

     • Second color & second color location

• Font Settings: It includes Font family, Font color, Font size, Font weight, Line height, Letter spacing, etc.

• Border: It allows you to specify the style, width, and color of an element's border

• Rounded Corners: It allows you to define the radius of an element's corners

• Spacing

  • Inner Spacing (Padding): Padding is inside the border (or edge) of your element. Increasing the padding will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box

  • Outer Spacing (Margin): Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

b. Form Field Error Message Settings

This section allows you customize the Error Message showing when there appears any information what did not saisfy the Form.

• Default Form Error Style

ON: The Error Message Style will be provided by the system

OFF: Appear the settings to make your own message style

• Background: Adjust the background color of the error display box

• Error Position - The position where the error is displayed, including: Top/ Bottom of the Fields, By fields - Appear in every fields.

• Font setting: Adjust the font of the text

• Box shadow: Adjust the shadow for the error message box

• Border: Adjust the border color of the error message

• Rounded corners: Adjust the corners of the error message

• Spacing: Adjust the distance from Error Message to the Form

2. Field Label Styling

This section will customize all the label in the Form

• Align: The position of the Field label: Left, Right, Center

• Font setting: Font Style of the label

• Gap: The distance between the field label and field box, including

➡️Column: Applies if the label and textbox are displayed vertically

➡️Row: Applies if the label and textbox are displayed horizontally

• Indentation: The indent of the label.

3. Checkbox/Radio button Styling

• Field Alignment: Adjust the display position of the option label with the button

• Font settings: adjust the font style of the option label

• Option Label Gap: Adjust the vertical distance between the option label and the button.

• Line Height: Adjust the distance between option lines

• Column Spacing: Adjust the spacing between columns (Only displayed when there are more than 1 column)

4. Submit Button Styling

Background

1. Solid: Applies a single color uniformly within the whole of an object by selecting the Background color

2. Gradient: It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the Gradient Style:

   • Linear: Change the angle of the gradient

   • Radial: Change the positioning (right center, left top, left center, etc)

   • First color & first color location

   • Second color & second color location

Font Settings

It includes Font family, Font color, Font size, Font weight, Line height, Letter spacing, etc.

Icon

You can configure the Icon color, size, spacing, etc.

Box Shadow

It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)

Border

It allows you to specify the style, width, and color of an element's border

Rounded Corners

It allows you to define the radius of an element's corners

Spacing

• Inner Spacing (Padding): Padding is inside the border (or edge) of your element. Increasing the padding will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box

• Outer Spacing (Margin): Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

Hover Styles

You can configure the Hover Style by turning off the status of Default Hover Styles

a. Background color

1. Solid: Applies a single color uniformly within the whole of an object by selecting the Background color

2. Gradient: It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the Gradient Style:

   • Linear: Change the angle of the gradient

   • Radial: Change the positioning (right center, left top, left center, etc)

   • First color & first color location

   • Second color & second color location

b. Icon color

It allows you to change the color of the icon

c. Font color

It allows you to change the color of the text

d. Box Shadow

It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)

e. Border

It allows you to specify the style, width, and color of an element's border

5. Container Styling

Style

1. Solid: Applies a single color uniformly within the whole of an object by selecting the Background color

2. Gradient: It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the Gradient Style:

   • Linear: Change the angle of the gradient

   • Radial: Change the positioning (right center, left top, left center, etc)

   • First color & first color location

   • Second color & second color location

Box Shadow

It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)

Border

It allows you to specify the style, width, and color of an element's border

Rounded Corners

It allows you to define the radius of an element's corners

Spacing

• Inner Spacing (Padding): Padding is inside the border (or edge) of your element. Increasing the padding will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box

• Outer Spacing (Margin): Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

Position

It allows you to adjust the position of elements in the block

Z-Index

• The z-index property specifies the stack order of an element

• An element with greater stack order is always in front of an element with a lower stack order

Custom ID attribute

The ID of a block, which is used in Custom CSS, Custom Javascript

Custom Class attribute

The class of a block, which is used in Custom CSS, Custom Javascript

Hover Styles

You can configure the Hover Styles by turning off the status of Default Hover Styles

a. Background

1. Solid: Applies a single color uniformly within the whole of an object by selecting the Background color

2. Gradient: It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the Gradient Style:

   • Linear: Change the angle of the gradient

   • Radial: Change the positioning (right center, left top, left center, etc)

   • First color & first color location

   • Second color & second color location

b. Box Shadow

It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)

c. Border

It allows you to specify the style, width, and color of an element's border

d. Rounded Corners

It allows you to define the radius of an element's corners

e. Spacing

• Inner Spacing (Padding): Padding is inside the border (or edge) of your element. Increasing the padding will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box

• Outer Spacing (Margin): Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

f. Position

It allows you to adjust the position of the hover

g. Z-Index

• The z-index property specifies the stack order of an element

• An element with greater stack order is always in front of an element with a lower stack order

6. Display condition

You can set the condition to display the button

• Condition: It includes None, Show when, Hidden when

• Field: It contains Business Object attributes

• Index: The number of the row in the Business Objects Data table

• Operator: It includes contains, does not contain, starts with, doesn't start with, ends with, doesn't end with, etc.

• Value: you can input the value or select an attribute from Business Object or Event