At Twenyseven we are primarily active in the segment of corporates, larger MKB+ and enterprise clients. The digital landscape within this segment varies widely, but they almost always have one thing in common: forms. There are a few ways of implementing form solutions, which are largely dependent on the clients' needs which can range from a simple contact form to a fully-fledged, lead generation focused, set of highly customizable forms.
In general, there are three ways of implementing forms on a website or platform:
Simple implementation of (a few) forms created by developers.
This is the simplest way and is perfectly fine if only a few forms are needed.Using an external third-party CRM system integration. The forms are created and maintained in the CRM environment. Only (some) styling and scripts are implemented in the platform. This implementation is mostly done if the focus is on lead generation and customer relations as the data will end up in the CRM to be processed elsewhere.
Using a form solution provided by the Content Management System. These forms are created and maintained within the CMS by content managers. The submitted data is stored in the CMS and therefore available for further processing.
In this article we’ll cover this third option, the implementation of a form solution provided by the CMS.
Umbraco Cloud in a Headless architecture
One of the technologies we use regularly is Umbraco Cloud, the managed SaaS solution of open-source CMS Umbraco. In our project, the presentation layer is decoupled from the content creation and storage process, also known as a Headless architecture. The presentation layer is a Server Side rendered Next.js application based on React.
Umbraco Forms
Umbraco Forms is a form builder and workflow extension of Umbraco CMS that enables the creation and management of dynamic forms. From simple contact forms to complex surveys, Umbraco Forms provides a user-friendly interface for building and managing forms without the need for extensive development skills. Twentyseven implemented a reusable front-end solution to take full advantage of the functionalities provided by Umbraco Forms.
Integrating Umbraco Forms with a Headless Solution
Step 1: Enable the Umbraco Forms API
To start, we need to a) enable the Froms API and b) disable anti-forgery token validation (anti-forgery tokens are not needed as we are authenticating against the API with an API key. Step 2: Define Form Structure
Next, we use the Umbraco CMS Forms interface to design a form - specifying fields, validation rules, and any additional settings required.
Step 3: Create a Forms Component
Now we need to give content editors a way to add forms to pages. We do so by creating a forms component which requires the content editor to specify a form.
Step 4: Fetch Form Data in Headless Front End
In our headless front-end application, we update the component rendering logic to use HTTP requests to fetch form data from the Umbraco Forms API endpoints when we encounter a form component in the page component listing.
Step 5: Implement Form Submissions
When a user submits a form on the front-end, we send the form payload to the corresponding Umbraco Forms API endpoint for processing. Form submissions and notifications are handled just as they would normally be handled in a traditional Umbraco CMS environment.
Conclusion
Implementing Umbraco forms in a headless environment turned out to be quite a pleasant experience. Without the need for hacky workarounds or excessive custom code we were able to create a solid, robust and reusable front-end solution which takes care of all different options and functionalities of Umbraco Cloud. If your headless project needs a form builder, then Umbraco and Umbraco Forms are worth recommending.
Vragen?
Kom een keer langs!
...maar een vraag stellen mag ook.
Torenallee 3
5617 BA, Eindhoven
Reduitlaan 29
4814 DC, Breda