Kontent.ai
Copyright © 2023 Kontent.ai. All rights reserved.
  • Web
  • Privacy policy
  • Cookies policy
  • Consent settings
  • Security
  • GDPR
  • Documentation
  • API reference
  • Product updates
Kontent.ai Learn
  • Plan
  • Set up
  • Model
  • Develop
  • Create

Integrate forms or model and implement them on your own

Is this page helpful?
Complete and continue
  • Sign in
  • Tomas Nosek, Michael Kinkaid
    7 minutes
    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.
    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).
    The form field supports the settings you’d expect around display and validation.
    What's next?
    Streamline author information
    When a person’s job is to update content that others send them, there is always space for improvement. This example elaborates how a good content model streamlined a previously manual process of updating person profiles.
    • Overview
    • Intro to content modeling
    • Creator’s role in content modeling
    • Before you model content
    • Create your first content model
    • Master content modeling
    • Master modular content
    • Master taxonomies
    • Master metadata
    • Get inspiration from others
    • Maintain your model
    • Content modeling checklist
    A form on ReasonOne's website
    High-level content model overview
    Form structure in a content item
    • “Missing” CMS features
    • Content formatting
    • Curated content
    • Link authors to articles
    • Forms
    • Streamline information
    • Displaying locations
    • Social media posts in articles
    • Code samples in articles
    • Bulk publishing with taxonomies
    • App configuration
    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.
    Another source on this topicTo learn more about forms with Kontent.ai, check out this blog post from Luminary.
  • How to approach forms in headless CMSs
  • Which solution did ReasonOne choose?
  • Modeling forms