> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/forms/contact-form.md). # Contact Form The Contact Form section allows customers to send you messages directly through your store. You can customize the form by adding different types of fields like text inputs, text areas, radio buttons, and informational text blocks. Form submissions are sent to your Shopify admin email, making it easy to respond to customer inquiries.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. Open **Sections** > **Contact Form**. 3. Make your changes, preview live, then click **Save**. {% endhint %} ### Settings #### Heading * **Heading**: Enter a title for the contact form, such as "Get in Touch" or "Contact Us". Leave blank to use the default "Contact form" heading. * **Underline**: When enabled, adds a decorative underline beneath the heading. * **Heading size**: Choose how large the heading appears, from XS (extra small) to 2XL (extra extra large). * **Heading alignment**: Controls where the heading appears horizontally - left, center, or right. * **Show informational text about required fields**: When enabled, displays a note below the form explaining that fields marked with an asterisk (\*) are required. #### Layout * **Container**: Choose how the form is displayed - No container (full width with no background), or Section container (contained within a colored background box). * **Container color scheme**: When using Section container, select a color scheme for the form container background. This allows the form to have a different color scheme than the section background. * **Section color scheme**: Select a color scheme for the section background and text. #### Button * **Outline style**: When enabled, changes the submit button from a solid button to an outline button style. * **Button alignment**: Controls where the submit button appears horizontally - left, center, or right. #### Padding * **Top**: Adjust the spacing above the section (0 to 400 pixels). * **Bottom**: Adjust the spacing below the section (0 to 400 pixels). *** ### Blocks You can add multiple blocks to build your custom contact form. Click "Add block" to add fields to your form. #### Text Input Adds a single-line text input field to your form. * **Label**: The text that appears above or inside the input field to describe what information should be entered. * **Field Name**: A unique identifier for this field used when the form is submitted. Use lowercase letters and underscores (e.g., first\_name, phone\_number). This helps you identify which field contains which information in the email you receive. * **Input Type**: Choose the type of input - Text (general text), Email (validates email format), Phone (validates phone number format), Number (numeric input only), or URL (validates web address format). * **Autocomplete Attribute**: Helps browsers provide better autofill suggestions. Choose from options like Full Name, First Name, Email Address, Phone Number, Street Address, Country, Postal/Zip Code, and more. Select "Disable Autocomplete" to turn off browser suggestions, or "Default" to let the browser decide based on the input type. * **Required Field**: When enabled, this field must be filled out before the form can be submitted. Required fields are marked with an asterisk (\*). #### Textarea Input Adds a multi-line text area for longer messages or comments. * **Label**: The text that appears above or inside the text area to describe what should be entered. * **Field Name**: A unique identifier for this field used when the form is submitted. Use lowercase letters and underscores (e.g., message, comments). * **Number of Rows**: Set how many lines tall the text area appears (3 to 10 rows). Users can still type more text than visible - the area will scroll. * **Required Field**: When enabled, this field must be filled out before the form can be submitted. #### Radio Buttons Adds a group of radio button options where users can select one choice. * **Group Label**: The text that appears above the radio button options to describe what the user should choose. * **Field Name**: A unique identifier for this field used when the form is submitted. Use lowercase letters and underscores (e.g., inquiry\_type, preferred\_contact). * **Radio Direction on desktop**: Choose whether radio buttons appear horizontally (side by side) or vertically (stacked) on desktop. On mobile, radio buttons always appear vertically. * **Option 1 through Option 7**: Enter the text for each radio button option. You can add up to 7 options. Leave options blank if you don't need all 7. * **Required Field**: When enabled, users must select one option before the form can be submitted. #### Rich Text Adds formatted text content anywhere in your form, such as instructions, disclaimers, or additional information. * **Content**: Enter the text you want to display. You can use formatting like bold, italic, and links. This is useful for adding instructions, privacy notices, or helpful information between form fields. *** ### Tips * Use the Field Name setting carefully - it helps you identify which information came from which field in the email you receive. Use descriptive names like "customer\_name" or "order\_question". * Mark important fields as required to ensure you receive all necessary information from customers. * Use Rich Text blocks to add helpful instructions or context between form fields, which can reduce confusion and improve form completion rates. * Test your form after building it to make sure all fields work correctly and that you receive submissions properly. * The form automatically validates email addresses and phone numbers when those input types are selected, helping ensure you receive valid contact information.