# Contact form
A Contact form is helpful in generating leads, boosting sales and conversions by understanding your customers' needs.
## How to add a Contact form
{% hint style="success" %}
Steps
1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Contact form.**
3. Make necessary changes.
4. **Save.**
{% endhint %}
## How to edit a Contact form
### Section settings
Adjust the **Color scheme** and **Container color scheme** for this section.
Use the provided text fields to add a suitable **Heading**.
* Leave it blank if you do not want to display it
You can also change the **Heading size** to:
* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl
* Display md
* Display lg
* Display xl
### Block settings
#### 1) Custom field
You can add multiple fields with different types to the contact form section by adding **Custom field** blocks. They are used to collect customization information via your contact form.
As you can see in the screenshots below, you can select a preferred **Field type** such as Text, Textarea, Phone, Select, Checkbox, or Radio. (Note: The phone field type can only be added once)
Give the custom field the **Label** and **Placeholder** to distinguish it from other fields. Leave them blank if you do not want to display them.
You can choose to set up this section as required by enabling the **Required** checkbox. Moreover, check the **Full width** checkbox to display the custom field in full width.
#### a) Select
If your field type is **Select**, you can add multiple options for it in the **Options** field.
Each option is separated by a comma (e.g: Option 1, Option 2, Option 3).
#### b) Checkbox
If your field type is **Checkbox**, you will have option to give the **Checked value** and **Uncheck value** fields suitable values.
For example:
* Checked value: Yes
* Unchecked value: No
#### c) Radio
If your field type is **Radio**, you can add multiple options for it in the **Options** field.
Each option is separated by a comma (e.g: Option 1, Option 2, Option 3).
#### 2) Image card
#### a) General settings
Adjust the **Color scheme** for the Image card block.
Click **Select image** to assign the image to the banner on the desktop and use the slider to change the **Image overlay opacity**.
Add some text for the banner’s **Heading, Subheading**, and **Description.** Leave them blank if you do not want to display them.
You can also change the **Heading size** (Heading 1/ Heading 2/ Heading 3) to make your image card block look more balanced.
Add a call-to-action button that directs customers to the target page specified in the **Card link** field. Add a **Label** then choose a **Button style** (Primary button/ Secondary button/ Underline button)**.**
Furthermore, you can also modify the look as well as the position of the content by changing these properties:
* **Content position**: Top left/ Top center/ Top right/ Middle left/ Middle center/ Middle right/ Bottom left/ Bottom center/ Bottom right
* **Content alignment**: Left/ Center/ Right
* **Content spacing**: Small/ Medium/ Large
#### b) Mobile Layout
You can also adjust the **Color scheme** for the Image card block on the mobile device.
Especially, if you want to display a different card image on the mobile device, you can insert another image to the **Image** field.
You are able to display the content below or above the image by enabling/disabling the **Show content below image** checkbox.
{% tabs %}
{% tab title="Enable" %}
{% endtab %}
{% tab title="Disable" %}
{% endtab %}
{% endtabs %}
Moreover, the block also allows you to change **Content alignment** (Left/ Center/ Right) on mobile.
