Let's take a look at the capabilities of each form field
-
All Form Fields
- Match the styling of the default theme settings (tested on Shopify free themes not premium)
- Display/hide the value during the checkout
- Works with multiple languages using the Shopify Translate & Adapt app
-
Single line text input fields
- Capture short text messages and personalisation's from a customer
- Set a minimum and maximum number of characters permitted
- Optional placeholder text to help a user understand what type of value you are expecting
- Enable/disable the browser's built in spell checker
- Restrict characters being entered with the use of a regular expression
-
Checkbox fields
- Edit the text associated with each checkbox on the form
- Option to make the field mandatory
- Edit the checked value passed through with the order
- Ability to add a hyperlink to supporting documents
-
File upload fields
- Restrict file formats accepted
- Assist customers by displaying accepted file formats in form field label
- Option to make the field mandatory
- Customisable helper text displayed when customers attempt to upload an unaccepted file type
-
Numeric input fields
- Accepts a numeric value only
- Option to display a metric value alongside the form field
- Set minimum and maximum values permitted
- Set a default value when the product page first loads
- Control the decimal places permitted
- Control the numeric increment when using the browser arrow controls
- Option to make the field mandatory
- Control the width of the form field independent of other form fields
-
Selection menu / Radio buttons
- Enter an unlimited number of options for a customer to choose from
- Easily change the field type from a selection (dropdown) menu to radio buttons
-
Multi-line text input fields
- Set a minimum and maximum number of characters permitted
- Optional placeholder text to help a user understand what type of value you are expecting
- Enable/disable the browser's built in spell checker
- Restrict characters being entered with the use of a regular expression
-
Colour picker fields
- Set a default colour that is selected when the page first loads
- Allow customers to send a precise colour with their order using a Hexadecimal, RGB or HSL value
{% assign field_label = "Enter a unique field label" %}
{% assign required_field = false %}
{% assign position = "middle" %}
{% assign checked_value = "Yes" %}
{% assign hide_checkout = false %}
{% comment %}
Use the code below to add a link in the checkbox text
<a href='' target='_blank'>
</a>
{% endcomment %}
{% comment %}
Do not edit the code below
{% endcomment %}
{% assign gen_id = field_label | remove: " " | strip | downcase %}
<div class="checkbox-container">
<fieldset class="product-form__input line-item-property__field"
data-input-type="checkbox">
<input id="{{ gen_id }}"
class="input-checkbox required__check {% if required_field %}required__field{% endif %}"
form="product-form-{{ section.id }}"
type="checkbox"
name="properties[{% if hide_checkout %}_{% endif %}{{ field_label | strip_html }}]"
value="{{ checked_value }}"
data-controller-form-label="{{ field_label }}"
{% if required_field %}required{% endif %}>
<label for="{{ gen_id }}" class="form__label checkbox__label checkbox__align_{{ position }}">
{{ field_label }}
</label>
</fieldset>
</div>
<style>
.form__label {
max-width: 37rem;
margin-bottom: 0.6rem !important;
}
input[type="checkbox"] {
cursor: pointer;
}
.checkbox__label {
display: inline-block;
max-width: 85%;
}
.checkbox__align_top {
vertical-align: top;
}
.checkbox__align_middle {
vertical-align: middle;
}
.checkbox__align_bottom {
vertical-align: bottom;
}
.checkbox__label > p {
margin: 2px 0px;
}
.checkbox-container, .checkbox-container > fieldset {
margin: 5px 0px;
}
</style>
{% assign field_label = "Enter a unique field label" %}
{% assign default_color = "#2B6CD4" %}
{% assign hide_checkout = false %}
{% comment %}
Do not edit the code below
{% endcomment %}
{% assign gen_id = field_label | remove: " " | strip | downcase %}
<fieldset class="js product-form__input line-item-property__field"
data-input-type="color">
<label for="{{ gen_id }}" class="form__label">{{ field_label }}</label>
<input id="{{ gen_id }}"
class=""
form="product-form-{{ section.id }}"
type="color"
name="properties[{% if hide_checkout %}_{% endif %}{{ field_label }}]"
value="{{ default_color }}"
data-controller-form-label="{{ field_label }}">
</fieldset>
<style>
.form__label {
max-width: 37rem;
margin-bottom: 0.6rem !important;
}
</style>
{% assign field_label = "Enter a unique field label" %}
{% assign required_field = true %}
{% assign hide_checkout = false %}
{% comment %} Variables used if Shopify form field plus code has been installed {% endcomment %}
{% assign accepted_formats = ".png, .jpg, .jpeg, .psd, .webp" %}
{% assign show_file_in_lbl = false %}
{% assign help_message = "Please upload one of the following file types:" %}
{% comment %}
Do not edit the code below
{% endcomment %}
{% assign gen_id = field_label | remove: " " | strip | downcase %}
<fieldset class="js product-form__input line-item-property__field"
data-input-type="file">
<label for="{{ gen_id }}" class="form__label">{{ field_label }}{% if show_file_in_lbl %} ({{ accepted_formats }}){% endif %}</label>
<input
id="{{ gen_id }}"
class="file__upload required__check {% if required_field %}required__field{% endif %}"
type="file"
name="properties[{% if hide_checkout %}_{% endif %}{{ field_label }}]"
form="product-form-{{ section.id }}"
value=""
accept="{{ accepted_formats }}"
data-help-msg="{{ help_message }}"
data-controller-form-label="{{ field_label }}"
file-input="{{ gen_id }}"
formats="{{ accepted_formats | replace: ", ", "|" | replace: " ", "" }}"
{% if required_field %} required {% endif %}
>
<p id="warn-{{ gen_id }}" class="upload__warning"></p>
</fieldset>
<style>
.form__label {
max-width: 37rem;
margin-bottom: 0.6rem !important;
}
input[type="file"] {
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
font-size: 1.2rem;
line-height: calc(1 + .6 / var(--font-body-scale));
min-height: calc(var(--inputs-border-width) * 2);
min-width: calc(7rem + (var(--inputs-border-width) * 2));
margin-left: -0.15rem;
}
input[type="file"]::file-selector-button {
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
font-size: 1.2rem;
line-height: calc(1 + .6 / var(--font-body-scale));
cursor: pointer;
margin: calc(var(--inputs-border-width) + 0.15rem);
margin-right: calc(var(--inputs-border-width) + 0.5rem);
padding: 0px 20px;
height: 4rem;
min-height: calc(var(--inputs-border-width) * 2);
min-width: calc(7rem + (var(--inputs-border-width) * 2));
color: rgba(var(--color-foreground),.75);
background-color: rgb(var(--color-background));
letter-spacing: .04rem;
border: 0.1rem solid transparent;
border-radius: var(--inputs-radius);
box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground),var(--inputs-border-opacity));
transition: box-shadow var(--duration-short) ease;
}
input[type="file"]::file-selector-button:hover, input[type="file"]::file-selector-button:focus, input[type="file"]::file-selector-button:focus-visible{
box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground),var(--inputs-border-opacity));
outline: 0;
border-radius: var(--inputs-radius);
}
</style>
{% assign field_label = 'Enter a unique field label' %}
{% assign min_characters = 0 %}
{% assign max_characters = %}
{% assign placeholder_text = "" %}
{% assign required_field = false %}
{% assign spellchecker = true %}
{% assign hide_checkout = false %}
{% assign regular_expression = "^[^<>\\\{\\\}]*$" %}
{% assign expression_title = "The following values are not allowed < > { }" %}
{% assign validation_type = "key" %}
{% comment %}
Do not edit the code below
{% endcomment %}
{% assign gen_id = field_label | remove: " " | strip | downcase %}
<fieldset class="product-form__input line-item-property__field text-field"
data-input-type="textarea">
<label for="{{ gen_id }}" class="form__label">{{ field_label }}</label>
<div class="field">
<textarea id="{{ gen_id }}"
class="select__select text-area custom-text-input required__check {% if required_field %}required__field{% endif %}"
form="product-form-{{ section.id }}"
minlength="{{ min_characters }}"
{% if max_characters > 0 %}maxlength="{{ max_characters }}"{% endif %}
placeholder="{{ placeholder_text }}"
name="properties[{% if hide_checkout %}_{% endif %}{{ field_label }}]"
{% unless regular_expression == '' %}pattern="{{ regular_expression }}"{% endunless %}
data-controller-form-label="{{ field_label }}"
{% if required_field %} required {% endif %}
{% if spellchecker %}spellcheck="true"{% endif %}
data-validation-type="{{ validation_type }}"></textarea>
<input id="conv-{{ gen_id }}" type="text" {% unless regular_expression == '' %}pattern="{{ regular_expression }}"{% endunless %} style="display: none;">
</div>
</fieldset>
<style>
.form__label {
max-width: 37rem;
margin-bottom: 0.6rem !important;
}
.product-form__input input[type='text'] {
cursor: text;
}
.text-area {
padding-top: 1em;
padding-bottom: 1em;
}
</style>
{% assign field_label = "Enter a unique field label" %}
{% assign field_text = "cm" %}
{% assign min_value = 0 %}
{% assign max_value = %}
{% assign default_value = %}
{% assign value_increment = 1 %}
{% assign required_field = false %}
{% assign field_size = 24 %}
{% assign hide_checkout = false %}
{% comment %}
validation_key variable is only available to use when the Form field plus or advanced form field service has been purchased
{% endcomment %}
{% assign validation_type = "key" %}
{% comment %}
Do not edit the code below
{% endcomment %}
{% assign gen_id = field_label | remove: " " | strip | downcase %}
<fieldset class="js product-form__input line-item-property__field num_field"
data-input-type="number" >
<label for="{{ gen_id }}" class="form__label">{{ field_label }}</label>
<div class="field num-field">
<input id="{{ gen_id }}"
class="select__select custom-text-input required__check {% if required_field %}required__field{% endif %}"
form="product-form-{{ section.id }}"
type="number"
min="{{ min_value }}"
max="{{ max_value }}"
step="{{ value_increment }}"
value="{{ default_value }}"
name="properties[{% if hide_checkout %}_{% endif %}{% if field_text == "" %}{{ field_label }}{% else%}{{ field_label | append: " (" | append: field_text | append: ")" | escape }}{% endif %}]"
data-controller-form-label="{{ field_label }}"
{% if required_field %}required{% endif %}
data-validation-type="{{ validation_type }}">
</div>
<p class="field_text form__label">{{ field_text }}</p>
</fieldset>
<style>
.num-field {
max-width: {{ field_size }}rem;
}
.field {
display: inline-block;
}
.field_text {
display: inline-block;
}
</style>
{% assign field_label = "Enter a unique field label" %}
{% assign field_values = "Option A, Option B" %}
{% assign field_type = "dropdown" %}
{% assign hide_checkout = false %}
{% assign required_field = false %}
{% assign required_text = "Please select" %}
{% comment %}
Do not edit the code below
{% endcomment %}
{% assign gen_id = field_label | remove: " " | strip | downcase %}
{% assign selection_options = field_values | split: "," %}
{%- if field_type == 'pills' -%}
<fieldset class="js product-form__input product-form__input--pill"
data-input-type="radio">
<legend class="form__label">{{ field_label }}</legend>
{% for radio-button in selection_options %}
<input id="{{ gen_id }}-{{ forloop.index0 }}"
class="radio-buttons"
form="product-form-{{ section.id }}"
type="radio"
name="properties[{% if hide_checkout %}_{% endif %}{{ field_label }}]"
value="{{ radio-button | strip | escape }}"
data-controller-form-label="{{ field_label }}"
{% if required_field %}required{% else %}{% if forloop.index0 == 0 %}checked{% endif %}{% endif %}>
<label for="{{ gen_id }}-{{ forloop.index0 }}">
{{ radio-button | strip | escape }}
</label>
{% endfor %}
</fieldset>
{% else %}
<fieldset class="product-form__input product-form__input--dropdown"
data-input-type="select">
<label for="{{ gen_id}}" class="form__label">{{ field_label }} </label>
<div class="select">
<select id="{{ gen_id }}"
class="select__select"
form="product-form-{{ section.id }}"
name="properties[{% if hide_checkout %}_{% endif %}{{ field_label }}]"
data-controller-form-label="{{ field_label }}"
{% if required_field %}required{% endif %}>
{% if required_field %}
<option value="" selected disabled>{{ required_text }}</option>
{% endif %}
{% for option in selection_options %}
<option value="{{ option | strip | escape }}" {% unless required_field %}{% if forloop.index0 == 0 %}selected{% endif %}{% endunless %}>
{{ option | strip | escape }}
</option>
{% endfor %}
</select>
{% render 'icon-caret' %}
</div>
</fieldset>
{% endif %}
<style>
.product-form__input .select, .form__label {
max-width: 37rem;
margin-bottom: 0.6rem !important;
}
</style>
{% assign field_label = "Enter a unique field label" %}
{% assign min_characters = 0 %}
{% assign max_characters = %}
{% assign placeholder_text = "" %}
{% assign required_field = false %}
{% assign spellchecker = true %}
{% assign hide_checkout = false %}
{% assign regular_expression = "^[^<>\\\{\\\}]*$" %}
{% assign expression_title = "The following values are not allowed < > { }" %}
{% assign validation_type = "key" %}
{% comment %}
Do not edit the code below
{% endcomment %}
{% assign gen_id = field_label | remove: " " | strip | downcase %}
<fieldset class="js product-form__input line-item-property__field text-field"
data-input-type="text">
<label for="{{ gen_id }}" class="form__label required__check">{{ field_label }}</label>
<div class="field text-field">
<input
id="{{ gen_id }}"
class="select__select custom-text-input required__check {% if required_field %}required__field{% endif %}"
form="product-form-{{ section.id }}"
type="text"
minlength="{{ min_characters }}"
{% if max_characters > 0 %}maxlength="{{ max_characters }}"{% endif %}
placeholder="{{ placeholder_text }}"
name="properties[{% if hide_checkout %}_{% endif %}{{ field_label }}]"
value="{{ value | escape }}"
title="{{ expression_title }}"
{% unless regular_expression == '' %}pattern="{{ regular_expression }}"{% endunless %}
data-controller-form-label="{{ field_label }}"
{% if required_field %}required{% endif %}
{% if spellchecker %}spellcheck="true"{% endif %}
data-validation-type="{{ validation_type }}">
</div>
</fieldset>
<style>
.form__label {
max-width: 37rem;
margin-bottom: 0.6rem !important;
}
.product-form__input input[type='text'] {
cursor: text;
}
</style>
<script>
document.getElementById("product-form-{{ section.id }}").noValidate = false;
</script>