Note: The article is probably dated.
There are plenty of options in the market for CMS platforms, each with strengths and weaknesses. Prismic CMS is one of the most popular headless content management systems. 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 Prismic and HeyForm’s capabilities to create and analyze contact forms. This guide covers adding 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 the 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 the 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.