Appearance

Contact Form Block ​

What This Block Does ​

The Contact Form Block creates fully functional contact forms that customers can use to get in touch with you. It supports multiple field types, custom layouts, validation, and automatic error handling. The form is built with subblocks that you can arrange and customize.

Perfect for: Contact pages, customer inquiries, support requests, custom information collection, lead generation

How to Add It ​

Step 1: Add the Contact Form Block

  1. In your Shopify admin, go to Online Store → Themes
  2. Click Customize next to your live theme
  3. Navigate to any section that supports blocks
  4. Click Add block and choose Contact Form Block from the list

Step 2: Build Your Form

  1. The form comes with a basic preset (name, email, message, submit button)
  2. Add, remove, or rearrange form field subblocks as needed
  3. Configure each field's settings (type, label, validation, etc.)
  4. Customize the submit button text and styling

Step 3: Test Your Form

  1. Preview your form and test submitting it
  2. Check that required field validation works
  3. Verify you receive form submissions via email

Form Field Subblocks ​

The Contact Form Block uses three types of subblocks that you can mix and match:

Form Field Block ​

Creates input fields for collecting various types of information.

Field Types:

  • Text: General text input for names, subjects, etc.
  • Email: Email validation and formatting
  • Phone: Telephone number input
  • URL: Website or link input
  • Number: Numeric values only

Special Features:

  • Double Field Layout: Display two fields side-by-side (perfect for First Name/Last Name)
  • Required Field Validation: Mark fields as mandatory with visual indicators
  • Custom Placeholders: Add helpful placeholder text
  • Error Handling: Automatic error messages for invalid input

Double Field Examples:

  • First Name / Last Name
  • Phone / Email
  • City / State
  • Company / Job Title

Form Textarea Block ​

Creates larger text areas for longer messages and comments.

Settings:

  • Field Name: The form field identifier (e.g., "contact[message]")
  • Field Label: Display text above the textarea
  • Placeholder: Helpful text shown inside the empty field
  • Required: Make the field mandatory
  • Rows: Control the height (2-10 rows)

Best for: Messages, comments, detailed inquiries, special requests, feedback

Form Submit Block ​

Creates the button that submits the form.

Button Options:

  • Button Text: Customize the action text ("Send Message", "Submit", "Get In Touch")
  • Button Style: Choose Primary (bold) or Secondary (subtle) appearance
  • Button Size: Small, Medium, or Large
  • Button Width: Auto-width or Full-width spanning

Key Settings to Configure ​

Form Field Settings ​

Field Configuration:

  • Field Type: Choose the appropriate input type for data validation
  • Field Name: Use the format contact[fieldname] for proper form submission
  • Field Label: Clear, descriptive text that tells users what to enter
  • Required Fields: Mark essential fields as mandatory

Pro Tips for Field Names:

  • Use contact[name] for customer names
  • Use contact[email] for email addresses
  • Use contact[phone] for phone numbers
  • Use contact[company] for business information
  • Use contact[body] for main message content

Form Layout ​

Double Field Layout: Enable side-by-side fields for compact forms

  • When to use: Related information that belongs together
  • Mobile behavior: Automatically stacks vertically on small screens
  • Best practices: Keep field labels concise for double layouts

Validation & Error Handling ​

Automatic Features:

  • Required field validation with visual indicators (red asterisk)
  • Email format validation for email fields
  • Custom error messages for each field type
  • Form success message after successful submission
  • Error summary at top of form for failed submissions

Pro Tips for Success ​

Form Design Best Practices

  • Keep it simple: Only ask for information you actually need
  • Logical order: Start with basic info (name, email) then move to specifics
  • Clear labels: Use descriptive labels instead of vague terms
  • Smart defaults: Use double fields for related information like names
  • Test thoroughly: Always test your form submission and error handling

Common Mistakes

  • Too many fields: Long forms have lower completion rates
  • Unclear requirements: Mark required fields clearly and consistently
  • Poor field names: Use proper contact[fieldname] format for Shopify
  • No testing: Always test form submission and error scenarios
  • Inconsistent styling: Keep field sizes and spacing consistent

Form Submission Handling ​

What Happens When Forms Are Submitted:

  1. Shopify validates all required fields and field types
  2. If validation passes, the form data is sent to your store's contact email
  3. Customer sees a success message confirming their submission
  4. If validation fails, error messages appear highlighting the issues

Email Notifications:

  • Form submissions are sent to your store's customer email address
  • You can change this in your Shopify admin under Settings → General
  • Email includes all form field data and customer information