Taiga
documentation

Contact form

The Contact Form section provides a straightforward way for visitors to get in touch, making it easy for them to submit queries by providing essential information such as their name, email, phone number, and a message. Additional content like a subheading, heading, and custom text can also be integrated below the form to guide users or offer further information.

 

Steps

  1. Open the Theme Editor.
    Navigate to your Shopify dashboard and open the Theme Editor for your store.
  2. Add the Contact Form Section.
    Click on 'Add section' and select 'Contact Form' to integrate this section into your page layout.
  3. Save your changes.
    After customizing the Contact Form section, click 'Save' to implement your adjustments.

Edit Section Settings:

Color Scheme: Adjust to match the visual style of your site.
Text Alignment: Options include left, center, or right to best suit the layout and design of your page.
Desktop Layout Settings: Set margins for the top and bottom to ensure the form fits neatly within the overall page structure.
Mobile Layout: Similarly, adjust margins for the top and bottom to optimize the form's appearance on mobile devices.

    Customize Blocks:

    Heading Block:

    Heading: Input a title for your contact form to direct users appropriately.
    HTML Tag Selector: Choose the correct HTML tag (e.g., <h1>, <h2>) to influence both the visual hierarchy and the SEO relevance of the page.
    Size Modifier: Adjust the size for both desktop and mobile to ensure clear visibility across devices.
    Margin Top: Customize the top margin to balance the heading within the form section.


    Subheading Text Block:

    Subheading: Provide a brief introductory text or additional instructions related to the contact form.
    Size Modifier: Control the size for desktop and mobile, maintaining consistency in the section's design.
    Margin Top: Adjust to ensure a smooth visual transition from the heading to the subheading.

    Text Block:

    Text: Include further details or encouragement for users to reach out.
    Size Modifier: Set the appropriate text size for both desktop and mobile to enhance readability.
    Margin Top: Align the text block neatly with other content elements.

    Form Block:

    Margin Top: Ensure there's sufficient space above the form fields for an organized layout on both desktop and mobile devices.

    Email Block:

    Email Address: Specify the email address where form submissions will be directed. This setting is crucial as it defines the recipient of the information collected.
    Label: Set the label for the email input field, guiding users effectively.
    Select Width: Choose between 100% for full width or 50% for half width, depending on how you want the email field to appear within the form.

    Custom Field:

    Label: Create a custom label for additional fields as required.
    Field Type: Select from various options like short text, long text, phone number, number, URL, date, or time to cater to the information you need.
    Width: Similar to the email block, choose the width for the custom field.
    Required: Mark the field as required if necessary, ensuring crucial information is not omitted by the user.