The Webform module provides all the features expected from an enterprise proprietary form builder combined with the flexibility and openness of Drupal...now available on any website, webpage, and application  

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. 

People want to embed a Drupal webform within a non-Drupal website or application.

Embedding a Webform using an iFrame

A widespread solution to embedding external content within another website is to use an Inline Frame element (<iframe>).

"The HTML Inline Frame element (<iframe>) represents a nested browsing context, embedding another HTML page into the current one." -- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

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 how best to embed content using an iframe. 

Initially, I assumed that because a webform's height can dynamically change via conditional logic and Ajax, the iframe would require scrolling, then I discovered the IFrame-Resizer library. The iFrame resizer enables the automatic resizing of the height and width of cross-domain iFrames to fit their contained content. The iFrame-Resizer library made it so easy to embed a webform using an iframe that I bought David J. Bradshaw a cup of coffee to show my appreciation for contributing a fantastic library to the open-source community.

How to share and embed a webform

I think it is time to show you how to share and embed a webform on any website, webpage, and application.

The new Webform Share sub-module is available in the latest release of Webform 8.x-5.x (for Drupal 8) and Webform 6.x (for Drupal 8 and 9). 

Who sponsored this feature?

Memorial Sloan Kettering Cancer Center (MSKCC) has been my primary client for the past 20 years. Without MSKCC's commitment to Drupal and their early adoption of Drupal 8, I would most likely not be maintaining the Webform for Drupal 8. Most of my work on the Webform module is done during my free time. Occasionally, MSKCC will need a Webform-related enhancement that can be done using billable hours. In the case of "sharing webforms", MSKCC, wanted to share disease-related screening forms with their partner and affiliated websites.

I am very fortunate to have an ongoing relationship with an institution like MSKCC. MSKCC appreciates the value that Drupal provides and the work that I am doing within the Drupal community.

If you want to sponsor a feature, please read my blog post and create a ticket in the Webform module's issue queue.