Contact form settings

Setting Description
Heading To add a main section heading, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the heading such as making it bold, italic, or adding a hyperlink.
Heading font family
  • Heading
  • Body

In Theme Settings, you can assign a different font family to headings and body text.

This option allows you to customize the visual style of your heading by selecting heading or body styles.

For some headings, it might be more effective to apply the body text style instead of the designated heading font. This choice depends on how well the font families harmonize and the overall appearance you want to achieve.

Heading size

The heading size setting offers three options to control the size of your section heading:

  • Small
  • Medium
  • Large
Font weight

Font weight defines the thickness or boldness of text on your store. Available options for heading:

  • Normal (400): The default font weight for body text, which can also be applied to headings.
  • Medium (500): Slightly thicker, suitable for emphasized body text or light headings.
  • Semi-Bold (600): Heavier, ideal for subheadings or highlighted text.
  • Bold (700): Strongest weight for maximum emphasis.
Description

Provide additional details or instructions to help customers complete the contact form. This text appears beneath the form title and offers context or guidance.

In the top menu of the field, you can find options to customize the text. Furthermore, you can click the dynamic source button to insert a dynamic source for the description.

Button style In Shopify, button style can be customized by using the primary and secondary button color sets, which are defined in the theme settings. These color sets allow you to style buttons consistently across your store.
Button outline

None: The button has no outline. It appears flat, with just the background color and text, giving it a clean, minimal look.

Outline: The button has a visible border around it, but the background is transparent.

Outline on Hover: The button appears flat without a border or background initially. However, when the user hovers over it, a visible border appears, and the button's background remains transparent.

Show select field Adds a dropdown menu to the contact form, allowing users to choose from predefined options. Use this field to categorize inquiries and streamline form submissions.
Select label Indicates the purpose of the dropdown field. The label should clearly describe what the user is selecting. Common examples include “Select,” “Department,” or “Contact,” depending on the context and available dropdown options.
Bottom border Adds a horizontal line below the contact form to visually separate it from the following section. Useful for creating a clear division and improving layout structure.
Color scheme Applying a color scheme to the contact form section automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used.  Learn more about color schemes.


Section paddings


Setting Description
Top padding The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider. 
Bottom padding The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section. 
Top padding mobile The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us