The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.Problem
Sometimes, users need to select options using a visual representation of the options. The image select element only allows users to pick images. In particular use case users should be able to visual select seats, rooms, parts of the body, etc.…
Solution
Provide as Webform Options Custom element where any HTML or SVG markup to be converted into a selectable single or multiple options elements.
Here is a conceptual prototype.
TBD
- Entity Reference should also be supported.
Features
- Select single
- Select multiple
- Extract options from markup
- Descriptions will be supported
- Tooltips will be supported
Notes
- Extends a select element.
- Hidden select menu will be used to handle backend integration and validation.
- Options Custom element will support hover, click, selected, and disabled states.
- The #options could be extracted from the HTML/SVG markup
- HTML/SVG markup could also support Twig.
- HTML/SVG markup will support any tags. Only trusted users should be allowed to create these elements.
- HTML/CSV markup can be pasted in or linked to
- Might need to allows markup to be preprocessed.
- Might have to use a jQuery plugin.
- Preview will NOT show the visual HTML/SVG markup.
Tasks
- Create webform_options_custom module.
- Create WebformOptionsCustom element plugin
- Create WebformOptionsCustom webform element plugin
- Create WebformOptionsCustomEntity element plugin
- Create WebformOptionsEntityCustomEntity webform element plugin
- Create HTML markup example
- Create SVG markup example
- Create image map example
- Create JS and CSS libraries
- Support conditional disabled/enabled states.
- Create webform_options_custom_examples module
- Apply accessibility aria attributes.
User Acceptance Test
- Enable the Webform Custom Options module
/admin/modules - Go to 'Custom options' configuration page
/admin/structure/webform/config/options_custom/manage - Confirm U.S states custom options is listed
/admin/structure/webform/config/options_custom/manage - Edit U.S. states, change label, checkboxes, etc...
/admin/structure/webform/config/options_custom/manage/us_states/edit - Create new custom markup options can "Test"
/admin/structure/webform/config/options_custom/manage/add
<div data-id="one" data-name="One" style="margin: 5px 0; border: 1px solid #000; padding: 10px;">One</div> <div data-id="two" data-name="Two"style="margin: 5px 0; border: 1px solid #000; padding: 10px;">Two</div> <div data-id="three" data-name="Three"style="margin: 5px 0; border: 1px solid #000; padding: 10px;">Three</div>one: 'One -- This is a custom description.' two: 'Two -- This is a custom description.' three: 'Three -- This is a custom description.' - Preview 'Test' custom options and confirm tooltips are being pulled from options.
/admin/structure/webform/config/options_custom/manage/test/preview - View 'Example: Custom Options' and confirm custom options input is working as expected.
/form/example-options-custom - Confirm custom options element edit form
/admin/structure/webform/manage/example_options_custom/element/states/edit
| Comment | File | Size | Author |
|---|---|---|---|
| #66 | 3081795-66.patch | 594.96 KB | jrockowitz |
| #64 | 3081795-64.patch | 0 bytes | jrockowitz |
| #62 | 3081795-62.patch | 595.26 KB | jrockowitz |
| #56 | 3081795-56.patch | 584.57 KB | jrockowitz |
| #52 | 3081795-52.patch | 580.13 KB | jrockowitz |
Comments
Comment #2
jrockowitz commentedMile3 would like to sponsor development.
https://www.drupal.org/project/webform/issues/2907663
Comment #3
jrockowitz commentedComment #4
Mile3 commentedThanks Jacob. Looks good.
A very important request:
1) I hope we can still apply options limits (which I believe is addressed if this is a select field)
2) We have to be able to get data from prior submissions in the tooltip (probably using an entity reference view, but we're open to other suggestions).
Use case: Exhibit hall. If a company is choosing an exhibit booth space, they should be able to hover over booths that have already been reserved to see who is going to be nearby and avoid conflicts.
In addition, the Mile3 team would like to offer to provide some common SVG field presets (countries, states, etc) once this is off the ground.
Comment #5
jrockowitz commented1) Options limits will definitely be supported. This is why the disabled/enabled states need to implemented.
2) The tooltip is going to be powered by the option text + description. One challenge might be supporting HTML markup in the tooltip.
For entity references, I think I am going to build the relationship using the options text and not the the option value (ie node id).
For example, in the SVG you would only have
data-option-textattributes. For the entity reference options I would adddata-option-valuewhich would be the entity ID.<rect data-option-text="Booth 1" />would be magically change to<rect data-option-text="Booth 1" data-option-value="1234" />Please attach as many example as you want to this ticket.
Comment #6
Mile3 commentedHere is a sample of the United States, and a conference room with Tables. Ids are provided.
More examples of maps can be found here: https://simplemaps.com/resources/svg-maps
Comment #7
jrockowitz commentedComment #23
jrockowitz commentedComment #24
jrockowitz commentedComment #25
jrockowitz commentedComment #35
jrockowitz commentedComment #40
jrockowitz commentedComment #47
jrockowitz commentedComment #49
jrockowitz commentedComment #52
jrockowitz commentedComment #56
jrockowitz commentedComment #62
jrockowitz commentedComment #64
jrockowitz commentedComment #66
jrockowitz commentedComment #68
jrockowitz commented