> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nomadsarc.app/llms.txt
> Use this file to discover all available pages before exploring further.

# 🔤 Form

How to display **Custom Fields** for the customers on the Checkout using the **Custom ->** **Content -> Form** option.

<video src="https://mintcdn.com/nomads-arc/kh4Xoe0LvyhnwDcH/videos/form.mp4?fit=max&auto=format&n=kh4Xoe0LvyhnwDcH&q=85&s=59e7d254b8331f2e9588c1c6cd8c3a6c" controls data-path="videos/form.mp4" />

## Guide

<Steps>
  <Step title="**Create a new customization**">
    Create a new [customization](https://admin.shopify.com/apps/dynamic-checkout-customizer/customizations).

    <img src="https://mintcdn.com/nomads-arc/Fd5op7EPGuzeRSVt/images/image-38.png?fit=max&auto=format&n=Fd5op7EPGuzeRSVt&q=85&s=1f646d41a424a431a918591ffa82aad8" alt="Image" width="1024" height="533" data-path="images/image-38.png" />
  </Step>

  <Step title="**Choose the Form type**">
    Select **Form** from the available content types to display custom form elements during checkout.

    <img src="https://mintcdn.com/nomads-arc/Fd5op7EPGuzeRSVt/images/custom_content_card_form_focus.png?fit=max&auto=format&n=Fd5op7EPGuzeRSVt&q=85&s=82d9f3c6cc98736cf9ddf66fb0e9e925" alt="Custom Content Card Form Focus" width="2762" height="1466" data-path="images/custom_content_card_form_focus.png" />
  </Step>

  <Step title="**Configure display conditions**">
    Add one or more **conditions** to control when the form is displayed during checkout.

    <img src="https://mintcdn.com/nomads-arc/Fd5op7EPGuzeRSVt/images/form_conditional_experience_focus.png?fit=max&auto=format&n=Fd5op7EPGuzeRSVt&q=85&s=8f72725e20e6d1b41f1fc8fcd7179401" alt="Form Conditional Experience Focus" width="2760" height="1450" data-path="images/form_conditional_experience_focus.png" />
  </Step>

  <Step title="**Configure form settings**">
    Configure the **Form Settings**, including:

    * **Element Type** (Checkbox or Text Field)
    * **Label** displayed to customers
    * **Key** used to save the value in the Shopify order

          <img src="https://mintcdn.com/nomads-arc/Fd5op7EPGuzeRSVt/images/form_heading_settings_add_element_focus.png?fit=max&auto=format&n=Fd5op7EPGuzeRSVt&q=85&s=8f00eaf856bcf491cce2b0960ebf71e8" alt="Form Heading Settings Add Element Focus" width="2766" height="1462" data-path="images/form_heading_settings_add_element_focus.png" />

          <img src="https://mintcdn.com/nomads-arc/QsvrCOFqqSzeMcaO/images/image-(2)-1.png?fit=max&auto=format&n=QsvrCOFqqSzeMcaO&q=85&s=ac2b573fc77593b8f77e7d8c7c648eb3" alt="Image (2)" width="2764" height="1466" data-path="images/image-(2)-1.png" />

          <img src="https://mintcdn.com/nomads-arc/Fd5op7EPGuzeRSVt/images/form_heading_settings_focus-1.png?fit=max&auto=format&n=Fd5op7EPGuzeRSVt&q=85&s=e90be9304fa7db4dc1f64f1d18b9bd4d" alt="Form Heading Settings Focus" width="2760" height="1472" data-path="images/form_heading_settings_focus-1.png" />
  </Step>

  <Step title="**Customize the display**">
    Configure the **Display Settings** to control how the custom form fields appear during checkout.

    <img src="https://mintcdn.com/nomads-arc/Fd5op7EPGuzeRSVt/images/form_display_settings_focus.png?fit=max&auto=format&n=Fd5op7EPGuzeRSVt&q=85&s=cc0f8fd1fe9915bc52ac78e7aa589612" alt="Form Display Settings Focus" width="2766" height="1466" data-path="images/form_display_settings_focus.png" />
  </Step>

  <Step title="**Activate the customization**">
    Change the **Status** to **Active** using toggle button to enable the customization.

    <img src="https://mintcdn.com/nomads-arc/Fd5op7EPGuzeRSVt/images/form_toolbar_focus.png?fit=max&auto=format&n=Fd5op7EPGuzeRSVt&q=85&s=9fb8b31e555c1ba1c554c4a520ab90b1" alt="Form Toolbar Focus" width="2760" height="1464" data-path="images/form_toolbar_focus.png" />
  </Step>

  <Step title="**Set the priority**">
    Configure the **Priority** (0–100) to determine the execution order when multiple customizations are eligible.

    <img src="https://mintcdn.com/nomads-arc/Fd5op7EPGuzeRSVt/images/form_priority_focus.png?fit=max&auto=format&n=Fd5op7EPGuzeRSVt&q=85&s=066ceabb91cb2db6d534fa92699a1a81" alt="Form Priority Focus" width="2760" height="1464" data-path="images/form_priority_focus.png" />
  </Step>

  <Step title="**Copy the Placement ID**">
    Copy the generated **Placement ID** from clipboard icon. You'll use this in the Shopify Checkout Editor.

    <img src="https://mintcdn.com/nomads-arc/Fd5op7EPGuzeRSVt/images/form_copy_placement_id_focus.png?fit=max&auto=format&n=Fd5op7EPGuzeRSVt&q=85&s=98d5f3657b4fb93dab45636562c82c5a" alt="Form Copy Placement Id Focus" width="2756" height="1470" data-path="images/form_copy_placement_id_focus.png" />
  </Step>

  <Step title="**Preview**">
    Preview shows , How this block looks like at **CheckOut.**<br />

    <img src="https://mintcdn.com/nomads-arc/vNSi6Esnt8QhT1VY/images/form_preview_focus-1.png?fit=max&auto=format&n=vNSi6Esnt8QhT1VY&q=85&s=af36db5e874c40643e0fa30b5166ae04" alt="Form Preview Focus" width="2766" height="1466" data-path="images/form_preview_focus-1.png" />
  </Step>

  <Step title="**Save the customization**">
    Click **Save** to store your configuration.

    <img src="https://mintcdn.com/nomads-arc/Fd5op7EPGuzeRSVt/images/form_unsaved_changes_focus.png?fit=max&auto=format&n=Fd5op7EPGuzeRSVt&q=85&s=c6331826c4c714a8c6cf46c8bf4d01f1" alt="Form Unsaved Changes Focus" width="2760" height="1464" data-path="images/form_unsaved_changes_focus.png" />
  </Step>

  <Step title="**Open the Checkout Editor**">
    Go to your Shopify [**Settings**](https://admin.shopify.com/settings) → Checkout, select your checkout profile, and click **Edit**.

    <img src="https://mintcdn.com/nomads-arc/iXpFGcSFUJL7FNKL/images/screenshot_08.png?fit=max&auto=format&n=iXpFGcSFUJL7FNKL&q=85&s=16ba7d2015cd3c1cb9962b0f9665bac0" alt="" width="2852" height="1438" data-path="images/screenshot_08.png" />
  </Step>

  <Step title="**Add the app block**">
    In the [Checkout Editor](https://admin.shopify.com/settings/checkout/editor), click **Add app block**.

    <img src="https://mintcdn.com/nomads-arc/QsvrCOFqqSzeMcaO/images/Screenshot-2026-10-08-at-16.07.56.png?fit=max&auto=format&n=QsvrCOFqqSzeMcaO&q=85&s=6745da4c28654c5e3ccfa91fa1fb1f8f" alt="Screenshot 2026 10 08 At 16 07 56" width="2872" height="1494" data-path="images/Screenshot-2026-10-08-at-16.07.56.png" />

    <Note>
      Make sure the app block is placed in the same checkout placement you selected in Dynamic Checkout Customizer.
    </Note>
  </Step>

  <Step title="**Configure the app block**">
    Select the **Checkout – Form Elements** app block, and paste the copied **Placement ID**.

    <img src="https://mintcdn.com/nomads-arc/QsvrCOFqqSzeMcaO/images/image-(4)-1.png?fit=max&auto=format&n=QsvrCOFqqSzeMcaO&q=85&s=c2b5e217a5f78413e29f4861bac821c6" alt="Image (4)" width="2864" height="1484" data-path="images/image-(4)-1.png" />
  </Step>

  <Step title="**Publish your changes**">
    Click **Save** in the Checkout Editor to publish the customization.

    <img src="https://mintcdn.com/nomads-arc/cqW515qnj7Jw10j_/images/form_elements_save_disabled-2.png?fit=max&auto=format&n=cqW515qnj7Jw10j_&q=85&s=efe9e1c33c67a74e6b2be67e8275e5b2" alt="Form Elements Save Disabled" width="2864" height="1484" data-path="images/form_elements_save_disabled-2.png" />
  </Step>
</Steps>

<Note>
  **Why does it matter?**

  [Sunco](https://www.sunco.com/) uses the **Notifications → Form** customization to collect additional customer information during checkout, helping improve its brand reputation and customer experience.
</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.