How To Add Class or ID to Form On Shopify

Form Class/ID Enhancement

SHOPIFY SNIPPET

Contact Form

<form id="custom-contact-form" class="custom-form-class">

Product Form

<form id="product-form" class="product-form-class">

1 Overview

Add custom classes and IDs to Shopify forms for advanced styling and JavaScript targeting. This essential snippet gives you complete control over contact forms, product forms, and other Shopify form elements, enabling custom designs that match your store's branding.

2 Key Features

Form Customization

Add custom classes/IDs to any Shopify form for precise styling

JS Targeting

Easily target forms with JavaScript using custom IDs

Multiple Forms

Works with contact forms, product forms, and more

Theme Integration

Seamlessly works with any Shopify theme

3 Code Implementation

{% comment %}
  Add Class or ID to Form
  Adds custom classes/IDs to Shopify forms for styling
  Provided by XeeZone - www.xeezone.com/free-shopify-code-snippets-by-xeezone
{% endcomment %}

{% form 'contact', id: 'custom-contact-form', class: 'custom-form-class' %}
  
{% endform %}

{% form 'product', product, id: 'product-form', class: 'product-form-class' %}
  
{% endform %}

4 Installation Guide

Locate Form Templates

Find your contact form (usually in templates/contact.liquid) and product form (typically in sections/product-template.liquid)

Replace Form Tags

Replace existing {% form %} tags with the enhanced versions from the snippet

Customize Classes/IDs

Change the class and ID names to match your preferred naming convention

Add CSS Styles

Create corresponding CSS rules in your theme's stylesheet using your new classes/IDs

JavaScript Integration

Update any JavaScript selectors to use your new form IDs for functionality

Pro Tip: Use BEM (Block Element Modifier) naming convention for your classes (e.g., .contact-form__input--error) to maintain scalable CSS architecture.