How can I setup the Contact Form plugin?
The Contact Form plugin lets you create a contact form linked to your Crisp, which you can include on your website contact page.
This guide goes through how to setup the Contact Form plugin on your website. It is designed to be included on your website contact page.
It protects your Crisp Inbox against spam bots using a CAPTCHA ran by hCaptcha.
The Contact Form plugin is available for free for all Crisp plans (including Basic plans).
You will also need to sign up for a free account with hCaptcha to complete the Contact Form plugin setup.
The Contact Form should be included on your website contact page.
It lets your users contact you in a more traditional way, that is, using a contact form where they leave their email address. This is useful for websites that want to use the Crisp Inbox but prefer a more traditional way to communicate instead of live chat.
The Contact Form plugin can be included on your website contact page with a single line of HTML code, where it would take up all the vertical and horizontal space available at best (otherwise, the space you would give it using CSS).
Use the following iframe code:
Make sure to replace the following parameters in the code provided:
[WEBSITE_ID]: your Crisp website identifier, which you can copy from your website settings (read how);
Those optional URL arguments are also available:
locale: display language to use (ISO format, ie. en for English, for instance: locale=en);
Note that the iframe code provided here was optimized for your website security. The referrerpolicy attribute makes sure that your full page URLs do not leak, only the referrer domain (which is required by Contact Form). The sandbox attribute makes sure that the Contact Form cannot access the parent page (your website), and has only access to the features it requires.
The data is sent to your Crisp inbox! It creates a conversation just like any other channels you connected to Crisp. Your agents can then respond to the customer using the details sent when filling in the contact form.
hCaptcha protects your contact form against bots sending automated messages, especially spam. hCaptcha is an external service, respectful of your users privacy, which is ran by an independent organization (as opposed to the more popular reCAPTCHA that is ran by Google).
The Contact Form plugin requires hCaptcha credentials to be configured before the form can be submitted by your users. In your Contact Form settings, go to the "Security" section and insert your hCaptcha site key and secret there.
The site key can be obtained for free by signing up for an account at hCaptcha and creating a new "site". The secret can be copied from your hCaptcha account settings.
Make sure to enter the correct list of domains allowed to use your CAPTCHA credentials, otherwise CAPTCHA verification may not work. Typically, this is your website domain name.
Allowed domains are essential to the security of your Contact Form. Your Contact Form will only allow includes from whitelisted domains. This protects your Contact Form against malicious includes and spam.
You can add allowed domains from your Contact Form plugin settings, within the "Security" section:
Your Contact Form can be customized to match your brand identity. You can change anything, from button colors, to page background, to font sizes, and more.
Customization can easily be done by including a custom CSS file, served from your own server domain. You can inspect the Contact Form HTML code using your Web browser Dev Tools, and find out which of our CSS classes you need to customize.
Injecting your custom CSS stylesheet is as easy as going to your Contact Form settings, then clicking on the "Customization" section, then adding the HTML code that will be included in the Contact Form <head /> section.
Here is an example HTML code that can include your custom stylesheet:
⚠️ Make sure to replace the stylesheet URL with yours.
Note that we guarantee that the CSS classes we use today for all Contact Form elements will stay stable over time. You can use those classes with confidence in your custom CSS stylesheets, knowing it will not break.
This guide goes through how to setup the Contact Form plugin on your website. It is designed to be included on your website contact page.
It protects your Crisp Inbox against spam bots using a CAPTCHA ran by hCaptcha.
The Contact Form plugin is available for free for all Crisp plans (including Basic plans).
You will also need to sign up for a free account with hCaptcha to complete the Contact Form plugin setup.
Video tutorial
What does the Contact Form plugin do?
The Contact Form should be included on your website contact page.
It lets your users contact you in a more traditional way, that is, using a contact form where they leave their email address. This is useful for websites that want to use the Crisp Inbox but prefer a more traditional way to communicate instead of live chat.
How to include the Contact Form in my HTML code?
The Contact Form plugin can be included on your website contact page with a single line of HTML code, where it would take up all the vertical and horizontal space available at best (otherwise, the space you would give it using CSS).
Use the following iframe code:
<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>Make sure to replace the following parameters in the code provided:
[WEBSITE_ID]: your Crisp website identifier, which you can copy from your website settings (read how);
Those optional URL arguments are also available:
locale: display language to use (ISO format, ie. en for English, for instance: locale=en);
Note that the iframe code provided here was optimized for your website security. The referrerpolicy attribute makes sure that your full page URLs do not leak, only the referrer domain (which is required by Contact Form). The sandbox attribute makes sure that the Contact Form cannot access the parent page (your website), and has only access to the features it requires.
Where does the data go?
The data is sent to your Crisp inbox! It creates a conversation just like any other channels you connected to Crisp. Your agents can then respond to the customer using the details sent when filling in the contact form.
Common questions
What is hCaptcha?
hCaptcha protects your contact form against bots sending automated messages, especially spam. hCaptcha is an external service, respectful of your users privacy, which is ran by an independent organization (as opposed to the more popular reCAPTCHA that is ran by Google).
How can I configure hCaptcha?
The Contact Form plugin requires hCaptcha credentials to be configured before the form can be submitted by your users. In your Contact Form settings, go to the "Security" section and insert your hCaptcha site key and secret there.
The site key can be obtained for free by signing up for an account at hCaptcha and creating a new "site". The secret can be copied from your hCaptcha account settings.
Make sure to enter the correct list of domains allowed to use your CAPTCHA credentials, otherwise CAPTCHA verification may not work. Typically, this is your website domain name.
How can I add allowed domains?
Allowed domains are essential to the security of your Contact Form. Your Contact Form will only allow includes from whitelisted domains. This protects your Contact Form against malicious includes and spam.
You can add allowed domains from your Contact Form plugin settings, within the "Security" section:
How can I customize my Contact Form style with CSS?
Your Contact Form can be customized to match your brand identity. You can change anything, from button colors, to page background, to font sizes, and more.
Customization can easily be done by including a custom CSS file, served from your own server domain. You can inspect the Contact Form HTML code using your Web browser Dev Tools, and find out which of our CSS classes you need to customize.
Injecting your custom CSS stylesheet is as easy as going to your Contact Form settings, then clicking on the "Customization" section, then adding the HTML code that will be included in the Contact Form <head /> section.
Here is an example HTML code that can include your custom stylesheet:
<link rel="stylesheet" href="https://assets.acme.com/contact-form-custom.css" type="text/css" />⚠️ Make sure to replace the stylesheet URL with yours.
Note that we guarantee that the CSS classes we use today for all Contact Form elements will stay stable over time. You can use those classes with confidence in your custom CSS stylesheets, knowing it will not break.
Updated on: 13/06/2023
Thank you!