> For the complete documentation index, see [llms.txt](https://docs.antsomi.com/cdp-365-user-guide-en/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.antsomi.com/cdp-365-user-guide-en/marketing-hub/media-template/settings/blocks-and-settings/optin-fields.md).

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcHocDIRf8H7oJ46OdULmL0xqUR0WOh91N--JrmdAPK4LYsvy0c6AdCMIo5e80yJq5-U8MnYJrkxp1K4FkLRwVBsGnwNWjSKpX8bjuY056Iql4eVzgr1Z1xp8GGt-3IVoyUsXzZuhsnPXpd7uyUJqUAYas?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

After adding Optin fields block, it appears as below:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcnD1GtIDFJ93ohF3svD61OVCXluiLLmbpCNZ0sDnRQA5s3jEGr2bu5byhTKZZN06vl744uA82-FlPZaZN_a_nZeMVceZleLetWMF9-aCkX52JkXsth840yf-6C7l0ugZXW7cvCiWYeg_l91oRaV8uTzYo?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfKgj3mD2F1XNvqvhya2urtOKHeGJwe9cXKdEI5h6HcEU5xH6vH1an_S5woHJDzbkVUXG9yh5edU0543JQhjcxRfyDetXqIwjzwa9yBdGr7yIA5wJlvqs7QtONiuMfODDV0_tVkjM-uxN1kpyWyC_27bKFT?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

**a. Display labels?**

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXefU9EVsQbwFzVFjKhdw6kYY0Bkk6_fNnE0mmuU87EDgKdtzxDXSNGFn-t234cily4QCy3hRWLv4ONujAW-8XmrRd3USOXOgJZzXeSRP64RPbcajGu0i1i2_oRmnY78FsUrW1VLS-1H97o1gvLwefhzRtVZ?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

**b. Add & edit fields**

* To add more fields to the template, click ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXc3qu_Gi-tCrTWbMRM9wdiO-Bl77-Mr_wADPR2hgyz35y_UYi5lZ1At_8TQEwa0xJdO4cqdX6gokDPvJC4F_0FLY3yEGVNg1y5RyQYVJKrW0mhuZxk00KQQdqFApCPJVTfxxUUGbNY0_ruOv2CDVvJT8mVZ?key=McWN_Lv9ZK-QuQzVrY3nVw) and choose the fields you want.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdms3NWpunI0oW24m2SIWHk3DwW5TeK0DVKxd-sx-V1mTUkMJ8DjK-Ctws-xboiys0ZNSN-HhGzgBpHJbfXTBx-geWw_dmzLA6VfKLvG_yP4kCJrX6ZOx2hwHFsLvABovfIs85r8OlxC0yITU9ne9is3PV3?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

* To show/ hide a field, click on the <img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2FKNZ8PSF8awgYZedTUYJE%2Fimage.png?alt=media&amp;token=008ac69d-2a57-43dd-a37e-b55c12eb0c80" alt="" data-size="line"> icon

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcnT3GRrDhncHA305pv6_6huJBhQkg7ccnoNP2_Kb9Xl-0XOZe8jaTw2L7yxWW4rW3ARsLRfXb1lu6NbwSHb91Ms90awyu0OjLCwuP7BMhXPJMkw6_W7vfIxuWFqRUL19_ICApPtaDPVp71zspuPD_evf4?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

* To edit a field, click on the <img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2F9JgmQXwaPH9n9QygFYAf%2Fimage.png?alt=media&amp;token=19ea69cc-c3a7-46de-8cff-08b9aa92c43d" alt="" data-size="line"> icon and adjust in the pop-up

***General settings***

