# Contact template

## For Customers

## Adding a Section

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2F3ZFQySZWf9AHQezqURwe%2FUntitled.png?alt=media&#x26;token=f63217c1-86ac-495f-8a7c-7c9a887820c2" alt=""><figcaption></figcaption></figure>

The section is static on a **contact page** template, it was added initially and cannot be removed.

## Section settings

### Banner

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FMmfXmcXeNlia4K9Raai9%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-03-01_%25D0%25B2_17.47.49.png?alt=media&#x26;token=4e806cd9-1660-464b-aef9-24803ef68922" alt=""><figcaption></figcaption></figure>

1. **`Image desktop`** - the setting allows you to set the banner image for the **desktop**;
2. **`Image mobile`** - the setting allows you to set the banner image for the mobile;

### General

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FfNfRMnmuJe1Y2IHH56f4%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-03-01_%25D0%25B2_17.48.35.png?alt=media&#x26;token=db93f30f-2ae1-4ce8-8500-bdbabe0a509e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FcmmcZ2FJMjKMYs9l4fOm%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-03-01_%25D0%25B2_17.49.20.png?alt=media&#x26;token=7a25e50e-0855-49af-89a1-99a7f2635cf7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FISDNB7QCyOfDLLMEgiVG%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-03-01_%25D0%25B2_17.50.01.png?alt=media&#x26;token=e01cbcfb-cd58-4ea5-8b5b-5a3b13a95073" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FxxKapw3AbpBJLszoAqIn%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-03-01_%25D0%25B2_17.51.47.png?alt=media&#x26;token=a1c0edc3-d6c9-4796-b82c-49cb6badfeb5" alt=""><figcaption></figcaption></figure>

1. **`Heading`** - the setting allows you to set the title for the contact section;
2. **`Subheading`** - the setting allows you to set the subtitle for the contact section;
3. **`Address heading`** - the setting allows you to set the title for the address info;
4. **`Address icon`** - the setting allows you to set the icon for the address info;
5. **`Address text`** - the setting allows you to set the text for the address info;
6. **`Phone heading`** - the setting allows you to set the title for the phone info;
7. **`Phone icon`** - the setting allows you to set the icon for the phone info;
8. **`Phone text`** - the setting allows you to set the text for the phone info;
9. **`Email heading`** - the setting allows you to set the title for the email info;
10. **`Email icon`** - the setting allows you to set the icon for the email info;
11. **`Email text`** - the setting allows you to set the text for the email info;
12. **`Schedule heading`** - the setting allows you to set the title for the schedule info;
13. **`Schedule icon`** - the setting allows you to set the icon for the schedule info;
14. **`Schedule text`** - the setting allows you to set the text for the schedule info;
15. **`Show socials`** - the setting enables or disables the display of social media;
16. **`Social text`** - the setting allows you to set the text before social media;

### Contact form

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FFsjnAMiQr6Bw8AyRKZfT%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-03-01_%25D0%25B2_17.56.07.png?alt=media&#x26;token=9da379a6-7788-4a06-b54e-d2762247c2ad" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FPri0Wc8Rmkjlitp9mj48%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-03-01_%25D0%25B2_17.56.39.png?alt=media&#x26;token=aed6dcee-dfcf-4585-9c46-ebe1c948ec33" alt=""><figcaption></figcaption></figure>

1. **`Name label`**- the setting allows you to set the label for the **Name** field;
2. **`Name placeholder`** - the setting allows you to set the placeholder for the **Name** field;
3. **`Email label`**- the setting allows you to set the label for the **`Email`** field;
4. **`Email placeholder`** - the setting allows you to set the placeholder for the **Email** field;
5. **`Phone label`**- the setting allows you to set the label for the **Phone** field;
6. **`Phone placeholder`** - the setting allows you to set the placeholder for the **Phone** field;
7. **`Message label`**- the setting allows you to set the label for the **Message** field;
8. **`Message placeholder`** - the setting allows you to set the placeholder for the **Message** field;
9. **`Button label`** - the setting allows you to set the text for the button.
10. **`Button style`** - the setting allows you to select the button style: primary / secondary / primary with border / secondary with border;

### Map

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2Fbyv09f6hBgg6d9hBVwOl%2FUntitled%201.png?alt=media&#x26;token=5183d53a-d796-4ee8-b18e-31b1e26e9f07" alt=""><figcaption></figcaption></figure>

1. **`Google maps API key`** - the setting allows you to add a **Google Maps API key**. [Learn more](https://developers.google.com/maps/documentation/embed/get-api-key?hl=en) about how to create an API key;
2. **`Map query`** - the setting allows you to add a **query parameter** that is responsible for adding a point on the map. In our case, only the **place mode** has been added. You can add one point to the map in many ways. [Learn more](https://developers.google.com/maps/documentation/embed/embedding-map?hl=en#place_mode) about how to add a query parameter;
3. **`Map url`** - the setting allows you to set a link to the map;
4. **`Map image desktop`** - the setting allows you to set the map image for the **desktop**;
5. **`Map image mobile`** - the setting allows you to set the image for **mobile**.

### Colors

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FLcRWEPHwfomE3c04KLjI%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-03-01_%25D0%25B2_17.59.08.png?alt=media&#x26;token=cd70298f-cd79-4593-b1e9-5d31cf8594c5" alt=""><figcaption></figcaption></figure>

1. **`Banner heading color`** - color for the banner heading;
2. **`Banner overlay`** - color for the banner overlay;

### Layout

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FpCXpQYu4fHnpMM1uFH0E%2F%25D0%25A1%25D0%25BD%25D0%25B8%25D0%25BC%25D0%25BE%25D0%25BA_%25D1%258D%25D0%25BA%25D1%2580%25D0%25B0%25D0%25BD%25D0%25B0_2024-03-01_%25D0%25B2_18.00.49.png?alt=media&#x26;token=21a442a0-4a04-4746-b4c5-d82bb0f9ddb7" alt=""><figcaption></figcaption></figure>

1. **`Container width`** - a container width of the section. If “Inherit” value is selected then container width based on the group 'Layout' settings in the Theme settings;
2. **`Desktop offset top`** - the **top** indent of the section on the **desktop**;
3. **`Desktop offset bottom`** - the **bottom** indent of the section on the **desktop**;
4. **`Mobile offset top`** - the **top** indent of the section on the **mobile**;
5. **`Mobile offset bottom`** - the **bottom** indent of the section on the **mobile**.

## **Additional information**

1. The social media link settings are located in the general theme settings;
2. If the `Map url` or `Map image` fields are not specified in the section settings, the map will not be displayed;
3. The map link opens in a new window.