Form solutions: Umbraco Forms

In general, there are three ways of implementing forms on a website or platform: 

1. 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.

2. 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. 

3. 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. 

This is done in the Umbraco configuration files: 

Json{ 
	“Umbraco”: { 
		"Forms": { 
			"Options": { 
				"EnableFormsApi": true 
		}, 
		"Security": { 
			"EnableAntiForgeryTokenForFormsApi": false 
		} 
	} 
} 

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.