> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.crisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to setup the Contact Form plugin

*Learn how to embed the Crisp Contact Form plugin on your website.*

The **Contact Form** plugin lets visitors contact you from a traditional form while still sending messages into your Crisp Inbox, where your team can reply and collaborate like on any other conversation.

---

# ${color}[#0080dd](Before you start)

The Contact Form plugin is available for Crisp workspaces and can be embedded on a public contact page. It uses **hCaptcha** to help protect your inbox from automated spam. To configure it, open [**Crisp**](https://app.crisp.chat), then go to **Plugins → Contact Form → Settings**.

__You will need:__
* Access to [**Crisp**](https://app.crisp.chat) and your workspace plugins
* Your Crisp **Website ID**
* An **hCaptcha** account with a site key and secret
* The domain where the form will be embedded

|| The Contact Form plugin is available for all Crisp plans, including Free workspaces.

---

# ${color}[#0080dd](Watch the video tutorial)

${youtube}[Video tutorial on how to setup Contact Form](qQG9qoIqf5A)

---

# ${color}[#0080dd](What the Contact Form does)

The Contact Form is designed for website contact pages. Visitors submit their email address and message from the form, and Crisp creates a conversation in your inbox so agents can reply from the same place they handle chat, email, and other channels.

![Contact Form embedded on a website contact page](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-24-at-115335_10m0ry3.png =1000xauto)

---

# ${color}[#0080dd](Embed the Contact Form)

Add the following `iframe` on the page where the form should appear.

```html
<iframe
    title="Contact Form"
    src="https://plugins.crisp.chat/urn:crisp.im:contact-form:0/contact/[WEBSITE_ID]"
    referrerpolicy="origin"
    sandbox="allow-forms allow-popups allow-scripts allow-same-origin"
    width="100%"
    height="600px"
    frameborder="0">
</iframe>
```

Replace **[WEBSITE_ID]** with your Crisp website identifier, available from **Settings → Workspace Settings → Setup & Integrations**. You can also add **locale** as an optional URL argument to force a display language, for example `?locale=en`.

|| The `referrerpolicy` and `sandbox` attributes are important security settings. They limit what the embedded form can access and prevent full page URLs from being leaked to the iframe.

---

# ${color}[#0080dd](Configure security)

#### ${color}[#445055](Add hCaptcha credentials)

The form requires hCaptcha credentials before visitors can submit it. In the **Contact Form** plugin settings, open **Security**, then add your **hCaptcha site key** and **hCaptcha secret**.

![hCaptcha challenge shown before Contact Form submission](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-24-at-115351_pesr5i.png =1000xauto)

![hCaptcha credentials in Contact Form security settings](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-24-at-115404_5zkk4y.png =1000xauto)

#### ${color}[#445055](Add allowed domains)

Allowed domains protect your Contact Form against malicious embeds. Add the domains where the form is allowed to appear from the **Security** section of the plugin settings.

![Allowed domains in Contact Form settings](https://storage.crisp.chat/users/helpdesk/website/87ae2703583ac800/cleanshot-2025-02-24-at-115415_13ugj5j.png =1000xauto)

||| Make sure your hCaptcha domain settings and your Contact Form allowed domains match the domain where the form is embedded.

---

# ${color}[#0080dd](Customize the form style)

You can customize the Contact Form with a CSS file served from your own domain. Inspect the form with your browser developer tools, then add a stylesheet from the **Customization** section of the plugin settings.

```html
<link rel="stylesheet" href="https://assets.acme.com/contact-form-custom.css" type="text/css" />
```

Replace the stylesheet URL with your own file before publishing.

| Crisp keeps Contact Form CSS classes stable so you can customize the form without having to rewrite your stylesheet after minor updates.

---

# ${color}[#0080dd](Frequently Asked Questions)

*Still have questions which were not covered in this article? Here is a collection of the most frequently asked questions on this topic.*

###### ${color}[#F08820](Where does the submitted data go?)

The message is sent to your **Crisp Inbox** as a conversation. Your agents can reply from Crisp using the visitor details submitted in the form.

###### ${color}[#F08820](Do I need hCaptcha?)

Yes. The Contact Form plugin requires hCaptcha credentials to reduce automated spam and allow submissions to be accepted.

###### ${color}[#F08820](Can I embed the form on several pages?)

Yes, as long as the domains are allowed in the plugin settings and the iframe is added to each page where the form should appear.