Build Forms on Shopify: How to Use Liquid to Build Robust Forms for Shopify Themes

If you build forms on Shopify, you know that they’re used across a range of touchpoints on Shopify stores, from customer registration, to blog commenting, to contacting merchants, and even adding product variants to the cart. Since forms carry a lot of responsibility for connecting your client with their customers, it’s crucial that these components are robust and user-friendly.

It’s easy to overlook the importance of forms in favor of more dynamic components of your client’s online stores likeShopify metafields. But in terms of functionality, forms play a very important role in how customers interact with a store.

"Forms play a very important role in how customers interact with a store."

Creating forms can often be repetitive, and mistakes can occur when building them from scratch. Thankfully, there are a number of Liquid elements that make working with forms easier and more reliable by automatically generating the code necessary for transferring data to the correct endpoint.

In this article, we look at how Liquid can be leveraged to simplify the process when you build forms on Shopify by generating input elements, identifying errors, and outputting feedback to customers. We’ll also be looking at which form types developers have access to when creating different forms.

What is theformtag?

TheformLiquid tag generates an HTML

Theformtag can take care of all the above code with this simplified markup:

{% form 'customer_login' %}

{% endform %}

We can see from this example that the openingformtag also includes a “type,” which in this case iscustomer_login. There are13 different form typesthat generate specific

{% form 'new_comment', article %}

{% endform %}

class="comment-form" id="article-10582441-comment-form" method="post">

In this example, thearticleparameter will allow the form to associate the new comment with the correct blog post. Forms for products, customer addresses, and new article comments all require additional parameters.

The different Liquid form types

There are 13 different Liquid form types for specific touchpoints where customers would be interacting with a client’s store or submitting data. As we’ve seen from our customer registration example, to generate a form, theformtag requires a type.

"There are 13 different Liquid form types for specific touchpoints where customers would be interacting with a client’s store or submitting data."

These predefined form types are:

• activate_customer_password
• contact
• currency
• customer
• create_customer
• customer_address
• customer_login
• guest_login
• new_comment
• product
• recover_customer_password
• reset_customer_password
• storefront_password

Examples of each of these forms and any additional required parameters are demonstrated inour Help Center.

Using conditional logic within forms

Certain types of forms may require extra functionality, like resetting a forgotten password, or displaying an error when invalid data is submitted. We can usecontrol flow tagsto set up rules that will display content when a specific event occurs, such as displaying an error message when an email address is incorrectly entered.

The Liquid objectform.errorsand the Liquid filterdefault_errorsare very helpful in cases where data is not submitted successfully through a form, as they allow you to display default error messages.

Theform.errorsobject will output or return an array of strings if a form was not submitted successfully. The strings returned depend on which fields of the form were left empty or contained errors. Possible values which can be returned are:

• author
• body
• email
• form

This object allows us to identify and output which part of a form was not entered correctly. If we want to display what type of error a customer has made, we could set up an iteration for loop like this:

{% for error in form.errors %}
{{ error }}
{% endfor %}

In the case above, if a customer entered an invalid email address, the valueemailwould be outputted. Now we can use this returned output and apply thedefault_errorsfilter to automatically generate a predefined error message.

Thedefault_errorsfilter will return a specific message based on the string returned by theform.errorsobject. To see this in practice, we would use control-flow tags to create the followingifstatement within our{% form %}tags:

{% if form.errors %}
{{ form.errors | default_errors }}
{% endif %}

Now, if a user entered an invalid email address, they would see the following message:

Please enter a valid email address.

Adding these conditional rules to your custom theme builds are crucial to ensure that your client’s customers see the correct feedback if they have entered invalid data. In this way, Liquid can be leveraged to provide visible and specific error messages to your client’s customers at the right time.

You might also like:How to Customize the img Element in Shopify Themes.

Form and function

Now that you’ve seen how Liquid objects, tags, and filters can be implemented together to create robust forms, you can extend the functionality when you build forms on Shopify byadding custom fieldsbased on your client’s requirements, ormodifying the form attributes.

However you adjust or iterate on how you build and design your forms, making use of the relevant Liquid elements will ensure your forms are robust and consistent. Hopefully with the help of this article, you will be more familiar with how Liquid can improve your forms and theme projects.

How have you used forms in your projects?Let us know in the comments below!