How to add a Contact Form to Prismic

Last updated on February 2nd, 2022 by Jotzilla

There are plenty of options in the market for CMS platforms, each with its strengths and weaknesses. Prismic CMS is one of the most popular headless content management systems available today. With Prismic CMS, it’s super easy to add new embed fields.

However, building forms isn’t a built-in functionality in Prismic. And that’s where HeyForm comes in. You can combine both the capabilities of Prismic and HeyForm to create and analyze contact forms. This guide covers how to add a contact form to Prismic CMS with HeyForm.net. Let’s dive in.

Get your HeyForm embed code.

First off, create your contact form with HeyForm’s drag and drop form builder. Then select the specific online form in your workspace and click on the share option. Here are the step-by-step instructions on creating an online form with HeyForm and sharing it with everyone.

Visit https://my.heyform.net/ and create a form.

I’ve selected a Classic Form since I’m going for a simple contact form.

Drag, drop, and stack HeyForm blocks to build a contact form of your choice.

Click on the share button once you’ve done building the contact form.

Now you’ll be greeted with HeyForm’s Share page. Find the embed section and click on the Standard embed choice.

In the next window, you’ll see your embed code. Copy it to the clipboard. We’ll use it in the next step.

In my case, the embed code is:

<div class="heyform" data-heyform-id="AjIpWIPS" data-heyform-mode="0" data-heyform-button-text="Launch Form"></div><script src="<https://my.heyform.net/embed>"></script>

You’ve to make sure the AjIpWIPS in data-heyform-id="AjIpWIPS" reflects your specific form ID.

Embed HeyForm contact form with Prismic

Here comes the crucial step. Now that you’ve got the HeyForm embed code in handy let’s add that custom embed (raw HTML code) to Prismic. HeyForm embed codes should work natively with Prisimc’s Rich text field.

Step 1: Create a Rich text field

You must configure the field to “Allow multiple paragraphs” and set the field only to allow preformatted text.

Step 2: Embed HeyForm to your document or post type

This step is pretty much straightforward. Just paste HeyForm embed to code to the specific Rich text field you’ve created.

You could also use Prismic Slices to achieve the same. Create a contact form Slice and use it anywhere as a block or section.Please refer to Prismic’s FAQ page for more clarity.