GraphQL Webform Drupal module
A module to integrate webform with the graphql module.
IMPORTANT: This is a module under active development and it does not support all webform features and elements yet. Feel free to raise Feature Requests and to contribute :)
Pre-Requisites
Install
composer require drupal/graphql_webform
Supported elements
- Text Field
- Textarea
- Hidden
- Date
- Checkboxes
- Radios
- Select
- File
- Actions
- Markup
- Webform Term Select
- Webform Entity Select
- Number
- Composite (with the above items supported)
- Time
Retrieve webform elements
Make sure to grant the access webform configuration permission to the users
who need to access the webform over GraphQL. This can be done individually per
webform in Build > Settings > Access > Access Webform configuration, or globally
by granting the access any webform configuration permission.
{
webformById(id: "contact") {
title
description
elements {
... on WebformElement {
metadata {
key
type
}
}
... on WebformElementWebformActions {
submitLabel
}
... on WebformElementTextBase {
title
defaultValue
required {
message
}
size
minLength
maxLength
pattern {
message
rule
}
placeholder
multiple {
limit # 0 means Unlimited config.
message
}
}
... on WebformElementMarkup {
markup
}
... on WebformElementTextarea {
rows
}
... on WebformElementHidden {
defaultValue
}
... on WebformElementDate {
dateMin
dateMax
step
defaultValue
title
multiple {
limit # 0 means Unlimited config.
message
}
}
... on WebformElementOptionsBase {
title
defaultValue
options {
title
value
}
required {
message
}
multiple {
limit # 0 means Unlimited config.
message
}
}
... on WebformElementSelect {
emptyOption {
title
value
}
}
... on WebformElementManagedFile {
title
fileExtensions
required {
message
}
multiple {
limit # 0 means Unlimited config.
message
}
}
... on WebformElementWebformTermSelect {
metadata {
title
description
multiple
}
options(depth: 1) {
value
title
}
}
... on WebformElementComposite {
elements {
id
type
multiple {
limit # 0 means Unlimited config.
message
}
}
}
... on WebformElementNumber{
required {
message
}
min
max
size
step
}
}
}
}Create a webform submission
mutation submit(
$id: String!,
$elements: [WebformSubmissionElement]!,
) {
submitWebform(
id: $id,
elements: $elements,
) {
errors
validationErrors {
element
messages
}
submission {
id
webform {
id
}
}
}
}The $elements argument is an array of WebformSubmissionElement objects. Here
is an example payload:
{
"id": "my_webform",
"elements": [
{
"element": "email",
"value": "me@mysite.com"
},
{
"element": "checkboxes",
"value": [
"some_value",
"another_value"
]
}
]
}validationErrors will contain error messages for each element that failed
validation. errors will contain general errors, such as if the webform
submission failed because the form is closed.
Create a webform submission when webform contains File elements
If the webform contains managed file fields, you can attach the uploaded files by using a multipart form request and including a 'map' field that maps the uploaded files to the webform elements.
For more information on how to upload files using GraphQL, see the GraphQL multipart request specification.
mutation submitMyForm(
$id: String!,
$elements: [WebformSubmissionElement]!,
$files: [WebformSubmissionFile]!,
) {
submitWebform(
id: $id,
elements: $elements,
files: $files,
) {
errors
validationErrors {
element
messages
}
submission {
id
}
}
}Example CURL request. Note that the value of the file field is null in the
variables object. It will be replaced by the file linked in the map object.
curl localhost:3001/graphql \
-F operations='{
"query": "mutation ($id: String!, $files: [WebformSubmissionFile]!) { submitWebform(id: $id, files: $files) { errors validationErrors { element messages } submission { id } } }",
"variables": {
"id": "my_webform",
"files": [{"element": "my_file_element", "file": null}]
}
}' \
-F map='{"0": ["variables.files.0.file"]}' \
-F 0=@a.txtCreate a webform submission with a source entity
If the webform supports a source entity, you can pass in the variables with the
data, the same as with id. For example, if your webform's URL is:
/form/my-form?source_entity_id=123&source_entity_type=node
Pass the following JSON encoded values:
{
"id": "my_form",
"source_entity_id": "123",
"source_entity_type": "node",
"subject":"This is the subject",
"message":"Hey, I have a question",
"date_of_birth":"05/01/1930",
"email":"email@example.com"
}The mutation will automatically pass these values to the webform submission.