Add Custom Fields to Contact Forms at Checkout
Plans: All Plans Platforms: Shopify
AfterShip Personalization’s Smart Content feature allows you to add extra Custom Form Fields to the checkout page to gather additional customer information and personalize their shopping experiences to a great extent.
You can mark some fields on your checkout pages as required or optional.
In this article, we will show you:
Custom fields setup
Widget installation
FAQs
Log in to your AfterShip Personalization admin dashboard
Navigate to Smart checkout > Checkout page > Smart content > Custom fields
Click Edit
A custom field editor will open
a. Convert the status to Enabled to display the configured custom form fields on the checkout page
b. Configure display rule
If you wish to display the custom form to all customers, select Show to all customers
If you want to display the custom form to a specific set of customers, select Show to specific customers
c. Set up Conditions. Click Add conditions
Conditions represent the eligibility criteria of the customers to whom the custom form fields will be shown.
The following conditions are currently available.
Merchants can set up conditions like
Custom form fields will be displayed to the customers at checkout IF CONDITION A and CONDITION B are met (Both conditions should be met)
Custom form fields will be displayed to the customers at checkout IF CONDITION A and CONDITION B or IF CONDITION C and CONDITION D are met (Either set of the conditions (A+B or C+D should be met)
Custom form fields will be displayed to the customers at checkout IF CONDITION A or CONDITION B are met (Either A or B should be met)
Custom form fields will be displayed to the customers at checkout IF CONDITION A or CONDITION B or CONDITION C or CONDITION D are met (Either of the conditions A, B, C or D should be met)
Custom form fields will be displayed to the customers at checkout IF CONDITION A or CONDITION B and CONDITION C are met (Either A or B+C should be met)
Custom form fields will be displayed to the customers at checkout IF CONDITION A and CONDITION B or CONDITION C are met (Either A+B or C should be met)
Action
If the conditions configured by you are met, the corresponding action would be to display the custom form fields created by you on the checkout page.
d. Once conditions are set, define the Introduction settings of the custom fields
Set the font size
Give a title to the custom form. The character limit is 200
e. Set up form fields. You can choose from 4 types of custom fields to create a custom form at checkout
All the added fields will display under Fields
Click the trash bin icon to delete a field
Drag-and-drop the fields to change their order
f. Follow the widget installation steps on the Shopify checkout editor to display the custom fields at checkout.
g. Hit Save
Free text: You can ask a question, and the customer can write the answer in a text format
For Free text, you can choose Phone, Email, and ID as field formats.
- Phone and email data will be validated by our system for the correct format
- Text and ID will be validated using the regex pattern added by you for input validation
Select the checkbox to make the field required for checkout
Edit field Prompt text explaining what information is expected
Configure whether you want the field to be displayed in full-width or half-width
Checkbox: The field checkbox would be pre-checked when the customer first lands on the checkout box. Select the Field required if you still want the customer to check the box to checkout.
Add what information you want in the Title field
Choice list: Ask questions with multiple choice answers for customers to select from.
Select the Allow customers to select multiple choices if you are looking for a broader perspective on the question asked
Select the checkbox to make the Field required for checkout and customers to opt for only one choice
Input the question in the Title field
Add the choices one by one. Click Add choice for every new choice you want to add
Select the drag-and-drop icon to change the order of the choices
Click the trash icon to delete a choice
Dropdown list: Allows respondents to choose an option from a list of options displayed in the dropdown menu. The dropdown menu is visible once the respondent clicks on the downward arrow.
Select the checkbox to make the Field required for checkout and customers to opt for only one choice
Input the question in the Title field
Configure whether you want the field to be displayed in full-width or half-width
Add the choices one by one. Click Add choice for every new choice you want to add
Select the drag-and-drop icon to change the order of the choices
Click the trash icon to delete a choice
Merely enabling the Custom Fields on AfterShip Personalization will not activate the form on checkout. You need to install the AfterShip Personalization app on the Shopify checkout editor to enable and display the Contact form you’ve configured on the checkout page.
Step 1: Enable the widget in AfterShip
Enable the Custom fields status in the AfterShip Personalization admin and customize its settings.
Step 2: Open the Shopify checkout editor
Select the page where you want to show the custom fields, and in the left panel, click Add app.
Step 3: Select AfterShip Smart Content
Step 4: Select the content type
Click the dropdown menu and choose Custom fields.
Step 5: Allow the app to block checkout
Tick the checkbox to ensure your custom fields work properly at checkout.
Step 6 (optional): Include the app in Shop Pay
Tick the checkbox if Shop Pay is activated for your store.
Step 7: Adjust the widget's location
Drag and drop the widget to your desired location in the left panel. Use the preview in the top right to ensure it looks perfect.
Step 8: Save your Shopify theme
If you have any queries, please contact our support team for quick assistance.
The additional information gathered via custom fields is automatically synced to Shopify Metafields. If you wish to further sync the Metafields to customer data in the form of Tags, you can use Shopify Flow to set up a specific workflow.
If you have any queries, feel free to connect with our support team for quick assistance.
Overview
AfterShip Personalization’s Smart Content feature allows you to add extra Custom Form Fields to the checkout page to gather additional customer information and personalize their shopping experiences to a great extent.
You can mark some fields on your checkout pages as required or optional.
What you’ll learn
In this article, we will show you:
Custom fields setup
Widget installation
FAQs
Custom fields setup
Log in to your AfterShip Personalization admin dashboard
Navigate to Smart checkout > Checkout page > Smart content > Custom fields
Click Edit
A custom field editor will open
a. Convert the status to Enabled to display the configured custom form fields on the checkout page
b. Configure display rule
If you wish to display the custom form to all customers, select Show to all customers
If you want to display the custom form to a specific set of customers, select Show to specific customers
c. Set up Conditions. Click Add conditions
Conditions represent the eligibility criteria of the customers to whom the custom form fields will be shown.
The following conditions are currently available.
| Type | Logic | Definition |
|---|---|---|
| Cart value | =, >, <, ≥, ≤ | The total value of the product(s) in the cart |
| No. of products in cart | =, >, <, ≥, ≤ | The total number of products in the cart |
| Products in cart | Contain any of, Do not contain | You can select specific products to be included or excluded from the cart |
| Country/region | Is any of, Is none of | Country or region of the customer(s) to whom the product(s) will be shipped You can select specific countries and regions from where the products will be shipped/delivered or vice-versa |
| Date and time | Is before, Is after, Is between (Date range), Is recurring (Date range and day frequency) | Date and time when the custom form fields will *be shown to the customers and when it will end or for long it will run The timezone is based on your Shopify settings |
Merchants can set up conditions like
Custom form fields will be displayed to the customers at checkout IF CONDITION A and CONDITION B are met (Both conditions should be met)
Custom form fields will be displayed to the customers at checkout IF CONDITION A and CONDITION B or IF CONDITION C and CONDITION D are met (Either set of the conditions (A+B or C+D should be met)
Custom form fields will be displayed to the customers at checkout IF CONDITION A or CONDITION B are met (Either A or B should be met)
Custom form fields will be displayed to the customers at checkout IF CONDITION A or CONDITION B or CONDITION C or CONDITION D are met (Either of the conditions A, B, C or D should be met)
Custom form fields will be displayed to the customers at checkout IF CONDITION A or CONDITION B and CONDITION C are met (Either A or B+C should be met)
Custom form fields will be displayed to the customers at checkout IF CONDITION A and CONDITION B or CONDITION C are met (Either A+B or C should be met)
Action
If the conditions configured by you are met, the corresponding action would be to display the custom form fields created by you on the checkout page.
d. Once conditions are set, define the Introduction settings of the custom fields
Set the font size
Give a title to the custom form. The character limit is 200
e. Set up form fields. You can choose from 4 types of custom fields to create a custom form at checkout
All the added fields will display under Fields
Click the trash bin icon to delete a field
Drag-and-drop the fields to change their order
f. Follow the widget installation steps on the Shopify checkout editor to display the custom fields at checkout.
g. Hit Save
Types of form fields
Free text: You can ask a question, and the customer can write the answer in a text format
For Free text, you can choose Phone, Email, and ID as field formats.
- Phone and email data will be validated by our system for the correct format
- Text and ID will be validated using the regex pattern added by you for input validation
Select the checkbox to make the field required for checkout
Edit field Prompt text explaining what information is expected
Configure whether you want the field to be displayed in full-width or half-width
Checkbox: The field checkbox would be pre-checked when the customer first lands on the checkout box. Select the Field required if you still want the customer to check the box to checkout.
Add what information you want in the Title field
Choice list: Ask questions with multiple choice answers for customers to select from.
Select the Allow customers to select multiple choices if you are looking for a broader perspective on the question asked
Select the checkbox to make the Field required for checkout and customers to opt for only one choice
Input the question in the Title field
Add the choices one by one. Click Add choice for every new choice you want to add
Select the drag-and-drop icon to change the order of the choices
Click the trash icon to delete a choice
Dropdown list: Allows respondents to choose an option from a list of options displayed in the dropdown menu. The dropdown menu is visible once the respondent clicks on the downward arrow.
Select the checkbox to make the Field required for checkout and customers to opt for only one choice
Input the question in the Title field
Configure whether you want the field to be displayed in full-width or half-width
Add the choices one by one. Click Add choice for every new choice you want to add
Select the drag-and-drop icon to change the order of the choices
Click the trash icon to delete a choice
Widget installation
Merely enabling the Custom Fields on AfterShip Personalization will not activate the form on checkout. You need to install the AfterShip Personalization app on the Shopify checkout editor to enable and display the Contact form you’ve configured on the checkout page.
Step 1: Enable the widget in AfterShip
Enable the Custom fields status in the AfterShip Personalization admin and customize its settings.
Step 2: Open the Shopify checkout editor
Select the page where you want to show the custom fields, and in the left panel, click Add app.
Step 3: Select AfterShip Smart Content
Step 4: Select the content type
Click the dropdown menu and choose Custom fields.
Step 5: Allow the app to block checkout
Tick the checkbox to ensure your custom fields work properly at checkout.
Step 6 (optional): Include the app in Shop Pay
Tick the checkbox if Shop Pay is activated for your store.
Step 7: Adjust the widget's location
Drag and drop the widget to your desired location in the left panel. Use the preview in the top right to ensure it looks perfect.
Step 8: Save your Shopify theme
If you have any queries, please contact our support team for quick assistance.
FAQs
1. Can we sync custom field data to the customer data in Shopify?
The additional information gathered via custom fields is automatically synced to Shopify Metafields. If you wish to further sync the Metafields to customer data in the form of Tags, you can use Shopify Flow to set up a specific workflow.
If you have any queries, feel free to connect with our support team for quick assistance.
Updated on: 23/05/2024
Thank you!