Contact Form

Section

A form for customers to fill out and send inquiries.

Available blocks

Input for visitor’s name.

Required input for visitor’s email address.

Optional input for a contact number.

A text area for the visitor’s message.

Custom input fields (Text, Dropdown, Radio Button, Checkbox).

🤔 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 the part talking about What customization options can you give your Contact form?

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 setting, 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 setting, 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 just a simple contact form, follow this:

STEP 1: 

Click on the Contact form section to open its setting, 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 input type (Text, Dropdown, Radio, Checkbox), and add options if needed.

STEP 3: 

Mark the field as Required if needed.

STEP 4: 

Click “Save” when done. 

🤔 What customization options can you give your Contact Form?