1. What is the Contact Form?
The Contact Form section is a simple way for visitors to get in touch with your store. It collects messages or inquiries, reducing spam and providing a structured way to communicate.
2. Section Components
| Section | Contact Form | A form for customers to fill out and send inquiries. |
|---|---|---|
| Available blocks | Name | Input for visitor's name. |
| Required input for visitor's email address. | ||
| Phone number | Optional input for a contact number. | |
| Message | A text area for the visitor's message. | |
| Form item | Custom input fields (Text, Dropdown, Radio button, Checkbox). |
3. Location & Setup
To add and set up the Contact Form section:
- Open the Shopify Theme Editor (Online Store > Themes > Customize).
- Select where you want to place it.
- Click "Add Section".
- Search for Contact Form.
- Click on it to add.
4. Highlight Features
- Custom fields: Add or modify fields like name, email, phone, and more.
- Email notification: Form submissions go directly to your store's sender email.
- Content options: Show additional content like images or contact details.
- Custom success messages: Display a personalized message after form submission.
5. Common Use Cases
🤔 How to set up the contact form?
Want to create a user-friendly contact form for your customers? Here's how:
STEP 1: Add the section & blocks
- Add a Contact form section.
- By default, you have a Name, Email, Phone number, and Message block.
- Click "Add block" to add the Form item block or delete the unused ones.
STEP 2: Configure the form details
- Enter section Heading and adjust size.
- Select heading tag for SEO.
- Add descriptive subheading (optional).
- Choose form submit button label.
STEP 3: Customize form fields
Click on each block to edit its look. For more information, you can check out "What customization options can you give your Contact form?" below.
STEP 4: Display additional content (Optional)
Besides the contact form, you can:
- Show an image for visual interest (Option name: Image).
- Include store contact information (Option name: Contact information).
- Or both! (Option name: Both).
Just go to the Contact form section, scroll down to Show additional content, and choose the option you want.
STEP 5: Click "Save" when done.
🤔 How to display store contact information?
Want to make it easy for customers to reach you? Here's how:
STEP 1: Click on the Contact form section to open its settings, and find Show additional content.
STEP 2: Choose Contact Information from the dropdown list.
STEP 3: Scroll down to the Contact information setting group, and fill out your store's details like address, phone number, and business hours.
STEP 4: Click "Save" when done.
🤔 How to show an image beside the contact form?
Want to draw customers' attention with an engaging visual for your contact form? Here's how:
STEP 1: Click on the Contact form section to open its settings, and find Show additional content.
STEP 2: Choose Image from the dropdown list.
STEP 3: Scroll down to the Image setting group, add your image, and change its height on both desktop and mobile as you want.
STEP 4: Click "Save" when done.
🤔 How to show an image & contact information beside the contact form?
If you want to show both image and contact information instead of just a simple contact form, follow this:
STEP 1: Click on the Contact form section to open its settings, and find Show additional content.
STEP 2: Choose Both from the dropdown list.
STEP 3:
- In the Image setting group, add your image and change its height on both desktop and mobile as you want.
- In the Contact information setting group, fill out your store's details like address, phone number, and business hours.
STEP 4: Click "Save" when done.
🤔 How to Add Custom Fields to the Form?
Need to collect specific information different from the default boxes? Here's how to add the custom block:
STEP 1: Click on "Add block" and choose the Form Item block.
STEP 2: Enter the field label, select the Form input type (Text, Dropdown, Radio button, Checkbox), and add Options if needed (separate each option with a semicolon, e.g. Client;Partner;Retailer;Wholesaler).
When the input type is Radio button or Checkbox, an Option direction setting also appears - choose Vertical (default) to stack the options, or Horizontal to lay them out side by side (options with long text still wrap to a new line automatically).
STEP 3: Mark the field as Required if needed.
STEP 4: Click "Save" when done.
⚠️ Note: Give each Form item block a unique Label - the label also identifies the field when the form is submitted, so two fields sharing the same label will only capture one value.
⚠️ Note: The Send button stays disabled until every required field is filled in correctly - including a validly formatted Email, which is always required.
🤔 What customization options can you give your Contact Form?
| For the whole Contact Form section: | |
| ✨ Change color scheme |
Click on the Contact Form section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme. |
| ✨ Change the heading size |
Click on the Contact Form section, and choose the Heading size to be Small, Medium, or Large. |
| ✨ Change the Heading tag (for SEO purposes) |
Click on the Contact Form section, and choose the Heading tag from the list. |
| ✨ Change the heading alignment |
Click on the Contact Form section, and choose the Heading alignment to be Left, Right, or Center. |
| ✨ Change the Success message content |
Click on the Contact Form section, and type into the Success message box the message you want to show when customers successfully submit the form. |
| ✨ Change the form alignment |
Click on the Contact Form section, and choose the Form alignment to be Left or Right. |
| ✨ Change the section width, add padding, or add a divider |
Click on the Contact Form section, and scroll down to the Section layout group, and you will be able to change those settings. |
6. Change Logs
Version 2.0.0 - August 2026
- New – Option direction: Added an Option direction setting (Vertical/Horizontal) for Form item blocks using the Radio button or Checkbox input type.
- Changed – Form validation: The Send button now stays disabled until all required fields, including a validly formatted Email, are filled in - shared with Withdrawal request, Contact menu, and Back in stock alert.
- Changed – Dropdown fields: No longer auto-select the first option by default; the field's border now matches the rest of the form.
7. Support Information
Need help? Contact our support team at Omni Themes Support
