Forms: integration and implementation guide

Tomas Nosek, Michael Kinkaid

7 minutes

0% complete

Online forms are everywhere. Contact forms, newsletter sign-ups, quote requests, surveys, order forms, and so on. Opposed to most traditional web CMSs, headless CMSs focus on content. You typically won’t find a form builder within them, giving you the power to set it according to your needs.

In Reason One

, Kontent.ai’s partner digital agency, they’ve moved their own website to Kontent.ai. This example will showcase a typical “contact us” form on their site. As one of the requirements, the content and marketing teams wanted to create and add forms to the website without developer support.

How to approach forms in headless CMSs

There’s more than one way to solve this request:

Use a form microservice

Just as Kontent.ai focuses on content management, some solutions focus entirely on form management, for example, Formstack

. Forms created on these services can easily be added to a site, either via embedding a script or via their APIs. These dedicated form services handle everything needed (such as form design, rendering, submissions, or notifications). On the other hand, verify how well they work with accessibility and responsitivity of your design.

Code your own form

Another option is to custom code the form needed directly to your website. In this case, the whole form is in your hands, adding extra implementation work, but you can match your exact requirements. Decide between two options:

Hardcode forms – Forms created directly in the source code will be quicker to implement but won’t give creators typically desired editing powers.
Include forms in your content model – Create a content model that will contain content types suitable for your situation, giving creators the power but requiring more work.

If you code your own form, consider where the submits will be stored. You will likely need a database table for that. Alternatively, you can send emails to relevant recipients directly on submit for smaller projects or testing purposes without dealing with storage.

Storing submitted data in Kontent.aiWe recommend avoiding storing submitted form information to Kontent.ai’s content items via Management API. While Delivery API is suitable for production load and related expectations, Management API is ideal for planned operations, such as migration and automated configuration, and has strict call limits. Therefore, Management API is not suitable for storing submitted data.

Think also about the needed workflow and automation expected from the forms. If you’re moving an existing site to Kontent.ai, and you have the UI and forms already developed, then you might find this approach a suitable intermediary step before exploring further investments.

Which solution did ReasonOne choose?

Due to the smaller nature of ReasonOne’s project, they went with the custom implementation.

They gave their marketing and content team a way to design forms directly in Kontent.ai by preparing a suitable content model.
They created a component to render the forms (as designed in Kontent.ai).
They created a serverless function to handle the form submissions, sending the contents via email to relevant recipients.

Modeling forms

In the following example, forms are created for websites, so the content model is web-oriented. If you need to create an omnichannel experience, you can similarly add a form content type usable in semantic content types.In a content type for your page (Page – SEM Landing in this example), add a content type representing a form. This form (Widget – Form in this example) contains an element for individual input fields. This element (Form field items in this example) can either be a linked items element or a rich text element limited to just components of the relevant types (such as Form field – Text or Form field – Checkbox).

Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!