> For the complete documentation index, see [llms.txt](https://docs.optis.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.optis.me/product-options/20-option-types/text-input/email-field.md).

# Email Field

{% hint style="info" %}
**Plan:** **Email** is available on the **Advanced** plan and above. On the Free plan you can still try it on one live product with a Premium option set. See [Plans and feature availability](/product-options/getting-started/plans-and-features.md).
{% endhint %}

### 1. How Does the Email Field Display? <a href="#id-2-1-how-does-the-text-area-display" id="id-2-1-how-does-the-text-area-display"></a>

The Email option displays as a single-line textbox, specifically designed to accept valid email addresses. It automatically checks for proper formatting (including "@" and a domain).

> 📝Note: Customers can only enter a valid email address in the Email Field.

Example of how it appears on a product page:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FkEfsD7En80auRektkXjv%2Fimage.png?alt=media&amp;token=994323d3-5852-4394-933b-a80a8ecfa0b3" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe7O4QeCmcDzkX54FOUR-mARwMAmjxY-4q41vto4toOHmvrODTZlsot-fvAadgy4h5t0w0MnXmTYi8PnkSvV8hHT-Zpl4vCfzJtuxSualS2SW0ARakENNrFVKNQBYqLnjMciQhkwQ?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

A notification will show up if customers do not enter the correct email format:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FBclnZxk1oTMQgKsmxQzJ%2Fimage.png?alt=media&amp;token=fae483e8-5764-4a98-9200-9ff50f951964" alt=""><figcaption></figcaption></figure>

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

### 2. How to Create a Email Field option <a href="#id-2-2-how-to-create-a-text-area-option" id="id-2-2-how-to-create-a-text-area-option"></a>

**Step 1: Add a New Option**

* Open **1. Add options**, click **Add option**, tick **Email** under **Text input** on the **New options** tab, then click **Add options**.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FnGaqznnR0Koevt5envVQ%2Fimage.png?alt=media&amp;token=9e4c27b9-7b1c-4103-bfb6-07eb4181ac6f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FzdBigZIAx96ctTuCcFZU%2Fimage.png?alt=media&amp;token=2d90508a-b5de-45ef-94fa-d720ee5a2d37" alt=""><figcaption></figcaption></figure>

**Step 2: Add information to the Email**

* Enter the **Label on product** (e.g., "Enter your email address:"). Use **Label on cart** if the cart and order should show a different name. Tick **Required field** if customers must fill it in, or **Hide option label** to hide the label.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2Fmrn6m7bAD1e3pa6L3uwg%2Fimage.png?alt=media&amp;token=e2a29fc4-0ed1-4976-a9c5-64a8fa54dd0a" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcWU4UciupWhPehGHn-jDInGoq4CczmOMAb_mKGl345OL6BDrtP9LEItUyK1G5dx7NWPuHsotIF9f_bRX7hVEGrHMMtgb5bgsp4QRdaKhYMuKpVKBUBeOtLsI4zok01s5qY_PlLsg?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

**Step 3: Set the target of Price add-on in Option values (optional)**

{% hint style="success" %}
Price Add-on feature will help you add extra fee for options customers choose.
{% endhint %}

How the Price add-on will look on the storefront:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FBT2OKs83cbmj5DJXLUGt%2Fimage.png?alt=media&amp;token=6e26479c-86e4-45c5-b8eb-c8ad816f360c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXc8q_W1bZhCT_ddGNU58h1zocbSDqGJxrkko7g3xJTf0cG3Y5o3GbiauOvNCWVIKuEuVHRzXM1U4wxCqnGNxprTpJgReewEO7BiUuhG0_WKlmGeF08LiJzvzsXMafulL3MTpqT-KA?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

* If you choose **Extra fee**, see details of this feature in [How to add price to options?](/product-options/advanced-setup/other-popular-features/manage-add-on-additional-fee-for-option.md).

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FBsdyjPgNba7b53JAzSMp%2Fimage.png?alt=media&amp;token=af84983e-d193-4d2a-90ca-d8d093b7eadd" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdwpImaZfNBARqilv2kPCwPdt0VlraGAKBE9vUGZ-D11yq8UwkuAvfReyuLkrQ03NHSS6e4mMF10sSaawQBG0xIbsHx7cLbGi9U5uerRuF8AJ3CXkg7pkqt06yfUXs2mUjtctdBdQ?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

* If you choose to Upsell product, follow [this guide](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value.md) for more information.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2Fwm8ZKerppVW4MvfD2Fe6%2Fimage.png?alt=media&amp;token=bb87a5aa-1d1e-42a7-8fcd-fcfb9dcd9eed" alt=""><figcaption></figcaption></figure>

Other features:

* Price add-on > Extra fee – [What is it & How to Use](https://www.youtube.com/watch?v=5Bq4t0IrVEU)
* Price add-on > Upsell product – [What is it & How to Use](/product-options/advanced-setup/how-to-use-upsell-product-link-stock-and-price-of-shopify-variant-to-option-value.md)
* SKU – [What is it & How to Use](https://www.shopify.com/ca/retail/what-is-a-sku-number)
* Quantity – [What is it & How to Use](/product-options/advanced-setup/how-to-use-the-quantity-feature-for-options.md)

**Step 4: Advanced Settings (If Needed)**

{% hint style="success" %}
**Visibility**: Enable visibility condition if you want the Email Field to show/hide only when a customer selects a specific option from another field. [How to set up Conditional logics?](/product-options/advanced-setup/other-popular-features/how-to-set-up-conditional-logics.md)
{% endhint %}

Example: An option “Enter your email address” appears only if the customer selects “Yes” for “Would you like to receive exclusive emails with discounts and product updates?”

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FKnLv1gyCueUnT7Hx43bc%2Fimage.png?alt=media&amp;token=2c21538e-58f2-4142-a833-0227d304e93c" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeb_a4L4lzT43fWtH7S7Xz9Ky9jxttsJxfOj1nS8DOOiwASM5UrMTcLBfO-eAYRkMllMt7ZGO11J-hABQjZQROSdofiRqdtkD1oDLweuEGyCUjSYBAhsyNY_4kEEsLhDobzxCJM?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Help text**: Add a short description to explain the purpose of the Email Field option, offering context or clarification when the customer enters the information. Help text can be displayed as Tooltip or Content (Below/Beside the option title, Below the option).
{% endhint %}

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXftZZ1ZCCt5Yp-TCUnCC6PUPw3_Lg_zD8TvFeDWW4I5fdS7bHsbz8-WpKPJlSO2LrBIC1ygprRXJTXzZunrzboehthEjDhP61qYJJzVh5FQVYIRph5et5XuyNYkIDlrNTTDyOo6cg?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FuZoETiaRK2wqRlA2I367%2Fimage.png?alt=media&amp;token=5e6c5bf1-a9cd-4ef1-8835-e42b4ce3eb74" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Default value**: Pre-fill text inside the Email Field that appears every time the customer goes to the site. It can save time for customers by providing common or expected input.
{% endhint %}

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FCECTDOawPxq0sC0C4LP6%2Fimage.png?alt=media&amp;token=f24b9780-7b12-4609-864a-942706bac90c" alt=""><figcaption></figcaption></figure>

How it looks like in your storefront:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FQ659RDljtkry1NAW95OJ%2FScreenshot%20-%202026-01-12T151302.465.png?alt=media&amp;token=2b71276d-48bd-4dfc-a1d9-a2e941a8fd5f" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Placeholder text:** Display placeholder text inside the Email Field as a faded, lighter color. This text disappears when the customer starts typing and is often used to give customers a clear example of what should be filled in the field.
{% endhint %}

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FGJ6QiiMObJHe7vVk4mAI%2Fimage.png?alt=media&amp;token=0117aa0b-facf-41c4-84ce-590c97b209b0" alt=""><figcaption></figcaption></figure>

Here is an example of how it looks like in your storefront:

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FgHWhriSA9aw4KbAjjO47%2FScreenshot%20-%202026-01-12T151444.081.png?alt=media&amp;token=19a2eae2-8e18-4f32-8d12-2530f87a6fbf" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Limit characters:** Set **Min character** and **Max character** to limit how many characters customers can type in the Email field.
{% endhint %}

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdAeUNv_YCCMFPzDNjIEA2l6dw15PYywFlBs_y08D9FfF-yZJpPznkCL2MiVHLcsPahmq2id8aE3XbABxxZxstuZMhkDpg0JeKK8H2eGPBAIxRb0Airj-dSnDoBhYW4BHbMQpVd1g?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2FkVCXlIHQiUHVgKJFLeBb%2Fimage.png?alt=media&amp;token=2fcc6576-814c-4d93-909b-59ef26253cfa" alt=""><figcaption></figcaption></figure>

If a customer types fewer characters than the minimum, or more than the maximum, a notification message is shown below the field. If the text is not a valid email address, the message **Email format is invalid.** is shown; you can change this text in **Settings > Translation Texts > Default text customization > Product page**.

<figure><img src="https://1821185975-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRFiuDpHWm2HwzxPH4lfM%2Fuploads%2F0G3mhoanrVDJxjuEaEek%2Fimage.png?alt=media&amp;token=0e725ba7-02b9-42c3-99b3-f1240f1a2f90" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfItpbaTGLr-AmxWkxdwgvaUqvyLiDPcnP8TKWsVYo8wiGqEXplUbX-JZXQTyCT-9kbpoGIdGb1Lyc1yZzAOZX3eZi7h_FPl_NdWCtaoT0gaAUFU88lavHorv9oP9hv2hEgecoLyA?key=DC83dM0yOWsDjpoRFQoUWeuE" alt=""><figcaption></figcaption></figure>

**Step 4: Save and Test**

* Click Save to apply the settings.
* Visit the product page on your store to check if the Email Field works correctly.

### 3. Real-world Applications of Email Field

* Account Creation: Register users with a unique email for login and verification.
* Newsletters & Marketing: Let users subscribe for updates, promotions, or restocks.
* Event Registrations: Send tickets, reminders, or digital access links.

### 4. Key Features of Email Field

* Email fields ensure users enter properly formatted email addresses, reducing errors and improving communication.
