Design Packs Docs
design-packs.comView on Shopify App Store
  • Get started here
  • Guides
    • Adding your first section
    • Adding your first template
    • General settings
    • Helpful hints & resources
    • Troubleshooting
    • Performance
  • Fundamentals
    • Section Settings
      • Setting Solid Background Colors instead of Gradients
      • Understanding Layout Settings: Size & Maximum Width
      • Understanding Inner Padding & Outer Margin Settings
      • Custom Classes Setting
      • Show Individual Variants Setting
      • Enable Metafield Detection Setting
        • Metafield ready sections
        • How to Use Metaobjects on Product template with Image with text - simple section
      • Metafield Badge Setting
      • Using Blog Tags Setting to Show Product-Specific Blog Posts
      • Add custom events when product is added to cart
      • Size Controls for Image & Video Blocks
      • Featured collection - blocks
        • How to use the Liquid Block in "Featured collection - blocks" Section to Add Custom Review Apps
        • How to use the Metafield Image Badge block
        • How to use the Metafield text block
      • Newsletter/Signup Form Block - Tags
      • How to add a Hidden Field in Contact Form
    • Sections
      • Banners & Sliders
      • Flourish
      • Icon & Logos
      • Image with text
      • Menus & Navigation
      • Blocks & Columns
      • Text Content
      • Products & Collections
      • Article sections
      • Galleries
      • Misc
      • Modal Popup
    • Templates
      • Regular Page
      • Lookbooks
      • Blogs
      • Blog Posts
      • Collection
      • Landing pages
    • Custom CSS
      • Basic CSS examples
      • Mobile CSS examples
      • Advanced Examples
    • Shopify expertise
      • Theme editor
      • Metafields
      • MetaObjects
    • How to Guides
      • How to jump/ link to another section on the SAME page
      • How to forward a contact form in Shopify to a different email with Gmail filters
      • How to create new page templates (and keep the original as a starting point)
      • Creating a New Product Template
      • How to set default article template for all blog posts
  • Use Cases
    • For Designers
    • For Developers
    • Agency Licenses
    • Affiliate Program
  • PRODUCT BLOCKS
    • Product Blocks
      • Image with text block
      • Connected products block
      • Variant descriptions block
      • Value icons block
      • Video block
      • Collapsible content block
      • Feature range block
  • Integrations
    • Theme Updater App
Powered by GitBook
On this page
  • What is a Hidden Field?
  • When to Use Hidden Fields
  • How to Add a Hidden Field
  • Setting the Hidden Field Value
  • Viewing Hidden Field Data
  • Example Use Cases
  • Tips
  • Troubleshooting
  1. Fundamentals
  2. Section Settings

How to add a Hidden Field in Contact Form

What is a Hidden Field?

A hidden field is a form element that collects data without being visible to your customers. This data is still sent with the form submission and included in your contact form emails.

When to Use Hidden Fields

Hidden fields are perfect for:

  • Tracking which product a customer was viewing when they submitted the form

  • Capturing additional context about the customer's journey

  • Adding internal reference numbers or metadata to form submissions

How to Add a Hidden Field

  1. In your contact form section, click "Add block"

  2. Select "Hidden value" from the block options

  3. Give your hidden field a label (this is for your reference only)

Setting the Hidden Field Value

You have two options to set the value:

Option 1: Using a String Value

Simply enter the text or connect the metafield you want to capture in the "String value" field. This is useful for static or dynamic values like:

  • Store location

  • Form version

  • Internal reference numbers

Option 2: Using Liquid

Use Liquid to dynamically populate the field with values from your store. Here are some common examples:

Example 1: Product Title

{{ product.title }}

This will capture the title of the product the customer is viewing.

Example 2: Product ID

{{ product.id }}

This will capture the unique ID of the product.

Example 3: Current Page URL

{{ request.path }}

This will capture the URL where the form was submitted.

Example 4: Customer Information

{{ customer.email }}

This will capture the customer's email if they're logged in.

Viewing Hidden Field Data

  • Hidden fields are not visible on the form to customers

  • The data will be included in your contact form email notifications

  • In the email, you'll see the field label and its value

Example Use Cases

Product Inquiry Form

If you want to know which product a customer was viewing when they submitted a question:

  1. Add a hidden field

  2. Set the label to "Product Information"

  3. In the Liquid value field, enter:

Product: {{ product.title }} (ID: {{ product.id }})

Store Location Tracking

If you have multiple store locations and want to track which location's form was used:

  1. Add a hidden field

  2. Set the label to "Store Location"

  3. In the String value field, enter your store location (e.g., "Downtown Store")

Tips

  • Always give your hidden fields clear, descriptive labels

  • Test your form submissions to ensure the hidden fields are capturing the correct data

  • Remember that hidden fields are only visible in the form email, not on the form itself

  • You can use multiple hidden fields in the same form

Troubleshooting

If your hidden field isn't capturing the expected data:

  1. Check that you've entered the Liquid code correctly

  2. Verify that the variable you're trying to capture is available in the current context

  3. Test the form submission to see what data is being captured

  4. Make sure you're using the correct Liquid syntax for your specific use case

PreviousNewsletter/Signup Form Block - TagsNextSections

Last updated 1 day ago