Optin Fields
Last updated
Last updated
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
Content tab includes these sections:
Form fields
Submit button
Sync data to Events & Business Objects
Success Script
Limited Submit
Detailed information
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
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.
✔️ 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:
Go to View: Go to a specific view of the template
Redirect an url
Static: Enter text
Dynamic: Select field and index
Open email client
Click to call
Click to copy text - Copy a specific text to the clipboard
Reload the page - Reload the current page
Open in the new window
✔️ Width - Change the width of the button in pixel, %, default (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
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
This is the scripts that will load after the button has been clicked
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:
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.
Set the conditions and click OK
Input Error Message.
This tab contains advanced settings allowing you flexibly customize your Optin field
It includes 6 sections:
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
Solid: Applies a single color uniformly within the whole of an object by selecting the Background color
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
This section allows you customize the Error Message showing when there appears any information what did not saisfy the Form.
Default Form Error 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
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.
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)
Solid: Applies a single color uniformly within the whole of an object by selecting the Background color
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
It includes Font family, Font color, Font size, Font weight, Line height, Letter spacing, etc.
You can configure the Icon color, size, spacing, etc.
It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)
It allows you to specify the style, width, and color of an element's border
It allows you to define the radius of an element's corners
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
You can configure the Hover Style by turning off the status of Default Hover Styles
a. Background color
Solid: Applies a single color uniformly within the whole of an object by selecting the Background color
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
It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)
It allows you to specify the style, width, and color of an element's border
Solid: Applies a single color uniformly within the whole of an object by selecting the Background color
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
It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)
It allows you to specify the style, width, and color of an element's border
It allows you to define the radius of an element's corners
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
It allows you to adjust the position of elements in the block
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
The ID of a block, which is used in Custom CSS, Custom Javascript
The class of a block, which is used in Custom CSS, Custom Javascript
You can configure the Hover Styles by turning off the status of Default Hover Styles
a. Background
Solid: Applies a single color uniformly within the whole of an object by selecting the Background color
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
It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)
It allows you to specify the style, width, and color of an element's border
It allows you to define the radius of an element's corners
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
It allows you to adjust the position of the hover
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
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
The Business Object attributes in Field are selected Business Object in Template Setting
If Business Object in Template Setting does not be selected, a popup of Select Source will appear.
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
| Fields | Description |
|---|---|
Click con pencil button in Conditions.
ON: The Error Message Style will be provided by the system
OFF: Appear the settings to make your own message style
Field Name
The name of the field, this will not be shown on the result
Field Label
The label of the field, you can choose to display it in the result or not
Display labels?
Turn on/ off the button to display/ hide the Field label
Placeholder
Input the help text which instruct your respondents
Field Alignment
Field ID
Input the ID of the field if you want
Required
If the field is marked as required, respondent could ONLY submit the form if that field is filled. When turning on the button, a text box will appear allowing you to enter the error message.
The position of the label comparing to the text box. There are 2 options: - Horizontal: They are in the same line. When choosing this option, you could adjust the Field Width (%) (including the label and the textbox) and the Input width (%) (the textbox) comparing to the block. - Vertical: The label is on the top of the text box
