A key new feature of the Artisan Shopify theme is the custom form builder. This flexible new section offers merchants more control over their contact form content, l providing them with a powerful new tool to gather pertinent information from their own customers.
As our design and development team built Artisan, it quickly became clear that service based Shopify stores, in particular, could benefit from collecting more relevant information from customers via contact forms, so the team started to explore how to make this work best.
The use of section content blocks was the key to offering multiple types of form fields. The resulting variety of field types makes it easy for a merchant to ensure their contact form suits their particular business needs and elicits the most relevant information right from the get-go.
Field types in Artisan’s contact form
In addition to typical name, email and message fields, Artisan’s unique form builder lets you add these types of fields and use them for almost anything you can imagine.
- Text field
- Text area
- Radio buttons
- Checkboxes
- Dropdown
- Datepicker
The email field is actually one of the default fields included in all Shopify themes. Because Shopify’s email forms generate an email to you (and it’s assumed that you would want to be able reply to the sender), this field is required on all forms.
As an added bonus, this field will also verify that the information entered follows the format expected in an email address. While it can’t verify that the address is valid or correct, it will at least make sure the user follows the mailbox@domain.com format — and prevent someone from entering other types of text in this field.
You can also only have one “real” email field per form. You could technically also use a text field to collect email addresses, but they won’t be automatically inserted as a “reply to” address or be verified for correct format.
Text field
A text field is a single line field that’s best for collecting answers of one to five words or so. This makes it perfect for first or last names, street addresses, cities or postal codes, but it can also be used to collect freeform short answer text that you don’t expect to be long.
When deciding whether to use this field or the text area field, its bigger cousin discussed next, keep in mind that if a user types more text than can fit in the width of the field (which may be smaller on mobile devices), the form will still accept the entry, but the user won’t be able to see his or her complete answer on a single line without awkward horizontal scrolling.
Examples: Ask a customer for three words that describes his or her style for a personal shopping service or custom art commission or to list a few of their favorite colors for a garden or style consultation.
Text area
The text area field is designed for collecting larger amounts of text. It’s good for general purposes such as asking the user to enter a long form message — much like the body of an email — or for collecting detailed information related to their inquiry.
In a text area field, if the user enters more text than a single line, a new line will start automatically, but keep in mind that if the message extends more than roughly five to six lines, the user will have to scroll vertically to see the entire message.
Examples: Ask a user to provide a detailed description of their inquiry or reason for contacting you, such as what he or she envisions for a custom piece of art they want to order, or the specific issue they are having with one of your products. In some cases, you may need to follow up and ask for even more information to help resolve the situation.
Radio buttons
Radio buttons are designed to give users multiple choices — but only lets them select one of them. Think of them as being like a “true or false” question on a test — there can only be one correct answer (though, unlike a true-false question, radio buttons can have three or more options).
This form field is ideal for giving users a list of options, including prompting them to think of ones they might not think of — but still forces the user to pick only one.
Artisan supports up to 10 choices per radio button group, but you may want to narrow down the number of choices (or consider a dropdown instead) since too many choices can be overwhelming.
One final note about radio buttons: If you have more than one set of radio buttons, the user can pick one option from each separate field.
Examples: Ask users to pick between different style choices (such as “classic,” “eclectic” or “modern”) to get a better idea of his or her preferences.
Checkboxes
Checkboxes are similar to radio buttons in that users are given a list of predefined choices to pick from — but, in these cases, one or more options can be selected. Like with radio buttons, there is a limit of 10 per field.
Examples: Present the user with a list of products or services you offer and ask them to check all the ones that interest them.
Dropdown
A dropdown is somewhat similar to radio buttons in that users are given a series of options and must pick one and only one option.
The key advantage to dropdowns as opposed to radio buttons is that it inherently takes up less room. Essentially, before the user clicks the menu to expand and see all of the options, it takes up only a single line of space — whereas a radio button list can make your form grow in height by one line for each option.
Examples: Let the customer select an area of interest.
Datepicker
The datepicker field is a special field that only accepts a date in the format MM/DD/YYYY. In Artisan, the datepicker field also contains a convenient pop-up calendar window that lets users browse through calendar grids, including jumping to different years and months.
Please note that each form in Artisan can only have one date field. In most cases, this limitation likely won’t be an issue and it’s also possible to use a text field as a date field, though it won’t have the popup calendar or ensure that it is a valid date format.
Example: Use this field to let customers indicate a “needed by” date or tell you their birthday for marketing efforts.
Paragraph
In addition, an eighth block called a “paragraph” can be added into a contact form. While this field doesn’t collect any information, it does offer you the ability to add a brief explanation in any part of the form, such as instructions, links to terms and conditions or special notes.
Placeholders and pushbacks
In Artisan, each field has a label that appears on the left side of each field, which has a thin gray line be default, giving it a clean look reminiscent of paper forms.
When a user clicks in this field, the label “shrinks” and a placeholder phrase appears, which acts as a prompt as to what information is expected here. You can customize the phrase in each one separately.
While straightforward instructions such as “Enter your name” work well, you can also consider more informal and fun variations to match your brand voice, such as “What should we call you?” or “What’s your name, mate?”
As with most form fields, if a field is set to required, the field will be labeled with an asterisk.
Too many fields
While this new feature is exciting, it’s easy to go overboard. In general, every time you add a required field to a form, the less likely your users will be to complete it, because it will take more time.
Of course, this can vary depending on the type of form. For example, an email newsletter sign up field is often most effective if just an email address is collected — while a project proposal or request form can be longer, since visitors who are reaching out for these things are likely more motivated to complete the form.
Forms also can’t be “saved” in the middle of the process, so you should plan your forms so that a shop visitor can fill it out in a single session — likely no more than a few minutes.
Try to keep the number of required form fields to a minimum.
Many users may be reluctant to provide certain contact information especially if they are early in the sales process, so setting too many fields to "required" can lead to frustration, form abandonment or users simply entering fake information (think “123 Main Street”).
Also keep in mind that if you have a long form with even just one required field, at a glance this form can look daunting to a user, even if it turns out they don’t need to do that much work to submit it.
Because of this, consider what information you need to collect upfront and what information might be better gained as you build a relationship with the customer. As you get more information from a user, you can also update his or her customer record with this new information.
How you get the form information
When a user submits a form, Artisan uses the default Shopify form processing system to parse and relay the information.
You’ll receive a message in your email with the customer’s email set as the “reply to” address. Below this, in one single block of text, will be all of the information the customer provided in the form.
It’s important to note that creating a custom field that links data to a specific field in your customer database is not possible with these types of forms, but you can still add details into existing or custom fields manually.
It's also not possible to change this email's subject line.
In addition, since these forms leverage the existing Shopify form submission technology, they are also subject to Google’s No CAPTCHA reCAPTCHA “prove you’re a human” verification if Shopify’s servers detect multiple submissions from the same user within a certain period.
