The Webform for Drupal 8 is built upon Drupal’s Form API (FAPI); the building, validating, and submission handling of a form relies on Drupal’s backend code. Drupal, and most content management systems, are moving toward a decoupled approach where the backend content authoring tool is separate from the front-end presentation layer. Until now, there was no easy way to decouple a webform from Drupal’s presentation layer.
Decoupled Drupal and sharing Webforms
A decoupled approach for the Webform module means that Drupal would handle the backend form builder and the submission processing. In contrast, the user-facing input form would be rendered using a front-end framework like Angular, React, and Vue.js. In the Drupal community, people are experimenting with decoupling webforms by exposing webform elements using a JSON schema or REST API, and then rendering the input form using Gatsby with React. The biggest limitation of this approach is recreating 80+ webforms elements with complex business logic as React native components. For me, this feels like an overwhelming challenge; it requires rebuilding Drupal’s Form API and the Webform module’s presentation layer from scratch. Stepping back from this challenge/problem, the goal which everyone is working towards is being about to use a webform outside of a Drupal website.
Embedding a Webform using an iFrame
A widespread solution to embedding external content within another website is to use an Inline Frame element (
In the webforms specific use case, an iframe allows a webform to be nested in any HTML page. With this approach in mind, I started to research…Read More