Liquid Toolkit

Customization

Liquid Custom Forms

Building Custom Forms

Liquid custom forms handle Shopify input with validation.

Introduction to Liquid Custom Forms

Liquid custom forms in Shopify allow store owners to gather input from customers directly on their storefront. These forms can be customized to fit any need, such as contact forms, product inquiries, or newsletter sign-ups. By leveraging Liquid, Shopify's templating language, you can implement custom validation to ensure the data collected is both useful and accurate.

Basic Structure of a Liquid Form

A basic Liquid form in Shopify typically consists of HTML form elements wrapped within Liquid tags. Here's a simple example of a contact form:

Adding Validation to Your Form

Validation is crucial for ensuring the data you collect is in the correct format. Shopify allows you to add basic HTML validation attributes such as required, minlength, and pattern. For example, to ensure a phone number input matches a specific format, you can use:

Handling Form Submissions

When a form is submitted, Shopify processes it and redirects the user to a success page if the submission is valid. You can customize this behavior by creating your own success page or handling errors. To capture form input on submission, use Liquid objects like form.errors and form.posted_successfully to provide feedback to users:

Advanced Customization Techniques

For more advanced form customization, consider using JavaScript to enhance validation or styling with CSS for a better user experience. You can also integrate third-party APIs to extend functionality, such as adding a CAPTCHA for spam prevention.

Customization

Next
Cart Customization