Contact form

With the Contact form section, you easily add a working email form to your page. Messages that visitors send via this form are automatically forwarded to the email address you have set as the 'Sender email' in the general Shopify settings (under 'Settings' > 'Notifications').

When you add this section via the Contact form preset, the theme immediately loads a ready-made form with the most common fields (Name, Email, Phone number, Message, and a Submit button). You can, of course, customize these fields to your liking.

General Layout & Design

• Color schemes: You can manage the colors of the contact area in two layers:
  • General color scheme: Determines the background color of the entire section.
  • Cards color scheme: Determines the background color of the frame (the 'card') containing the actual form. By choosing a contrasting color here, the form stands out nicely.
• Section display (Type): Determine whether the background of this section spans the full width (Edge-to-edge) or is shown centered within a frame (Box).
• Spacing (Whitespace): Manage the margin (outer space) and padding (inner space) at the top and bottom. Choose between the default settings or remove the space completely.
• Custom Class: An option for developers to apply custom CSS to the form.

Introduction & Text

Give visitors some context before they fill out the form:

• Alignment: Align the title and the introductory text to the left, center, or right.
• Title & Formatting: Enter a catchy heading (e.g., "Contact us" or "Ask a question") and adjust the HTML tag, the visual size, and the font weight.
• Intro text: Use the text editor to add a brief explanation or, for example, opening hours and a phone number, right above the form.

Form fields (Blocks)

You build the actual form entirely modularly using blocks. You can determine the order by dragging them. Each block represents a component or input field:

• Header: Add an extra title inside the form frame (e.g., "Enter your details").
• Input name: The standard field for the visitor's name. You can check whether this field is mandatory (Required) to fill out. (Maximum 1 can be added).
• Input email: The standard, mandatory email field so you can reply to the message. (Maximum 1 can be added).
• Input field: Add extra fields yourself for specific information (e.g., "Order number" or "Company name").
  • Name: This is the internal system name of the field. Do not use spaces or special characters here (e.g., ordernumber).
  • Label & Placeholder: This is the text the visitor sees. The label is above the field, the placeholder is inside the empty field for clarification.
  • Type: Determine whether the visitor can enter text, an email address, a phone number (tel), or only numbers.
  • Required: Check whether the visitor must fill out this field.
• Textarea message: The large text box where visitors can type their question. Determine if this is required and set the number of displayed text lines (Rows) to determine the height of the box.
• Button submit: The button used to actually send the form. Customize the text (e.g., "Send message") and optionally add a FontAwesome icon (such as an arrow). (Maximum 1 can be added).