Field types reference
#Field types reference
Form Builder includes over 30 field types organized into 9 categories. This page covers every field type, its key settings, and common use cases so you can pick the right one for any situation.
#Contact Info fields
These are the essentials for collecting customer identity and contact details. They come pre-configured with sensible defaults.
A text input that validates email addresses. Customers must enter a properly formatted email (e.g., name@example.com) or the form will show a validation error.
| Setting | Details |
|---|---|
| Placeholder | Hint text (e.g., "you@example.com") |
| Required | Toggle on to require an email before submitting |
| Input icon | Optional icon displayed inside the field |
| Default value | Pre-fill the field with a value |
Use cases: Contact forms, newsletter signups, order inquiry forms, any form where you need to reach the customer.
#Name (Text)
A single-line text input for collecting the customer's name. Use two side-by-side name fields for separate first and last name inputs.
| Setting | Details |
|---|---|
| Placeholder | Hint text (e.g., "Your full name") |
| Required | Toggle on to make it mandatory |
| Input icon | Optional icon inside the field |
| Default value | Pre-fill with a value |
Use cases: Any form that needs to identify who is submitting.
#Phone
A text input optimized for phone numbers.
| Setting | Details |
|---|---|
| Placeholder | Hint text (e.g., "+1 (555) 000-0000") |
| Required | Toggle on to require a phone number |
| Input icon | Optional icon inside the field |
Use cases: Contact forms, booking requests, order forms, callbacks.
#Password
A masked text input where characters are hidden as the customer types. Useful for registration or account-related forms.
| Setting | Details |
|---|---|
| Placeholder | Hint text (e.g., "Enter your password") |
| Required | Toggle on to require a value |
| Input icon | Optional icon inside the field |
Use cases: Registration forms, account setup forms, login-related forms.
#Country
A dropdown menu pre-loaded with over 250 countries. Customers can scroll through the list or type to search.
| Setting | Details |
|---|---|
| Required | Toggle on to require a selection |
| Options | Pre-loaded from a global country list |
Use cases: Shipping forms, registration forms, wholesale inquiries, any form where you need the customer's location.
#Selection fields
These fields let customers choose from predefined options. Use them when you want structured, predictable answers.
#Image Options
A visual grid of cards with images and labels. Customers click to select one or more options. Great for product variants, service types, or any choice that benefits from a visual.
| Setting | Details |
|---|---|
| Options | Add options with image, label, value, and description |
| Multi-select | Allow selecting more than one option |
| Selection limit | Set a minimum and maximum number of selections |
| Tooltip | Enable tooltips on hover |
Use cases: Product customization (choose a color/style), service selection, visual surveys.
#Image Dropdown
A dropdown menu where each option includes a thumbnail image alongside the label text. Combines the space efficiency of a dropdown with the visual context of images.
| Setting | Details |
|---|---|
| Options | Add options with image, label, and value |
| Multi-select | Allow selecting more than one option |
| Selection limit | Set minimum and maximum selections |
Use cases: Product selection, variant picking, anything where customers benefit from seeing a small preview.
#Checkbox
A group of checkboxes that lets customers select one or more options. Each option is shown as an individual checkbox with a label.
| Setting | Details |
|---|---|
| Options | Add, remove, and reorder checkbox items |
| Options per line | Control how many checkboxes appear on each row |
| Default value | Pre-select one or more options |
Use cases: Interest selection, multiple-choice questions, feature preferences, "select all that apply" scenarios.
#Dropdown
A standard select dropdown where customers pick one option from a list. Compact and familiar.
| Setting | Details |
|---|---|
| Options | Add, remove, and reorder dropdown items |
| Placeholder | Text shown before a selection is made |
Use cases: Category selection, department routing, single-choice questions with many options.
#Radio Buttons
A group of radio buttons where customers select exactly one option. All options are visible at once, making them ideal when the list is short and you want customers to see all choices.
| Setting | Details |
|---|---|
| Options | Add, remove, and reorder radio items |
| Options per line | Control layout (1 per line or multiple) |
| Default value | Pre-select one option |
Use cases: Yes/no questions, preference selection, tier selection, "choose one" scenarios with a few options.
#Consent
A single checkbox used for terms and conditions, privacy policy acceptance, or marketing opt-in. Different from a regular checkbox because it represents a single yes/no agreement.
| Setting | Details |
|---|---|
| Label text | The agreement text (e.g., "I agree to the terms and conditions") |
| Required | Toggle on to require acceptance before submitting |
Use cases: Terms of service acceptance, privacy policy consent, marketing opt-in, GDPR compliance.
#Switch
A toggle switch that represents a boolean on/off or yes/no choice. Visually distinct from a checkbox, giving your form a modern feel.
| Setting | Details |
|---|---|
| Options | The two states (defaults to "Yes" and "No") |
Use cases: Newsletter subscription toggle, notification preferences, feature opt-in/out.
#Range Slider
A slider control that lets customers pick a value by dragging along a track. Shows a numeric value as the slider moves.
| Setting | Details |
|---|---|
| Minimum | The lowest allowed value (default: 0) |
| Maximum | The highest allowed value (default: 100) |
| Step | The increment between values (default: 1) |
| Default | Starting position of the slider |
| Prefix / Suffix | Text before or after the value (e.g., "$" or "%") |
Use cases: Budget ranges, satisfaction scales, quantity selection, priority levels.
#Button
A group of clickable buttons where customers choose one option by clicking. Similar to radio buttons but with a button-style appearance that stands out more.
| Setting | Details |
|---|---|
| Options | Add, remove, and reorder button items |
| Options per line | Control how many buttons appear on each row |
Use cases: Quick selections, preference choices, category picking, any question where bold visual options improve clarity.
#Product
A Shopify product selector that lets customers search for and choose products from your store. Can include a quantity selector.
| Setting | Details |
|---|---|
| Multi-selection | Allow selecting more than one product |
| Selection limits | Set minimum and maximum product selections |
| Enable quantity | Show a quantity picker for each selected product |
| Quantity limits | Limit quantity per product or total quantity |
| No product found notice | Custom message when search returns no results |
Use cases: Order forms, product inquiry forms, warranty claims (select the product), reorder forms.
#Input fields
These fields collect specific types of data input from customers.
#URL
A text input that validates web addresses. Customers must enter a properly formatted URL.
| Setting | Details |
|---|---|
| Placeholder | Hint text (e.g., "https://example.com") |
| Required | Toggle on to require a URL |
| Default value | Pre-fill the field |
Use cases: Social media links, website references, portfolio URLs, company websites.
#Date Time
A date and/or time picker. You can configure it to collect a date only, time only, or both a date and time.
| Setting | Details |
|---|---|
| Format | Date only, time only, or date and time |
| Date format | How the date is displayed (e.g., Y-m-d) |
| Time format | 12-hour or 24-hour |
| Default date | Pre-fill with a specific date |
| Start / End date | Restrict the selectable date range |
Use cases: Appointment booking, event registration, delivery date selection, date of birth.
#Hidden
A field that is invisible to customers but submits a value with the form. Useful for passing internal data.
| Setting | Details |
|---|---|
| Default value | The value that is submitted (set this in the builder) |
Use cases: Tracking source (e.g., which page the form was on), internal reference codes, campaign IDs.
#Repeater
A dynamic field group that lets customers add multiple rows of the same inputs. An "Add another" button lets customers create additional rows as needed.
| Setting | Details |
|---|---|
| Sub-fields | Configure the fields that appear in each repeated row |
Use cases: Adding multiple items to an order, listing multiple attendees, entering multiple addresses.
#Signature
A drawing pad where customers sign with their mouse, finger, or stylus. The signature is captured as an image.
| Setting | Details |
|---|---|
| Required | Toggle on to require a signature |
Use cases: Contract agreements, delivery confirmations, consent forms, any form that needs a handwritten signature.
#Text fields
Basic text entry fields for collecting written responses.
#Text
A single-line text input. The most basic and versatile field type.
| Setting | Details |
|---|---|
| Placeholder | Hint text displayed in the empty field |
| Required | Toggle on to require a value |
| Input icon | Optional icon inside the field |
| Default value | Pre-fill with a value |
Use cases: Short answers like names, company names, order numbers, subject lines.
#Textarea
A multi-line text area for longer written responses. Customers can write paragraphs of text.
| Setting | Details |
|---|---|
| Placeholder | Hint text displayed in the empty field |
| Required | Toggle on to require a value |
| Input icon | Optional icon inside the field |
| Default value | Pre-fill with a value |
Use cases: Comments, feedback, detailed descriptions, message boxes, "Tell us more" fields.
#Static / Display fields
These fields do not collect data. They display content on the form to provide context, instructions, or visual structure.
#Heading
Displays a heading text on the form. Use it to break your form into labeled sections.
| Setting | Details |
|---|---|
| Text content | The heading text to display |
Use cases: Section titles (e.g., "Contact Information," "Shipping Details"), form introductions.
#Paragraph
Displays a block of body text on the form. Useful for instructions, disclaimers, or context between fields.
| Setting | Details |
|---|---|
| Text content | The paragraph text to display |
Use cases: Instructions ("Please fill out all required fields"), disclaimers, context for the next group of fields.
#HTML
Renders custom HTML content directly in the form. This gives you full control over the content, including links, formatted text, or embedded media.
| Setting | Details |
|---|---|
| HTML content | Raw HTML that will be rendered in the form |
Use cases: Embedded videos, custom-formatted content, links to terms of service, styled callout boxes.
#Divider
A horizontal line that visually separates sections of your form. No settings — just drop it where you need a visual break.
Use cases: Separating form sections, adding visual breathing room between groups of fields.
#Rating fields
These fields let customers provide ratings and feedback using visual, interactive controls.
#Feedback (Emoji)
An emoji-based feedback picker. Customers click an emoji to express their sentiment. By default, it offers a 5-point scale from "Very Poor" to "Excellent."
| Setting | Details |
|---|---|
| Options | Customize the emojis, labels, and values |
| Hide option labels | Show only emojis without text labels |
Use cases: Quick satisfaction surveys, product reviews, experience ratings, NPS-style feedback.
#Matrix
A table-based rating field where customers answer multiple questions on the same scale. Rows are questions and columns are answer options (e.g., "Very Satisfied" to "Very Unsatisfied").
| Setting | Details |
|---|---|
| Rows | The questions or items being rated |
| Columns | The rating scale options |
| Mode | Radio (one answer per row) or Checkbox (multiple per row) |
Use cases: Multi-criteria evaluations, product feature ratings, service quality surveys, course feedback.
#Rating Level
A numeric level-based rating. Customers select a number to indicate their rating level.
| Setting | Details |
|---|---|
| Required | Toggle on to require a rating |
Use cases: Priority levels, satisfaction scores, importance rankings, skill level assessments.
#Rating Star
A classic star rating where customers click to select 1 to 5 stars.
| Setting | Details |
|---|---|
| Number under icon | Optionally show the numeric value under each star |
| Required | Toggle on to require a star rating |
Use cases: Product reviews, service ratings, experience scoring, any "rate this" scenario.
#File Upload
#File Upload
Lets customers attach files to their form submission. You control which file types are allowed and whether multiple files can be uploaded.
| Setting | Details |
|---|---|
| Allowed file types | Choose from images (JPG, PNG, GIF, WebP, SVG, TIFF), documents (PDF, DOC, DOCX, XLS, XLSX, CSV, PPT, PPTX, TXT), archives (ZIP, RAR, TAR), and media (MP3, MP4, MOV, MKV, WebM) |
| Allow multiple | Let customers upload more than one file |
| Required | Toggle on to require at least one file |
File uploads are available on the Starter plan and above. Upload size limits depend on your plan (10 MB on Starter, 20 MB on Growth, 100 MB on Pro).
Use cases: Warranty claim photos, resume uploads, design files, supporting documents, proof of purchase.
#Color fields
#Color Swatch
A set of color swatches that customers click to select. Each swatch shows a color with an optional label.
| Setting | Details |
|---|---|
| Options | Add swatches with color value, label, and selection value |
| Required | Toggle on to require a selection |
Use cases: Product color selection, preference surveys, design choice forms.
#Color Picker
A full color picker that lets customers choose any color by entering a hex code or using the visual picker.
| Setting | Details |
|---|---|
| Default value | Pre-select a color |
| Required | Toggle on to require a color |
Use cases: Custom product orders (choose your color), brand color surveys, design request forms.
#Number fields
#Number
A numeric input field with optional minimum and maximum constraints.
| Setting | Details |
|---|---|
| Default value | Pre-fill with a number |
| Minimum | The lowest allowed value |
| Maximum | The highest allowed value |
| Required | Toggle on to require a value |
Use cases: Quantity, age, budget amount, any field where only numbers are valid.
#Quantity
A number input with increment (+) and decrement (-) buttons for quick adjustments. Perfect for situations where customers need to pick a count.
| Setting | Details |
|---|---|
| Default value | Starting quantity |
| Required | Toggle on to require a value |
Use cases: Order quantity, number of guests, ticket count, item quantities.
#Layout element
#Row
A container element that groups multiple fields side by side on the same line. Not a data field itself — it is a structural element used to create multi-column layouts within your form.
| Setting | Details |
|---|---|
| Children | Drag 2 to 10 fields into the row to display them side by side |
| Column widths | Each field within the row can have its width adjusted |
Use cases: First Name + Last Name, City + State + Zip, Start Date + End Date — any combination of fields that belongs on one line.
#Quick reference table
| Category | Fields |
|---|---|
| Contact Info | Email, Name, Phone, Password, Country |
| Selection | Image Options, Image Dropdown, Checkbox, Dropdown, Radio Buttons, Consent, Switch, Range Slider, Button, Product |
| Input | URL, Date Time, Hidden, Repeater, Signature |
| Text | Text, Textarea |
| Static / Display | Heading, Paragraph, HTML, Divider |
| Ratings | Feedback (Emoji), Matrix, Rating Level, Rating Star |
| File Upload | File Upload |
| Color | Color Swatch, Color Picker |
| Number | Number, Quantity |
| Layout | Row |