less than a minute read • Updated 8 minutes ago
Add custom fields to your checkout
How to add custom text, dropdown, radio, and checkbox fields to your checkout using HTML.
You can add extra input fields to the checkout — such as a terms of service checkbox, a referral source field, or an order notes box — using built-in configuration options or custom HTML.
Steps
For common fields like a terms of service agreement or a newsletter opt-in, use the built-in options in your template configuration:
For any other custom field, use the “Add custom form fields to your checkout” option and paste your HTML into the custom checkout fields textarea.
Text input example
<div class="fc-form-group ">
<div class="col-sm-8 col-sm-offset-3" data-fc-error-for="referral_source" data-fc-error-class="fc-alert-container--error">
<div class="fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active">
<label class="fc-input-group-container__title fc-input-group-container__title--forced fc-form-label">
Referred by… (required)
</label>
<div class="fc-form-group">
<p>Please let us know who referred you.</p>
<input type="text" id="referral_source" name="referral_source" placeholder="" autocomplete="off" class="fc-form-control" formnovalidate="" aria-required="true" value="{{ referral_source }}" data-fc-required>
</div>
</div>
</div>
</div>
Dropdown example
{% set options = ["Social Media", "Advertising", "Online Search", "Word Of Mouth", "Other"] %}
<div class="fc-form-group ">
<div class="col-sm-8 col-sm-offset-3" data-fc-error-for="referral_source" data-fc-error-class="fc-alert-container--error">
<div class="fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active">
<label class="fc-input-group-container__title fc-input-group-container__title--forced fc-form-label">
Referred by… (required)
</label>
<div class="fc-form-group">
<p>How did you hear about us?</p>
<select name="referral_source" id="referral_source" class="fc-form-control" aria-required="true" data-fc-required>
<option value="">Please select</option>
{% for option in options %}
<option value="{{ option }}" {% if referral_source == option %}selected{% endif %}>{{ option }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
Radio input example
{% set options = {"Monday": "Monday - First Delivery", "Wednesday": "Wednesday - Second Delivery", "Friday": "Friday - Third Delivery"} %}
<div class="fc-form-group ">
<div class="col-sm-8 col-sm-offset-3" data-fc-error-for="{% for option in options %}Delivery_{{ loop.index }} {% endfor %}" data-fc-error-class="fc-alert-container--error">
<div class="fc-input-group-container fc-input-group-container--checkbox fc-input-group-container--active">
<label class="fc-input-group-container__title fc-input-group-container__title--forced fc-form-label">
Delivery Day (required)
</label>
<div class="fc-form-group">
<p>What day would you like to receive your delivery?</p>
{% for option, label in options %}
<div class="fc-input-group-container--radio">
<label class="fc-form-label" for="Delivery_{{ loop.index }}"><input class="fc-form-control" type="radio" name="Delivery" value="{{ option }}" id="Delivery_{{ loop.index }}" {% if Delivery == option %}checked{% endif %} aria-required="true" data-fc-required /> {{ label }}</label>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
Checkbox example
A standalone optional checkbox needs a hidden input with the same name, so a value is always passed with the transaction even if the box is left unchecked:
<div class="fc-form-group">
<div class="col-sm-8 col-sm-offset-3 fc-checkout__additional-field--custom-checkbox">
<div class="fc-input-group-container fc-input-group-container--checkbox">
<label class="fc-input-group-container__title fc-form-label fc-form-label--custom-checkbox">
<input type="hidden" name="my_custom_checkbox" value="0" />
<input type="checkbox" id="my_custom_checkbox" name="my_custom_checkbox" value="1" class="fc-form-control fc-form-control--custom-checkbox" {{ checked(my_custom_checkbox == '1') }} />
My Checkbox Label
</label>
</div>
</div>
</div>
Notes
Name your fields using underscores instead of spaces, and capitalize them the way you want them displayed — for example,
Update_Listappears as “Update List” on receipts and in email receipts.Add
data-fc-requiredto any field’s input element to make it required on the checkout.Custom fields appear at the bottom of the receipt, in emails that include the receipt placeholder, and in all API responses and the XML datafeed.
Checkboxes don’t post any value if left unchecked — this is standard HTML form behavior, but it matters if you’re relying on a custom field in your XML datafeed.