CKEditor 5 Webform Embed
This module provides a CKEditor 5 widget to easily embed Webforms directly within the content editor. It allows users to browse, select, and replace webforms using a user-friendly interface, displaying clear placeholders before saving.
The CKEditor 5 Webform Embed module streamlines the process of placing complex forms into your content. Instead of managing shortcodes or complex HTML snippets, this module provides a native CKEditor 5 widget that allows administrators to browse, select, and embed Webforms directly within the editor interface. It bridges the gap between powerful form functionality and a user-friendly authoring experience.
Features
- Native Widget Integration: Provides a visual "Webform" block within the
editor to easily move and manage embedded forms. - AJAX Modal Browser: A user-friendly selection interface to browse
and search for active webforms without leaving the content page. - Live Editor Placeholders: Provides a clear visual representation of where the form will appear, ensuring editors understand the layout before hitting save.
- Double-Click Editing: Quickly swap out one form for another by double-clicking the widget to re-open the selection modal.
- Secure Rendering: Uses a dedicated server-side filter to transform semantic tags into fully functional, accessible Drupal Webforms on the frontend.
Installation
Install as you would any contributed Drupal module. See Installing Drupal Modules.
composer require drupal/ck5_webformEnable the module using Drush:
drush en ck5_webformPost-Installation
After installation, you must configure your Text Formats to enable the embedding capabilities:
- Go to Configuration » Content authoring » Text formats and editors.
- Edit your preferred format (e.g., Basic HTML or Full HTML).
- Drag the Embed Webform icon into the active toolbar.
- Enable the CKEditor 5 Webform Embed filter in the "Enabled filters" section.
Note: This filter is responsible for rendering the form on the public site. - If using Limit allowed HTML tags, ensure
<drupal-webform data-webform-id>is added to the allowed tags list.
Additional Requirements
This module requires the following:
- CKEditor 5 (Core module in Drupal 10/11)
- Webform (Contributed module)
Similar projects
Supporting this Module
If you find this module useful, please consider reporting bugs or submitting feature requests in the issue queue. Your feedback helps make this tool better for the entire community!