> For the complete documentation index, see [llms.txt](https://magecomp.gitbook.io/shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://magecomp.gitbook.io/shopify/apps/codfy-cash-on-delivery/cod-form-builder.md).

# COD Form Builder

The COD Form Builder allows you to fully customize the Cash on Delivery (COD) request form shown to customers on the Product Page or Cart Page.

The COD Form Builder lets you create a custom Cash on Delivery (COD) form and display it on the When a customer clicks **“Buy with Cash on Delivery”**, a pop-up form opens where they enter their details (such as name, phone number, and address).

After submission:

* The order is automatically created
* The payment method is set to **Cash on Delivery (COD)**
* You receive the order for processing

This helps you collect accurate customer information and reduce fake COD orders before the order is created.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FJtjMQ9UO1IqoiQwFYPot%2Fimage.png?alt=media&amp;token=47aefd35-a559-431f-a7be-9b96929e91d4" alt=""><figcaption></figcaption></figure>

### How It Works

1. Customer clicks **Request COD**
2. Your customized form opens
3. Customer fills in the required details
4. Form validates the information
5. COD request is submitted for your review

### How to Add a Field

1. Click **Add Field**
2. Select the required Field Type
3. Configure field settings
4. Save changes
5. Drag and drop fields to reorder them

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FX4DNPyIcFzcd0p2vC89u%2Fimage.png?alt=media&amp;token=f1ea4276-bde6-44d0-995b-fcea9ce8bab9" alt=""><figcaption></figcaption></figure>

Each field includes the following options:

#### Field Label

The title is displayed above the field.\
Example: *Full Name*, *Phone Number*

#### Placeholder Text

Helper text is shown inside the field before typing.\
Example: *Enter the complete address with the landmark*

#### Required Field

If enabled, customers must fill this field before submitting the form.

#### Validation Settings

Used to control the format and length of input, such as:

* Minimum Length
* Maximum Length
* Custom Error Message
* Format validation (Email / Phone)

Validation ensures accurate and usable customer data.

### <mark style="color:$warning;">1. Address (Text Area – Mandatory & Cannot Be Removed)</mark>

The **Address** field is used to collect the customer’s complete delivery address for the COD order.

This is the **only mandatory system-required field that cannot be removed from the form**.\
Since COD orders require a valid delivery location, this field must always remain in the form.

#### When to Use It

This field is essential for every COD request. It helps you:

* Ensure accurate delivery
* Avoid incomplete address submissions
* Reduce return-to-origin (RTO) orders
* Improve successful delivery rates

Customers should provide their full address, including landmark details if applicable.

#### <mark style="color:$primary;">Field Settings:</mark>

**Field Type:** Text Area\
Allows customers to enter detailed, multi-line information.

**Placeholder Text:**\
Example: *Complete address with landmark*\
This guides customers to provide full delivery details instead of a short or incomplete address.

**Required Field:** Enabled\
Customers cannot submit the COD request without entering their address.

#### <mark style="color:$primary;">Validation Settings:</mark>

**Minimum Length:** 10\
Ensures customers do not enter very short or incomplete addresses.

**Maximum Length:** 500\
Prevents excessively long entries while allowing enough space for complete address details.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F4IxkESrLS1LHPGHqe1cd%2Fimage.png?alt=media&amp;token=7c44369c-0241-4ac6-bdc9-bc6e236c9b10" alt=""><figcaption></figcaption></figure>

### <mark style="color:$warning;">2. Full Name</mark>&#x20;

The **Full Name** field is used to collect the customer’s complete name when they submit a COD request.

#### When to Use It

This field should always be included in your COD form.&#x20;

It helps you:

* Identify the person placing the order
* Avoid anonymous or incomplete submissions
* Maintain proper order records

#### <mark style="color:$primary;">Field Settings</mark>

**Field Type:** Text Field\
Allows customers to enter short, single-line text.

**Placeholder Text:**\
Example: *Full name*\
This helps guide customers on what to enter.

**Required Field:** Enabled\
Customers cannot submit the COD request without entering their name.

#### <mark style="color:$primary;">Validation Settings</mark>

You can control how customers enter their names:

* **Minimum Length:** 2 characters\
  Prevents very short or invalid entries.
* **Maximum Length:** 100 characters\
  Prevents excessively long input.
* **Validation Pattern (Regex):**\
  Optional advanced setting if you want to restrict input (for example, letters only).

You can leave the validation pattern empty if no special restriction is needed.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F3uRehmIydvSfJXV7r0h5%2Fimage.png?alt=media&amp;token=0062416a-0076-4472-a6d1-123fafccbc6c" alt=""><figcaption></figcaption></figure>

#### <mark style="color:$warning;">3. Landmark Field</mark>

The **Landmark field** helps customers provide nearby location details (e.g., building, shop, or reference point) for easier delivery.

#### Settings

* **Label:**\
  Field name shown to customers (default: *Landmark*)
* **Placeholder:**\
  Hint text inside the field (e.g., *Enter landmark*)
* **Field Width:**
  * *Half Width* → Takes half row (can align with another field)
* **Required:**\
  Enable making this field mandatory

#### Advanced Validation

* **Min Length:** Minimum characters required (e.g., 3)
* **Max Length:** Maximum characters allowed (e.g., 50)
* **Error Message:** Message shown if input is invalid\
  *(e.g., “Please enter a valid landmark”)*

{% hint style="info" %}
Keep this field optional, but use validation to ensure meaningful input.
{% endhint %}

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FF8WSQnV2jFklgvzzY9sl%2Fimage.png?alt=media&amp;token=f1b5f60d-2924-4398-9f03-e055e586eeea" alt=""><figcaption></figcaption></figure>

### <mark style="color:$warning;">4. Email Field</mark>

Collects customer email addresses.

This field automatically checks for a valid email format.

Best for:

* Sending confirmations
* Follow-up communication
* Additional verification

You can set a custom error message if the email format is incorrect.

Use this if you want an additional contact method besides phone.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F9C9FLcdSX3UxasGlU6rY%2Fimage.png?alt=media&amp;token=57230499-71c5-466c-b921-87b498ba058e" alt=""><figcaption></figcaption></figure>

### <mark style="color:$warning;">5. Phone Field</mark>

The **Phone Number field** collects the customer’s contact number, which is essential for order confirmation and delivery communication.

#### Settings

* **Label:**\
  Field name shown to customers (default: *Phone no*)
* **Placeholder:**\
  Hint text inside the field (e.g., *Enter phone no*)
* **Field Width:**
  * *Half Width* → Takes half row and can align with another field
* **Required:**\
  Enable making this field mandatory (recommended)

#### Advanced Validation

* **Min Length:** Set minimum digits (e.g., 10)
* **Max Length:** Set maximum digits (e.g., 15)
* **Error Message:** Message shown if input is invalid\
  *(e.g., “Please enter a valid phone number (10–15 digits)”)*

{% hint style="info" %}
Always keep this field **required** and apply validation to ensure correct contact details for delivery.
{% endhint %}

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FhgKvCNbhPjjZL72iaNxT%2Fimage.png?alt=media&amp;token=106faa6e-b796-42f7-b8ab-0ecccbfc8ce5" alt=""><figcaption></figcaption></figure>

### <mark style="color:$warning;">6. City Field</mark>

The **City field** captures the customer’s city to ensure accurate delivery and order processing.

Allows multi-line input for detailed information.

#### Settings

* **Label:**\
  Field name shown to customers (default: *City*)
* **Placeholder:**\
  Hint text inside the field (e.g., *Enter city*)
* **Field Width:**
  * *Half Width* → Takes half row and can align with another field
  * *Full Width* → Takes the full row and can align with another field
* **Required:**\
  Enable making this field mandatory for order submission

#### Advanced Validation

* **Min Length:** Minimum characters required (e.g., 2–3)
* **Max Length:** Maximum characters allowed (e.g., 50)
* **Error Message:** Message shown if input is invalid\
  *(e.g., “Please enter a valid city”)*

{% hint style="info" %}
Keep this field **required** and use validation to avoid incomplete or incorrect city names.
{% endhint %}

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FCxTv1AiMLzpWToDj5qT2%2Fimage.png?alt=media&amp;token=eea8175d-d260-4029-a053-e627686e2680" alt=""><figcaption></figcaption></figure>

### <mark style="color:$warning;">7. Dropdown</mark>

Allows customers to select one option from a predefined list.

You must enter each option on a new line in the settings.

Best for:

* Selecting a city or region
* Delivery time slots
* COD confirmation type
* Predefined order preferences

Use dropdowns when you want standardized answers instead of free text.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FFwF6as5Zmbn6bznHQZT7%2Fimage.png?alt=media&amp;token=ac49e829-43b1-43fe-8702-57186b8a5938" alt=""><figcaption></figcaption></figure>

### <mark style="color:$warning;">8. Checkbox</mark>

Allows customers to confirm or agree before submitting.

Best for:

* Confirming the correct address
* Accepting COD terms
* Acknowledging COD charges

If marked as required, customers must tick it before submission.

Use this to reduce disputes and ensure customer acknowledgment.

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FMVSIIH6dnB6akzQFTScu%2Fimage.png?alt=media&amp;token=a7905893-545e-4776-b650-c39b17b49bcd" alt=""><figcaption></figcaption></figure>

### <mark style="color:$warning;">9. State Field</mark>

The **State field** captures the customer’s state/region to ensure accurate delivery and shipping calculations.

#### Settings

* **Label:**\
  Field name shown to customers (default: *State*)
* **Placeholder:**\
  Hint text inside the field (e.g., *Enter state*)
* **Field Width:**
  * *Half Width* → Takes half row and can align with another field
  * *Full Width* → Takes the full row and can align with another field
* **Required:**\
  Enable making this field mandatory (recommended)

#### Advanced Validation

* **Min Length:** Minimum characters required (e.g., 2–3)
* **Max Length:** Maximum characters allowed (e.g., 50)
* **Error Message:** Message shown if input is invalid\
  *(e.g., “Please enter a valid state”)*

{% hint style="info" %}
Keep this field **required** and use validation to ensure accurate regional information for delivery.
{% endhint %}

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FKquLd0Kq0XA2ubzcjzyE%2Fimage.png?alt=media&amp;token=c24590b4-f7eb-49c0-8894-f0494642724f" alt=""><figcaption></figcaption></figure>

### <mark style="color:$warning;">10. Pincode Field</mark>

The **Pincode field** captures the customer’s postal code to determine delivery availability and apply COD rules.

#### Settings

* **Label:**\
  Field name shown to customers (default: *Pincode*)
* **Placeholder:**\
  Hint text inside the field (e.g., *Enter pincode*)
* **Field Width:**
  * *Half Width* → Takes half row and can align with another field
  * *Full Width* → Takes the full row and can align with another field
* **Required:**\
  Enable making this field mandatory (recommended)

#### Advanced Validation

* **Min Length:** Minimum digits required (e.g., 5–6)
* **Max Length:** Maximum digits allowed (e.g., 6–10)
* **Error Message:** Message shown if input is invalid\
  *(e.g., “Please enter a valid pincode”)*

{% hint style="info" %}
Always keep this field **required** and apply validation to ensure correct delivery area and COD eligibility.
{% endhint %}

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FoQcQdAKhWwkv8p4bbLQl%2Fimage.png?alt=media&amp;token=415aa360-56e1-447a-8cd5-db9a929d2267" alt=""><figcaption></figcaption></figure>

### <mark style="color:$warning;">11. Order Note Field</mark>

The **Order Note field** allows customers to add special instructions for their order (e.g., delivery preferences, timing, or additional details).

#### Settings

* **Label:**\
  Field name shown to customers (default: *Order note*)
* **Placeholder:**\
  Hint text inside the field (e.g., *Enter order note*)
* **Field Width:**
* *Half Width* → Takes half row and can align with another field
* *Full Width* → Takes the entire row for better visibility
* **Required:**\
  Enable if you want customers to обязательно provide instructions (usually optional)

#### Advanced Validation

* **Min Length:** Minimum characters required (optional)
* **Max Length:** Maximum characters allowed (e.g., 255)
* **Error Message:** Message shown if input is invalid\
  *(e.g., “Please enter a valid note”)*

{% hint style="info" %}
Keep this field **optional** and allow enough character limit so customers can clearly describe their instructions.
{% endhint %}

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2F6MTbi8ij9SyymX7ghGtz%2Fimage.png?alt=media&amp;token=910c0b3f-73e5-4d4c-bd30-02b91518d38e" alt=""><figcaption></figcaption></figure>

### <mark style="color:$warning;">12. Date Picker Field</mark>

The **Date Picker field** allows customers to select a preferred date (e.g., delivery date or pickup date).

#### Settings

* **Label:**\
  Field name shown to customers (default: *Date picker*)
* **Placeholder:**\
  Hint text inside the field (e.g., *Select date*)
* **Field Width:**
  * *Half Width* → Takes half row and can align with another field
  * *Full Width* → Takes the entire row for better visibility
* **Required:** Enable date selection to be mandatory

#### Advanced Validation

* **Min Length / Max Length:**\
  Not typically required for date fields
* **Error Message:**\
  Message shown if no date is selected (when required)\
  *(e.g., “Please select a valid date”)*

{% hint style="info" %}
Use this field when you want customers to choose a **preferred delivery or pickup date**.
{% endhint %}

<figure><img src="https://922942541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGRcMuVZCEGNibOl1OmW%2Fuploads%2FveQ5GadJoN4RrfpwV9Ur%2Fimage.png?alt=media&amp;token=4bb2169f-28d4-417a-9be4-812f0d57f9df" alt=""><figcaption></figcaption></figure>