GraphQL Webform

GraphQL Webform exposes forms built with the Webform module to a decoupled (headless) frontend through GraphQL. Forms are designed in Drupal with Webform as usual; a frontend (React, Vue, a mobile app, …) can then display them, collect input and send submissions back.

What it does

• The most commonly used form elements are supported (see the list below).
• Supports conditional fields: depending on a visitor's answers, other fields can appear, hide or become required.
• Submissions are validated, and validation errors are returned for each field.
• A confirmation message, title and redirect are returned after a submission.
• File uploads are supported.
• Closed forms, scheduled open and close dates, and submission limits are handled, including the message to display when a form is unavailable.

Requirements

• Webform module
• GraphQL module

Two optional modules add more elements when installed: Address (for the address element) and Telephone Validation (for validating phone numbers).

Branches

• 1.x: Supports GraphQL 3.x
• 2.x: Supports GraphQL 4.x
• 3.x: Supports GraphQL 5.x

Supported elements

Text & input

• Text field
• Text area
• Email
• Telephone
• URL
• Hidden
• Autocomplete
• Number, Range, Rating, Scale
• Color
• Signature
• Name

Date & time

• Date
• Date and time
• Time

Choices

• Select / dropdown
• Radios
• Checkboxes
• Select, radios and checkboxes with an “other” option
• Table select
• Likert
• Term and entity select

Files

• File upload
• Audio file

Layout & groups

• Fieldset
• Details
• Section
• Flexbox
• Composite (a group of the elements above)
• Address

Display & actions

• Markup and formatted text
• Message
• Horizontal rule
• Computed value
• Terms of service
• Submit and reset buttons

Contributing

Bug reports, feature requests and MRs are welcome! Please use the issue queue.