Handling forms and form data

Lukáš Lacko, Jan Cerman
4 minutes
Custom elements / Components / Content model
Online forms are essential for most websites and web apps. They play a crucial role in user interaction and data collection, enabling businesses to gather valuable information and provide personalized experiences. Find the optimal way to handle forms within Kontent.ai.

Why is this important?

Forms are a fundamental component of user interaction on websites and web apps. They serve as the primary means of user communication with your business. Finding the right form management solution offers several benefits:
  • Better customer engagement: Personalized forms lead to higher engagement and conversions.
  • Enhanced user experience: Well-designed forms can improve user interaction and satisfaction.
  • Flexibility and control: Tailor forms to specific needs without extensive developer involvement.
  • Integration capabilities: Seamless integration with other systems like CRM and marketing tools.
  • Scalability: The right solution can handle increased form submissions as your business grows.
  • Streamlined data collection: Efficient forms make it easier to gather and manage data.

Available solutions with Kontent.ai

In a traditional CMS, forms are often tightly integrated, allowing easy management but limiting flexibility. With a headless CMS like Kontent.ai, developers and content creators need solutions that offer both control and adaptability. Thanks to Kontent.ai’s decoupled architecture, you can choose an approach that best fits your needs. Make sure to consider:
  • The level of control your content creators need over form content and placement. For example, if your marketing team wants to tailor their forms to specific campaigns, they’ll want more control.
  • Data storage requirements and whether you need to integrate with other services, such as marketing automation systems and CRMs.

Approach A: Predefined forms with placement control

For complete visual control over the forms, your web app can include a set of predefined forms defined using HTML, CSS, and JavaScript. This approach is suitable when your forms don’t need to change that often. In Kontent.ai, content creators can insert the forms into written text using components. For example, they can use a Form content type with a multiple choice element to select among the predefined forms. The web app then renders the right form based on the selection.
ProsCons
  • Content creators can choose form placement within content
  • Easier implementation for developers
  • Ensures consistent design and functionality of forms
  • When storing form submissions in your database, there’s no dependency on third-party services
  • Limited to predefined forms
  • Adding new forms requires developer involvement
  • No control over form content or design for creators

Storage options for this approach

We recommend storing form submissions in a database. You can choose a first-party database solution run by you or a third-party database run by an external service. This allows for scalable and secure data management with high control over form submissions. You can query the data and integrate the database with other systems. For smaller projects or testing purposes, you can send form submissions directly to an email address. This is simple to implement and doesn’t require additional infrastructure. However, this no-storage option doesn’t scale, and you might run into difficulties when managing and analyzing user submissions.
Avoid storing form submissions in Kontent.aiYou might be tempted to store the submissions in your project using Management API. However, Management API is better suited to planned operations. Because form submissions can unexpectedly come in large numbers, you’d quickly hit the API’s strict rate limits.

Approach B: Custom form builder in Kontent.ai

Empower content creators to define both the placement and content of forms directly in Kontent.ai. When you create content types that represent form elements (fields, labels, validation rules), your web app can dynamically render forms based on these definitions. In Kontent.ai, content creators build the forms piece by piece by inserting individual form fields as components. Individual forms can then be reused and linked where needed.
ProsCons
  • Full control over form content and structure for creators
  • No need for developer input when creating or modifying forms
  • Enhanced flexibility and responsiveness to business needs
  • When storing form submissions in your database, there’s no dependency on third-party services
  • More complex implementation requiring advanced setup
  • Requires a well-planned content model
  • Potential for inconsistencies if not carefully managed
The storage options for this approach are the same as for using predefined forms described in approach A. Your options depend on whether you store form submissions in your dedicated database or integrate third-party storage.

Approach C: Integrate third-party form services

Integrate a third-party form service within Kontent.ai using a custom element. Content creators design and configure forms through the third-party service embedded in the CMS’s authoring experience. Your web app then retrieves and displays these forms by embedding the third-party service, ensuring seamless integration and up-to-date functionality.
ProsCons
  • Allows creators to design complex forms within a single environment
  • Leverages advanced features of specialized form services
  • Simplifies form management within the CMS
  • Depends on third-party service availability and costs
  • Requires development of custom elements and integrations
  • Potential learning curve for content creators