> For the complete documentation index, see [llms.txt](https://webvista-studio.gitbook.io/krank/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webvista-studio.gitbook.io/krank/sections/forms-and-interaction/contact-form.md).

# Contact Form

This section allows you to display a customizable contact form, along with store contact information and an optional map. It is ideal for collecting customer inquiries and providing quick access to support.

***

### 🎨 Color Scheme

* **Color Scheme**: Choose or edit a color scheme that defines the color styles of all elements in the section, including background and text colors. Adjust it to match your brand's visual identity.

***

### 🗺 Map Settings

* **Display Map**: Enable to show a map next to the contact form for better location visibility.
* **Upload Map Image**: If no embed code is provided, a static map image will be displayed (recommended dimensions: balanced or proportional size).
* **Google Map Embed Code**: Paste your `<iframe></iframe>` Google Maps code here. For details on how to obtain the embed code, refer to the [Shopify Help Center](https://help.shopify.com/manual/online-store/add-edit-pages#add-content).

***

### 🧱 Section Structure

**📄 Contact Form Block**

Used for collecting user-submitted data with image and custom field support.

* **Upload Image**: Displayed above the form. Recommended size is **480x300px** for visual balance.
* **Form Title & Description**: Customize to guide your users effectively.
* **Text Alignment**: Options include left, center, or right alignment to suit your layout.
* **Show Phone Field**: Option to enable a phone number input field.

**📌 Supported Custom Fields:**

* **Custom Checkbox**:
  * Set as pre-selected or required. Useful for privacy agreements or subscriptions.
* **Custom Input Fields**:
  * Supported types: Text, Email, Number, Phone, URL, Date
  * Each field allows configuration of label name, placeholder, and whether it is required.
* **Custom Radio Buttons**:
  * Define multiple options using commas.
* **Custom Dropdown Field**:
  * Multiple selectable options (separated by commas). Can be set as required.

***

**🏢 Contact Info Block**

Displays key store contact details and social media links.

* **Color Scheme**: Separate color settings are available to highlight this section.
* **Icon with Text Block**:
  * Use for Address, Phone Number, Email, Business Hours, etc.
  * Choose appropriate icons and pair with descriptive text.
* **Social Media Icons**:
  * Customize icon style and size.
  * Enable tooltips to show the platform name on hover (e.g., Facebook, Instagram).

***

### ✅ Best Practices

* Use high-quality images for the map and contact form header to improve trust and professionalism.
* Keep form fields minimal to ensure easy and quick user interaction.
* Ensure consistent design in the contact info section to reinforce brand trust.
* Use dropdowns and radio buttons for structured data collection, simplifying backend management.