# Contact Form

It’s designed for collecting customer messages, feedback, or inquiries and can include headings, layout adjustments, images, background styling, and advanced color and hover effects.

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FNCEQWq2Hgv3YI0SPdROd%2Fs_forms_c.png?alt=media&#x26;token=62737419-b3e6-48ad-bed2-f095a3d86491" alt=""><figcaption></figcaption></figure>

**Location:** `Sections -> Templates -> Forms -> Contact Form`

***

## Forms: Contact form — Options Overview

| **Option**                       | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Heading**                      | Defines the main title of the section displayed above the contact form. Useful for introducing the purpose of the form (e.g., “Contact Us”, “Get in Touch”).                                                                                                                                                                                                                                                                                                                                                                  |
| **Subheading**                   | Adds a smaller descriptive text line above or below the heading. Often used for short introductions or additional context.                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Heading**                      | Input field for the main section heading text.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **Description**                  | Optional field for adding a paragraph under the heading. Can include brief instructions, contact information, or a welcome message.                                                                                                                                                                                                                                                                                                                                                                                           |
| **Heading alignment**            | Aligns heading and description horizontally. Options: **Left**, **Center**.                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **Layout**                       | Defines the overall layout and spacing of the section.                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| **Top spacing**                  | Controls the vertical space above the section. Options: **None**, **Small**, **Medium**, **Normal**. Used to adjust spacing between sections.                                                                                                                                                                                                                                                                                                                                                                                 |
| **Width**                        | Determines how wide the contact form appears within the page container. Options: • **Default** – matches page content width. • **Boxed** – adds inner padding and visual framing. • **Wide** – extends layout for large screens (1440px and more).                                                                                                                                                                                                                                                                            |
| **Image**                        | Adds an optional image next to or above the contact form for visual enhancement.                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Image display**                | Controls visibility of the image. Options: **Hide**, **Show**.                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **Image hover effect**           | Applies an animation when the image is hovered. Options: • **Basic theme settings** – inherits the default effect set in global theme settings. • **Disable** – no hover animation. • **Zoom in #1** – image scales up slightly. • **Zoom in and rotate** – zooms and rotates gently. • **Zoom in #2** – stronger zoom-in effect. • **Zoom out #1** – image zooms out slightly. • **Zoom out #2** – stronger zoom-out effect. • **Slide** – slides image in a direction. • **Shine** – adds a moving light reflection effect. |
| **Image ratio**                  | Controls the shape of the image container. Options: • **Auto** – keeps original image proportions. • **Portrait (3:4)** – taller image format. • **Landscape (4:3)** – wider format. • **Square (1:1)** – equal height and width. • **Round (1:1)** – circular image crop. • **Social story (9:16)** – vertical mobile-style image. • **Widescreen (16:9)** – cinematic wide image format.                                                                                                                                    |
| **Align text relative to image** | Defines vertical alignment of form content relative to the image. Options: **Top**, **Center**.                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Swap content**                 | Reverses the layout order between the image and form — e.g., places image on the opposite side. Useful for alternating design flow across sections.                                                                                                                                                                                                                                                                                                                                                                           |
| **Content width**                | Sets how much horizontal space the text and form occupy within the section. Adjustable from **25% to 75%**, controlling balance between image and text areas.                                                                                                                                                                                                                                                                                                                                                                 |
| **Dividing line**                | Adds a line separator for visual structure between the form and other sections.                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Show**                         | Toggles the dividing line’s visibility. When enabled, a thin horizontal line appears below the section.                                                                                                                                                                                                                                                                                                                                                                                                                       |
| **Background**                   | Defines the type of background used for the section.                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **Background type**              | Options: • **Hide** – transparent background. • **Color** – solid background color. • **Gradient** – smooth color transition between two or more tones. • **Image** – background image for the section.                                                                                                                                                                                                                                                                                                                       |
| **Colors**                       | Provides detailed color customization for text, input fields, buttons, and decorative lines.                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **Base**                         | Defines the base color used for general text and background areas.                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **Accent**                       | Sets an accent color for highlighting interactive elements such as links or icons.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **Lines**                        | Defines the color of section dividers, borders, or decorative lines.                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **Input**                        | Group of settings for contact form field styling.                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| **Background**                   | Background color of input fields.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| **Border**                       | Border color of input fields.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| **Text**                         | Text color inside the form fields.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **Background hover**             | Background color of input fields when hovered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **Border hover**                 | Border color of input fields when hovered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Outline hover**                | Outline or shadow color appearing around input fields on hover.                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Text hover**                   | Text color change when hovering over input text or placeholder.                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Button**                       | Group of options for submit button styling.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **Show background**              | Toggles whether the button uses a solid background or transparent style.                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| **Background**                   | Main color of the button background.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **Background gradient**          | Adds a gradient effect to the button background.                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Border**                       | Button border color.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **Text**                         | Text color of the button label.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **Show background on hover**     | Enables a hover background change effect.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| **Background hover**             | Background color of the button when hovered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **Background gradient hover**    | Hover gradient transition applied to the button.                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Border hover**                 | Changes button border color when hovered.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| **Text hover**                   | Defines button text color on hover.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| **Enable shadow**                | Enables drop shadow for the button, giving it a raised, clickable appearance.                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| **Shadow**                       | Color and intensity of the button’s shadow.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **Shadow hover**                 | Defines the shadow color and spread when the button is hovered, adding a dynamic depth effect.                                                                                                                                                                                                                                                                                                                                                                                                                                |