***These are the settings having in most type of fields***

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcSU4_8mTRx-g7JBJPgq3PFY_6yh0PQ1xvT0G0GNCY-01sG0QEGyD4ASw9Fxwc-yVF1yk8wCUwF5rrCP7UiVWSG347Di4FqCJVBuemNWSFNUC95Vyf02wVT9RWc5JM8efB-fY8J-2tdlk791oyA3Qh__z-2?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="178">Fields</th><th>Description</th></tr></thead><tbody><tr><td>Field Name</td><td>The name of the field, this will not be shown on the result</td></tr><tr><td>Field Label</td><td>The label of the field, you can choose to display it in the result or not</td></tr><tr><td>Display labels?</td><td>Turn on/ off the button to display/ hide the Field label</td></tr><tr><td>Placeholder</td><td>Input the help text which instruct your respondents</td></tr><tr><td>Field Alignment</td><td>The position of the label comparing to the text box. There are 2 options: <br>- <em>Horizontal</em>: 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.<br><img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2FSbvuxgdtVPZ4PYUXiUMZ%2Fimage.png?alt=media&amp;token=7b2dd183-9a93-48d3-a105-c806bebbbfbc" alt=""><br>- <em>Vertical</em>: The label is on the top of the text box<br><img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2FnBLCcoSLPW5yCkA4dU2T%2Fimage.png?alt=media&amp;token=e6148864-d748-4023-b073-303d94e1b3e6" alt=""></td></tr><tr><td>Field ID</td><td>Input the ID of the field if you want</td></tr><tr><td>Required</td><td>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.</td></tr></tbody></table>

***Specific settings***

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

