Contact form

Overview #

The Contact Form section is designed to facilitate communication between users and the site owner by providing a structured form for inquiries. This section can be customized to include additional contact information and can be rearranged to fit the desired layout.

Key components and functionality #

Text alignment

This setting allows you to adjust the alignment of text within the section. Options include left, center, and right alignment, enabling you to tailor the presentation of text to match your design preferences.

Icon

The icon setting lets you add a visual element to the section, enhancing its aesthetic appeal. You can choose from a variety of icons to best represent the purpose of the contact form.

Caption

The caption setting provides a space for a brief description or title that accompanies the contact form. This can be used to give context or instructions to users filling out the form.

Heading

The heading setting allows you to define the main title of the contact form. This is an important element for guiding users and ensuring they understand the purpose of the form.

Heading type

This setting lets you choose the HTML tag for the heading, ranging from paragraph (p) to various heading levels (h1 to h6). The default is h2, which is typically used for subheadings.

Subheading

The subheading setting provides an additional line of text beneath the main heading, offering further explanation or context for the contact form.

Button icon

This setting allows you to add an icon to the button, making it more visually appealing and informative.

Button text

The button text setting lets you customize the text displayed on the form's submission button, ensuring it clearly communicates the action to be taken.

Button link

This setting allows you to specify a URL that the button will link to upon submission, directing users to a relevant page or resource.

Open link in a new tab

This checkbox setting determines whether the button link opens in a new browser tab. The default is false, meaning links open in the same tab.

Button style

The button style setting offers various design options for the button, including primary, secondary, extra large, plain, small, and small secondary styles.

Button layout

This setting allows you to choose the layout of the button, with options for icon left, icon right, or icon only, providing flexibility in design.

Button position

The button position setting lets you decide where the button appears in relation to the content, with options for above or below. The default is above.

Button position mobile

Similar to the button position setting, this option allows you to specify the button's position on mobile devices, with the default being above.

Display full width mobile

This checkbox setting determines whether the button should span the full width of the screen on mobile devices. The default is false.

Usage examples #

1. Basic Contact Form: Use the default settings to create a simple contact form with a heading, subheading, and a submit button. Customize the button text to say "Send Message" and ensure the button opens the link in the same tab.

2. Enhanced Contact Form with Icon: Add an icon to the form to visually represent the contact method, such as a phone or email icon. Align the text to the center for a balanced look and use a primary button style for emphasis.

3. Mobile-Friendly Contact Form: Enable the display full width mobile setting to ensure the button is easily tappable on smaller screens. Position the button below the content for a more intuitive user experience on mobile devices.

By utilizing these settings, you can create a contact form that is both functional and visually appealing, tailored to the needs of your users and the design of your site.