Form

The contact form block is a versatile tool designed to be integrated into various sections of a theme, allowing users to collect information from visitors. It offers a range of customization options, including button styles, text alignment, and the ability to add icons and captions. Users can also specify headings and subheadings to provide context and detail.

This block is available in sections such as Collage, Contact form, Product information, Multicolumn, and Featured product. It ensures accessibility with clear labels and instructions, and its responsive design adapts to both desktop and mobile devices.

Practical usage examples include integrating the contact form block into a product information section to facilitate customer inquiries, using it in a multicolumn layout for a visually appealing design, and adding it to a featured product section to enable customer engagement with highlighted products.

Overview #

The contact form block is designed to be integrated into various sections of a theme, allowing users to collect information from visitors. It provides a range of customization options to tailor the form's appearance and functionality to fit different contexts.

Key components and functionality #

Contact form

This block displays a default contact form, enabling users to gather information from visitors. It is versatile and can be used in multiple sections of a theme.

Button style

The button style setting allows you to customize the appearance of buttons within the form. Available options include:

1. Primary
2. Secondary
3. Extra large
4. Plain
5. Small
6. Small secondary

Text alignment

This setting controls the alignment of text within the form, providing flexibility in how the content is displayed.

Icon

The icon setting allows you to add an icon to the form, enhancing its visual appeal and functionality.

Caption

This setting lets you add a caption to the form, providing additional context or instructions to users.

Heading

The heading setting allows you to specify a title for the form. The default value is Contact form.

Heading type

This setting lets you choose the HTML tag for the heading, affecting its size and importance. Options include:

1. Paragraph
2. Heading 1
3. Heading 2
4. Heading 3
5. Heading 4
6. Heading 5
7. Heading 6

The default value is Heading 2.

Subheading

This setting allows you to add a subheading to the form, providing further detail or context.

Visibility

The visibility setting controls when the form is displayed. Options include:

1. Do not hide
2. Hide on desktop
3. Hide on mobile

The default value is Do not hide.

Available in sections #

• Collage
• Contact form
• Product information
• Multicolumn
• Featured product

Usage notes #

• Ensure that the form is accessible by providing clear labels and instructions for all fields.
• Consider the responsiveness of the form, ensuring it displays correctly on both desktop and mobile devices.
• Use contrasting colors for text and buttons to enhance readability and usability.

Usage examples #

1. Contact form in a product information section: Use the contact form block to allow customers to inquire about specific products directly from the product information page.

2. Multicolumn layout: Integrate the contact form into a multicolumn section to create a visually appealing layout that combines text, images, and the form.

3. Featured product section: Add the contact form to a featured product section to enable customers to ask questions about highlighted products.