* [*<mark style="color:blue;">**Email**</mark>*](#user-content-fn-1)[^1]
* [*<mark style="color:blue;">**Phone**</mark>*](https://docs.antsomi.com/cdp-365-user-guide-en/marketing-hub/media-template/settings/blocks-and-settings/optin-fields-1/phone)
* [*<mark style="color:blue;">**Dropdown select**</mark>* ](https://docs.antsomi.com/cdp-365-user-guide-en/marketing-hub/media-template/settings/blocks-and-settings/optin-fields-1/dropdown-select)
* [*<mark style="color:blue;">**Datetime**</mark>*](https://docs.antsomi.com/cdp-365-user-guide-en/marketing-hub/media-template/settings/blocks-and-settings/optin-fields-1/datetime)
* [*<mark style="color:blue;">**Radio button/ Checbox**</mark>*](https://docs.antsomi.com/cdp-365-user-guide-en/marketing-hub/media-template/settings/blocks-and-settings/optin-fields-1/radio-button-checkbox)
* [*<mark style="color:blue;">**Privacy Notice**</mark>*](https://docs.antsomi.com/cdp-365-user-guide-en/marketing-hub/media-template/settings/blocks-and-settings/optin-fields-1/privacy-notice)

### 2. Submit button

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcptHYLohqb6uZhbCQ9CMcnjkVWy1XzApKLmaQXCcUa_dMzlfjNVS3QudZzxtgO-zsewwQoRLa-MHtkZnKhvR__Gq4lU1egIACwYxYdcdF_Lc-hMgGRbVcdPNeXIpF99jtpQhvB2vTfKafZviWYlGixYVE?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

✔️ **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:&#x20;

1. *Go to Vie&#x77;**:** Go to a specific view of the template*&#x20;

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXco1HOCGQOAgxiIuUBzl6QPv8HRIBwMsdTrjk3NzoMtw5c-QA9FIvE0-qJuokJnb_DGkFhdY7YNWeVdGAgQMq94d625TLzyIkT6X5qyJPTwc49w-43XvXkg2Ee74yT5hdS8nmwzi5hTO54xINfjtu98Xms0?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

2. *Redirect an url*

* *Static*: Enter text

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe1vk-x1lVQKQ0cNcf0gLEB-SN1411dxoe8by4f9nF85CBo06TQt6Dcum7evavwy-95IlHl0L8bLIHu7i-LEzh3qic2LijPWlVUYePbAcdu5aDTgMeqouhRv8MgV7OzZcttq2HRcs88wvtg5Y9RNmES4-ld?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

* *Dynami&#x63;**:*** Select field and index

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdsrBDjuOUa8YGnOUVf9QL5RY1X_fMU3pRT9K29D5FZGrSBpDAwnjfM8SxVDuSmdO5tzPXjPrdz0j4xBUrWbngxm8O0Dv-cn0s3t9XDtzfxptqU1GESpAudFqRVa1zG_aMaT-q9gaM-A-ErcQcTFDuPq7Ez?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

3. *Open email client*

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdphEglF23H7Vnrg7xVgUJapKSLOIHX0iYC1zN73PftITlWfpBn2k81JmEvQSafYOMDvuTYakWE_3zsZbfz0swhl1rQ87obwMEWSmF8yuos27WstE0efwjZLUoXZ-KeIIVtoGKdFp80bq_aQ2q27iAUcZJf?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

4. *Click to call*

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXddei70mX5NwmwFnpdAW9lgXZVupu7ZXp58e_PfKNgYeWGeWGSeHHFqk6zsW-iYysvq24xxR8dUHH7hJBi5wH7NkKLbdMt_D0b-ubsf0X64Z4awkHIsMB6db0fjpI3sdO3pvxaot9Yelzt-pqUJEk5inEJ7?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2Ffz3JqxBveZ40IvknADBD%2Fimage.png?alt=media&amp;token=8e917c88-aa37-4ad8-a7ba-7de4f7106615" alt=""><figcaption></figcaption></figure>

6. *Reload the page -* Reload the current page
7. *Open in the new window*

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfX-JGhU0Q1_CVGUvU_YEgN6bxHrMJExpFRoQmope1mF3m1i0I-r4F_stEPtylSE3MnuYhF-H5iQJ-3cTpY3pNSLNJnmSemr4WtztYP6qXyT82-sQ7IRfG7I_qBKZQGAtR31uzH2VKDZ-1GtYSsmfo1dL8o?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

✔️ **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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcF10RZJWnkqy-85ODkr1aVL-u4Ch_YixehAZEqlTrs1kxWeSF_KNeY58yOFMBuijcKicO-lr7_0yws9CM2CO0AeJM4HRIAPa7H5cRXm9GJsiD5aQSZJu2uqbdhPdb29XHNStP5f5YlWjB29PbDod-nXOYt?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

### **3.** **Sync data to Event & Business Objects**

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdyVVMCl0pmPyVn4MhiXuTQWR_1I5jTGbWIVK0HDthjSU5J9UvitHIdTM0BxU9IzwUO7hHaCG-MHHXtrmX-FTqekOT1xVqjyqc_rIbtv05YsI-YHFZKsNrMbEVHy3M-58jc0ZAFJOeCIeBvo4Df9x-bTss?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

* **Source:** Choose the desired Event Source&#x20;

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcbatAnPz9Rk9c-ulta_EAQKGZi1hVjNfo78ZMCAf0HrMr6etO22qQ6VVf6YBj_3L1FlK-bXNqmhwusFUpxY8ctaAte5Lrfr4l7rrOXttJbweBE6TCP-OmolcMe75K_jJfBbmwoAyxot-8cjMh1mGG75K1w?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfUN8BCyrO4Bw9SMH1zW8MxJrX-LDBmxRiDxwdiUdIeCP9tHp-eSSbCGRTDg1QFTxM1zC0t96I8PXfdPhmqaQ-57bw7ASGDCVU6DsrYQ5kJ9nH3p2PzCxItZR5vyU8xO7MCLIoZU-9thAT2fOOYep0i9nmt?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

* **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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcbMgTfw08oR9p1_7kJ_iWG6kpNUstWt9pAS9Cv3w03UjLsgNaD5EJ28oXwI3sn8N6C4Y3I9JHx9c8qicINtILyIqGwSRB4CvJQfa1Jc7k7S2L88BKKdXXBVXT9joPzEiiSIXCdMZA7ar0mEIwttisJSoa9?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

**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.&#x20;

* **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 & updat*e: 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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeQ6AWeqBhpjYJkHB2U33uF-47DPxhzu6ariDrteLLgIScEkMA62Xg5zEt4u3W_aN02yDVHJQFypHnXeorJtF3Omojz0mm6FFbq3NpyZJ2Em8FA5Rqruj1Wm5MV__euJDNs-wIJUIOvYZGvqKyuO8y0xhau?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

### **4.** **Success Scripts**

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfOaN675ARtxl4E0TD4STalSsa33EUlFFVT7Z-6bXeLAiUvP_sDax45EPpbkgyPHnYrctWMuwnGNZ_c0xhN3h91gLXpz9DMpEC5ugBJwQhlZ1tfLSKf2Qx_kGk_X5deYltfxW2Cm1Ek28emsgg9EAQ38em6?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

### 5. Verified Submit

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXduV5ivNhmnRJugVe3_IS7gWLJtp4ikcp_CDN4_3EHMe3EuTPw4i4SlUMWTZcDZENqlR5RbgXvHx8G963-5dEMyEdYcwAcW8TTD5MgBG9ofF5dpjmwV0e4eouDWAdAupAJ1z9M-gYtGMX8Hg7W0XvkFDnbD?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

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 <img src="https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2FE6GaNC3RgkDfB722A6EL%2Fimage.png?alt=media&amp;token=c5947ff3-f944-4139-b271-aff12120e538" alt="" data-size="line"> in Conditions.
2. After clicking, the pop up condition will appear as shown below

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfU0Gp6e0XibkvQ7VNcGpksr9fx1D57ys9S2j0FuWpoHRFyiaB5O0STayETNf7qo0tE81tPcBIjeG6zJYj58gCXR-SKcDnRKQnkxBTDHRY0lSivuZESNg5VjKBhhc3gStZY2HtagJ0KmmKxp-OBR33NyPoI?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

* (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.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcnqLmFHtJMlvmPfbHihYaQDBYGbwlPnjIOO48QdyG4m_axVHF612vCwfd6aZ9WLeMISwRyWXEI4RfXXulSW_KCw674bVXyyXBceinAVdxYJPQDhT3anUB3WAooJiQJCCZiKroo3TfumLcZM4E7VwTuVuw?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

3. Set the conditions and click **OK**
4. Input Error Message.

## B - ADVANCED&#x20;

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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcHwk4dddOkMN_vsTcG_1ps8ZLmsE2PlO8dcA4Si80feKjqkIfl7uVkjZIE2AsvaOnkhcYwqwYZ3PHHhbxzl8oskpZpKqxZGeVjHdeDhR3shaDge9cDKkHpoYlDFVxMcTSO-RIgltqMauDMtwnT81BWjgBP?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

It includes 6 sections:

### 1. Form Fields Styling

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcQqPZJ0UoLrmDS75lBn-U8bd8zaTOHaL2pF0IMA2A8JurZcvOw8VB7lUv_6VK5M6dSe9lexZ5k1WQEIy99LTYET4_2pzXEUV5zj3S2-8r0NSkYckbbEHCIhtLnFiuznzoDaBho1JZIgAhZwbhLINVC2L0v?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

#### a. All Form Field Styling

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXc-NGrcYFfg-zEGK_jNHkRHzL3m5Z1nHJC-sOHd3bx0eKxHwMU5L82YFsz0PCgQQihrxsheXnFbOjH9GazB9w5Wfdsp1aQHwLb7S6jcnP6QW0E4ZFFg_ZSW8SGtzcLcrhEgb7hGRVNN254voEwHTvoS2MEC?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

* ***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***:&#x20;
     * ***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.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcrCX2F3Iqv2mxHakWk1UuqGCxfLf3nKQCt0tg01TIUitmHciw8ixGGnNPoepC80kBVRNcpPsOLaU3xfgSZJpq9PEizD-X-uJK47-fz4RS6A2L9UyOmA3-avuAOU11aAEJ-mPSqIr1U1YcVj1QnhwdJofpT?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

* **Default Form Error Style**

![](https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2FaG0aZYDEs92ElzmDLsMz%2Fimage.png?alt=media\&token=040fb0d2-250b-47e6-bc45-dd865f501f72)<mark style="color:blue;">ON:</mark> The Error Message Style will be provided by the system

![](https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2FzyLeQ5rZ1sei2qMVSYyZ%2Fimage.png?alt=media\&token=f620d1ef-ff19-4cd3-b305-d29d33a63753)<mark style="color:red;">OFF</mark>: Appear the settings to make your own message style

* **Background:** Adjust the background color of the error display box&#x20;
* **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&#x20;
* **Border:** Adjust the border color of the error message&#x20;
* **Rounded corners:** Adjust the corners of the error message&#x20;
* **Spacing:** Adjust the distance from Error Message to the Form&#x20;

### 2. Field Label Styling

This section will customize **all** the label in the Form

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdgjMuXj23P48rheQRyNwHA3EgiR8x6nkHq-MDg-Gzs3ezs1YJ2oBbJNHCJ2oZbSxU9o6OgxxFvISTyZg4f1Iw2Moz4sSAbQxl6JOq54y-JnhYIVFM2azjZgLkZnB2ZqB-SUzFze5ck2Defkfjv0HHZpLv5?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

* **Align:** The position of the Field label: Left, Right, Center&#x20;
* **Font setting:** Font Style of the label
* **Gap:** The distance between the field label and field box, including

&#x20;            ➡️*Column:* Applies if the label and textbox are displayed vertically

&#x20;            ➡️*Row:* Applies if the label and textbox are displayed horizontally

* **Indentation:** The indent of the label.

### 3. Checkbox/Radio button Styling

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXebtuHwhHw9ibmueax5lTC4pMVMpIK-imV-LGtTSZU6KWSx6DM03xGQ8bnonjuu56X-Q8HseLq-29B9m-dZmEXgN5i0HlUqz4aa0YgaYibN9PD4LNkTVcrDMSJiUbTnjfbJuv4x3d48V0Jx9yS9yd1gngR4?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

* **Field Alignment:** Adjust the display position of the option label with the button&#x20;
* **Font settings:** adjust the font style of the option label
* **Option Label Gap:** Adjust the vertical distance between the option label and the button.&#x20;
* **Line Height:** Adjust the distance between option lines&#x20;
* **Column Spacing:** Adjust the spacing between columns (Only displayed when there are more than 1 column)

### 4. Submit Button Styling

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcyniuYvRsIJvl6W6hoL85aXdkBbhM2uhmSZaqizjka9lkCTmaGqoSAJyQvMtT5dBHfWo2R1mEnKas63D0f2xQ-JssDEo6TnkB675vJ3d4xywtEONgLmFMKvFp-rh1wPbPyTCKxzOvEoWwJA9QSDn66d-jR?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

#### **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***:&#x20;
   * ***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***

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfGwXJ6kJmE5D7EfkORqIrsgR7L8O9jf6XgW-RrD-5vwOhkFh0FTXi6JmvZ2vMjH_lZpaDZmk-LMc3GrvrcY4kxyYscMdWyrcNdVUGRNcUsdcquOpI7ukZSnrYxxYbI5N2Q-n2PTEOcH3twYKhPHj__qJxu?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

**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***:&#x20;
   * ***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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfkspdg9TzUAfSWG6RdfGpQIJb4xA_WKkgW3OmsdXTRUVmuMkkW19WaQMmq6RzeA8Ue2KiEt7g4L7fRpIaH90p3_q1ripUxzDBrMXp97MVNkcVBHVFUYsfvgqPY6GviD-HrJKbdJHe7ox2yIyY9gHhHhiQv?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

#### **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***:&#x20;
   * ***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***

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXczKaDxlXMuap5faYpER5L6S2xyav_AMzd81AcG8PZP0otiAFk_5Et2Y-o9cDQUCTkQz2_JGzly-LeF-Zf7amRzyiEobBXBtsfeUnyJOI7dAl7MLOvF83-oseBdlwZgzIL3WRmUKgoR0oxtftZVeyJRCz2G?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

**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***:&#x20;
   * ***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

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdkHilZeXiWYYa3EL5O2_aTpn0vNNMSwU_Q6WBS96ISyQOno2Y193airBED_asJ7VkRNWcsuTppNqs2wGY7X3P3jk4S-_hCAXTxVnXemEi4cyfdOy8dUqPpsAyRYlp5EZNUkcdciTT_1-4eDyvWBqdi3HA?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

* ***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***

{% hint style="info" %}

* The Business Object attributes in Field are selected Business Object in Template Setting

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXfcbxiQT_xwtXaEBXBIbqdmhN3CU0TCJDQcB5aLDp4fHM-S-dxCetog1uh55yzZHcxDkfYNbzmt-Hvf-cIsk2lrBJn6y18RwXxFzoSHejXplJAKRcJfi-us9A5f4ii-rpudJ5iHSOVhZaQnRFnJQ7x3wDs?key=McWN_Lv9ZK-QuQzVrY3nVw)

* If Business Object in Template Setting does not be selected, a popup of ***Select Source*** will appear.

![](https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2FHoqMh8meoZ2YxlM49t56%2Fimage.png?alt=media\&token=e8b4de57-ff0c-49cf-b0ce-690b417f1ce2)
{% endhint %}

[^1]:


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.antsomi.com/cdp-365-user-guide-en/marketing-hub/media-template/settings/blocks-and-settings/optin-fields.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.