# Survey Form

How to display <mark style="color:yellow;">**Survey Form**</mark> for the customers on the Checkout using the <mark style="color:yellow;">**Notifications -> Form**</mark> option.

{% embed url="<https://drive.google.com/file/d/1qjim-C2V6yShMHh57Hf9pkQ5qo1Vyf2n/view?usp=sharing>" %}

## Guide

1. Create a new [<mark style="color:yellow;">**customization**</mark>](https://admin.shopify.com/apps/dynamic-checkout-customizer/customizations).

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FJHKzAPLWRIyFOR6wbgTw%2FScreenshot%202024-03-19%20at%204.28.55%E2%80%AFPM.png?alt=media&#x26;token=09597a9e-785e-41df-9783-94a51af138cb" alt="" width="563"><figcaption></figcaption></figure>

2. Select the <mark style="color:yellow;">**Notifications**</mark> category.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FvylH5XcTocxnvUa7MzjE%2FScreenshot%202024-03-20%20at%205.16.22%E2%80%AFAM.png?alt=media&#x26;token=567b5b61-9491-432b-838d-ccb40d1351f6" alt="" width="563"><figcaption></figcaption></figure>

3. Select <mark style="color:yellow;">**Form**</mark>, a notifications type from the options for displaying the form elements on the checkout.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FBEgcdqxHR7WoygleHOCf%2FScreenshot%202024-03-20%20at%207.38.16%E2%80%AFAM.png?alt=media&#x26;token=8445a743-900f-4f00-9fb9-275e47e69f81" alt="" width="563"><figcaption></figcaption></figure>

4. Select <mark style="color:yellow;">**Dynamic Render**</mark> option from the given placement options.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FS68fyQrBwfwZxtIJxpQX%2FScreenshot%202024-03-19%20at%204.50.55%E2%80%AFPM.png?alt=media&#x26;token=3904ceed-ed00-4f2c-9af7-fa963fc96a6f" alt="" width="563"><figcaption></figcaption></figure>

5. Add multiple <mark style="color:yellow;">**conditions**</mark> to handle the visibility of the customization on the checkout.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FAaMCmg65BW4ahC0ewv7C%2FScreenshot%202024-03-20%20at%207.42.12%E2%80%AFAM.png?alt=media&#x26;token=6fbfaf3a-6847-490c-89e1-942013bb59ef" alt="" width="563"><figcaption></figcaption></figure>

6. Adjust the <mark style="color:yellow;">**Form settings**</mark> for the form customization block which includes element type (<mark style="color:yellow;">**OptionList**</mark>), <mark style="color:yellow;">**label**</mark> for each form element, <mark style="color:yellow;">**key**</mark> for saving the value in the Order details and <mark style="color:yellow;">**block checkout**</mark> to reject checkout if the field is empty. You can add multiple options for the Option List.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FuHJTntIWHkMCpEcfEzIw%2FScreenshot%202024-05-16%20at%207.28.52%E2%80%AFPM.png?alt=media&#x26;token=359a5789-fb5a-4c5b-a308-a1caf2d50794" alt="" width="563"><figcaption></figcaption></figure>

7. Change the <mark style="color:yellow;">**status**</mark> to active to enable the customization block.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FF5pQkjXIRuyYE8r0l4Hz%2FScreenshot%202024-05-16%20at%207.27.46%E2%80%AFPM.png?alt=media&#x26;token=836eb2a1-9dc8-4d49-af46-0fe1fd39410d" alt="" width="563"><figcaption></figcaption></figure>

8. Adjust the <mark style="color:yellow;">**priority**</mark> between 0 to 100 to cover multiple use cases for the customizations.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FuHJTntIWHkMCpEcfEzIw%2FScreenshot%202024-05-16%20at%207.28.52%E2%80%AFPM.png?alt=media&#x26;token=359a5789-fb5a-4c5b-a308-a1caf2d50794" alt="" width="563"><figcaption></figcaption></figure>

9. In the <mark style="color:yellow;">**placement**</mark> tab, copy the placement ID which will be used on the checkout page.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FafHKt57O99sfe42ZxELM%2FScreenshot%202024-03-20%20at%207.57.54%E2%80%AFAM.png?alt=media&#x26;token=3546dc75-a920-4675-9604-9e34d335bd43" alt="" width="563"><figcaption></figcaption></figure>

10. Click on the <mark style="color:yellow;">**Save**</mark> button to save the changes.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FpsyskL71Qn9S5OTTZQ7G%2FScreenshot%202024-03-20%20at%207.58.50%E2%80%AFAM.png?alt=media&#x26;token=6112803b-ab47-4e18-9285-7302d637e205" alt="" width="563"><figcaption></figcaption></figure>

11. Go to store [<mark style="color:yellow;">**Settings**</mark>](https://admin.shopify.com/settings), click Checkout and then select a checkout profile and click on <mark style="color:yellow;">**customize**</mark> button to start the customization process.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2F9KOT58HXMkhI83SDflBI%2FScreenshot%202024-03-19%20at%205.15.47%E2%80%AFPM.png?alt=media&#x26;token=f9ad30f4-17ef-4bfe-bc1f-2ff5544e08fb" alt="" width="563"><figcaption></figcaption></figure>

12. In the [<mark style="color:yellow;">**Checkout editor**</mark>](https://admin.shopify.com/settings/checkout/editor), click on the <mark style="color:yellow;">**Add app block**</mark> button located at the bottom left corner of the page.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2Fz0D4MME6G1vdVeVl2Hzj%2FScreenshot%202024-03-19%20at%205.17.13%E2%80%AFPM.png?alt=media&#x26;token=10bf7a11-b7a7-4975-9b0b-080e80995362" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
Make sure you that you have placed the app block at the same placement as selected in the app.
{% endhint %}

13. Select the <mark style="color:yellow;">**Checkout - Form Elements**</mark> app block, drag and drop the app block at the desired location and paste the placement ID to view the customization block.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2F6sTQ9yXhiUUQrCMfx5EC%2FScreenshot%202024-03-20%20at%208.00.33%E2%80%AFAM.png?alt=media&#x26;token=0fab3cbe-0db9-4fe0-9541-137515648dc6" alt="" width="563"><figcaption></figcaption></figure>

14. Click on the <mark style="color:yellow;">**Save**</mark> button to publish the changes live for the customers.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2F5VScxz8qH86QP4ZFGT98%2FScreenshot%202024-05-16%20at%207.32.13%E2%80%AFPM.png?alt=media&#x26;token=14df6da8-5b60-4211-a073-e4dc744c6786" alt="" width="563"><figcaption></figcaption></figure>

## Why does it matter?

[Sunco](https://www.sunco.com/) is using <mark style="color:yellow;">**Notifications -> Form**</mark> customization for displaying Custom Survey Forms and improved their Brand Reputation by <mark style="color:yellow;">**10%**</mark>.
