Everything you need to build custom contact forms in the Boardwalk theme — from adding text fields and dropdowns to setting up checkboxes, text areas, and configuring how form submissions are handled.
A form is a way for visitors to send you information directly from your online store — things like their name, email address, a message, or answers to specific questions. Forms are commonly used for contact pages, quote requests, feedback surveys, and newsletter sign-ups.
In the Boardwalk theme, forms are built using a Form block that acts as a container for individual field blocks. You add the Form block to any section, then fill it with the fields you need: text fields, text areas, dropdowns, and checkboxes. Each field block maps to a Shopify contact form field, so every submission is automatically delivered to your store's email address. The Form block also includes settings for the submit button, success message, colors, and spacing.
Follow these steps to add a custom form to any page of your Shopify store using the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Navigate to the page
where you want to add a form using the page selector
dropdown at the top center of the editor.
Inside the section where you want the form to appear, click Add block and choose Form from the block list. The Form block acts as the container for all your fields and includes the submit button automatically.
Click the Form block in the sidebar, then click Add block inside it. Choose from the available field types: Text field, Textarea, Dropdown, or Checkbox. Add as many fields as you need and drag them to reorder.
Click on each field block to set its label, placeholder text, form field mapping, and whether the field is required. The Form field setting determines which Shopify contact form field the response is saved to — this is what you'll see in the notification email when someone submits the form.
Click the parent Form block to set the submit button text, button style, success message, color scheme, corner radius, field gap, and padding.
Form submissions are sent to the email address configured
in your Shopify admin. To check or update this, go to
Settings → Notifications → Staff
notifications
and look for the
Customer contact form notification.
Note: Shopify uses the built-in contact form system for all Form block submissions. Make sure the Customer contact form notification is enabled so you receive emails when visitors submit your form.
Click Save in the Theme Editor. Preview your page and submit a test entry to make sure all fields appear correctly and the notification email arrives as expected.
These settings are found on the parent Form block itself. They control the submit button, success message, and overall appearance of the form.
The label displayed on the form's submit button (e.g., "Send Message" or "Submit").
Controls the visual style of the submit button. Options:
Primary, Secondary, or
Tertiary. These styles are defined in your
theme's global button settings.
The confirmation text shown to the visitor after they successfully submit the form (e.g., "Thanks for reaching out! We'll be in touch soon.").
Applies a color scheme to the form container, including background and text colors. Color schemes are defined in Online Store → Themes → Customize → Theme settings → Colors.
Rounds the corners of the form container.
Controls the vertical spacing between form fields on desktop.
Controls the top and bottom padding inside the form container on desktop screens.
A separate set of padding controls for mobile devices, allowing you to fine-tune the form's spacing on smaller screens independently from desktop.
A single-line input field for collecting short pieces of information like a name, email address, phone number, or website URL. This is the most common field type you'll use when building a form.
The visible text displayed above the input field that tells visitors what information to enter (e.g., "Your Name" or "Email Address").
Sets the type of data the field accepts. This helps mobile devices show the correct keyboard layout and enables basic browser validation.
Optional hint text that appears inside the field before the visitor types anything (e.g., "Enter your email"). This disappears once the visitor starts typing.
Determines which Shopify contact form field the visitor's response is mapped to. This is the field name that appears in your notification email when someone submits the form.
Note: If you use two fields with the same form field mapping (e.g., two fields both set to "Custom 1"), the second field's value will overwrite the first in the submission email. Make sure each field uses a unique form field mapping.
Tells the browser what type of data to suggest when the visitor clicks into the field. When enabled, the browser can auto-fill the field with saved information (like a name or email address), making it faster for visitors to complete the form.
When turned on, the visitor must fill in this field before they can submit the form. Required fields display a visual indicator next to the label and include a screen reader announcement for accessibility.
A multi-line text area for collecting longer responses like messages, detailed descriptions, or special instructions. This is ideal for open-ended questions where visitors need more room to write.
The visible text displayed above the text area (e.g., "Your Message" or "Tell us more").
Optional hint text inside the text area before the visitor starts typing.
Determines which Shopify contact form field the response is mapped to.
Controls the visible height of the text area by setting the number of text rows displayed. Range: 2 to 10. Visitors can still type more text than the visible area — the field will scroll.
When turned on, the visitor must fill in this field before submitting the form.
A dropdown select menu that lets visitors choose one option from a predefined list. This is useful for fields like "Budget range," "How did you hear about us," or "Subject of inquiry" where you want to control the available answers.
The visible text displayed above the dropdown (e.g., "Budget" or "Subject").
The text shown in the dropdown before the visitor selects an option (e.g., "Select an option"). This placeholder is not a selectable value.
The list of choices available in the dropdown. Enter each option on its own line. For example, a budget dropdown might have options like "Under $500," "$500 – $1,000," and "Over $1,000."
Tip: Enter one option per line in the text area. Blank lines are automatically ignored.
Determines which Shopify contact form field the selected option is mapped to.
When turned on, the visitor must select an option before submitting the form.
A toggle-style checkbox that visitors can check or uncheck. This is commonly used for "I agree to the Terms and Conditions" confirmations, newsletter opt-ins, or privacy policy acknowledgments.
The text displayed next to the checkbox. This is a rich text field, which means you can include clickable links — perfect for linking to your Terms and Conditions or Privacy Policy pages (e.g., "I agree to the Terms and Conditions").
Tip: To add a link inside the label,
highlight the text you want to link in the rich text
editor and use the link button to point to your
policy page (e.g., /pages/terms).
Determines which Shopify contact form field the checkbox response is mapped to. When checked, the value "Yes" is submitted.
When turned on, the visitor must check this box before they can submit the form. This is especially useful for terms and conditions or privacy policy acknowledgments.
Key details and Shopify admin steps to keep in mind when working with Form blocks.
Form submissions are delivered through Shopify's built-in contact form system. To make sure you receive these emails, go to Settings → Notifications → Staff notifications in your Shopify admin and confirm the Customer contact form notification is enabled.
Each field block in your form should use a different Form field value. If two fields share the same mapping (e.g., both set to "Custom 1"), only the last field's value will appear in the submission email.
Shopify includes built-in spam protection for contact forms. If you're receiving spam, you can enable additional CAPTCHA protection in your Shopify admin under Online Store → Preferences → Spam protection.
All form field blocks include proper labeling and screen reader support. Required fields are announced as "required" to assistive technologies, ensuring your form is usable by all visitors.
If you're using a checkbox to collect terms or privacy consent, make sure the linked policy pages exist first. Go to Settings → Policies in your Shopify admin to create your Terms of Service and Privacy Policy, or create them as regular pages under Online Store → Pages.
The Form block has its own color scheme setting. These color schemes are defined in Online Store → Themes → Customize → Theme settings → Colors. Make sure you've set up the color schemes you want to use before configuring the form.