Brickspace Lab
Contact usContact ShopifyTry a theme
Keystone
Keystone
  • Keystone documentation
  • Getting started
    • Theme basics
    • Theme settings
      • Colors
      • Typography
      • Borders
      • Prices
      • Quick add
  • Guides
    • Products
      • Product badges
      • Product subtitles
      • Custom content for tables
      • Replace "Add to cart"
      • Disable quick add
    • Wholesale
      • Wholesale basics
      • Account restrictions
    • Color and option swatches
    • Device specific visibility
    • Discount popups
  • Templates
    • Collection template
    • Product template
    • Blog template
    • Article template
  • Sections
    • Global Sections
      • Header
      • Footer
      • Navigation links
      • Announcement
      • Cart drawer
      • Account drawer
      • Search drawer
      • Menu drawer
    • Media & Promotional
      • Slideshow
      • Video
      • Split banner
      • Marquee
      • Image hotspot
      • Countdown
      • Discount
      • Banner
      • Slider
      • Testimonial slider
      • Search banner
    • Product & Collection Displays
      • Product grid
      • Product slider
      • Product table
      • Product comparison
      • Recently viewed
      • Collection list grid
      • Collection list slider
      • Featured product
      • Comparison table
    • Content & Marketing
      • Rich text
      • Blog posts grid
      • Testimonial grid
      • Logo list
      • Icon grid
      • Collapsible content
      • Tabs
      • Collage
    • Utility & Custom
      • Custom liquid
      • Tool tip
      • Store locater
    • Forms & CTAs
      • Email sign-up
      • Sign-up form
      • Contact form
  • General
    • Changelog
      • v1.3.0
      • v1.2.0
      • v1.1.0
      • v1.0.1
      • v1.0.0
    • Known issues and troubleshooting
    • Cloning a demo theme
Powered by GitBook
On this page
  • Section overview
  • Section settings
  • Block settings

Was this helpful?

Edit on GitHub
  1. Sections
  2. Forms & CTAs

Contact form

Section overview

The Contact section provides a customizable contact form that allows customers to send messages to the store owner through their Shopify site.

Common use cases

  • Creating a dedicated contact page for customer inquiries

  • Adding a feedback form to product or information pages

  • Building a custom support request form

  • Collecting specific information from customers (like sizing requests or custom order details)

Usage tips

  • Keep the form fields concise and only request information that's necessary

  • Use clear, descriptive labels for form fields to guide users

  • Consider adding a message explaining how quickly customers can expect a response

  • Ensure the form displays well on mobile by previewing it at different screen sizes

  • Avoid placing too many form fields as this can discourage customers from completing the form

Section settings

Setting
Description

Heading

The title displayed above the contact form

Top spacing

Controls the amount of padding above the section (0-300px)

Bottom spacing

Controls the amount of padding below the section (0-300px)

Color scheme

Determines the background and text color combination of the section

Border color

Sets the color of any borders applied to the section

Button color

Determines the style and color of the submit button

Border position

Controls where borders appear around the section

Horizontal alignment

Sets the horizontal alignment of the content (left, center, or right)

Enable margin

When enabled, applies horizontal margin to the section

Enable max width

When enabled, limits the maximum width of the form

Visibility

Controls whether the section displays on all devices, mobile only, or desktop only

Block settings

Field

This block allows you to add custom input fields to the contact form, with support for different field types.

Block limit: 50

Setting
Description

Input label

The label displayed for the input field

Input placeholder

The placeholder text shown inside the empty input field

Input type

Determines the type of input field (single line, multiple lines, or checkbox)

Last updated 25 days ago

Was this helpful?