GraphQL #

Formie supports accessing Form and Submission objects via GraphQL. Be sure to read about Craft's GraphQL support.

Have a look at our headless Formie demo to get a feel for what's possible with GraphQL.

Forms #

Query payload #

{
    form (handle: "contactForm") {
        title
        handle

        settings {
            errorMessageHtml
        }
        
        pages {
            name

            rows {
                fields {
                    name
                    handle
                    type
                    displayName

                    ... on Field_Name {
                        firstNameLabel
                        firstNameRequired
                        lastNameLabel
                        lastNameRequired
                    }

                    ... on Field_Email {
                        placeholder
                    }
                }
            }
        }
    }
}

The response #

{
    "data": {
        "form": {
            "title": "Contact Form",
            "handle": "contactForm",
            "settings": {
                "errorMessageHtml": "Couldn’t save submission due to errors."
            },
            "pages": [
                {
                    "name": "Page 1",
                    "rows": [
                        {
                            "fields": [
                                {
                                    "name": "Your Name",
                                    "handle": "yourName",
                                    "type": "verbb\\formie\\fields\\formfields\\Name",
                                    "displayName": "Name",
                                    "firstNameLabel": "First Name",
                                    "firstNameRequired": true,
                                    "lastNameLabel": "Last Name",
                                    "lastNameRequired": true
                                }
                            ]
                        },
                        {
                            "fields": [
                                {
                                    "name": "Email Address",
                                    "handle": "emailAddress",
                                    "type": "verbb\\formie\\fields\\formfields\\Email",
                                    "displayName": "Email",
                                    "placeholder": "eg. psherman@wallaby.com"
                                }
                            ]
                        },
                        {
                            "fields": [
                                {
                                    "name": "Message",
                                    "handle": "message",
                                    "type": "verbb\\formie\\fields\\formfields\\MultiLineText",
                                    "displayName": "MultiLineText"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    }
}

The forms query #

This query is used to query for Form objects. You can also use the singular form to fetch a single form. There are also formieForms and formieForm aliases.

ArgumentTypeDescription
id[QueryArgument]Narrows the query results based on the elements’ IDs.
uid[String]Narrows the query results based on the elements’ UIDs.
archivedBooleanNarrows the query results to only elements that have been archived.
trashedBooleanNarrows the query results to only elements that have been soft-deleted.
uniqueBooleanDetermines whether only elements with unique IDs should be returned by the query.
title[String]Narrows the query results based on the elements’ titles.
searchStringNarrows the query results to only elements that match a search query.
relatedTo[Int]Narrows the query results to elements that relate to any of the provided element IDs. This argument is ignored, if relatedToAll is also used.
relatedToAll[Int]Narrows the query results to elements that relate to all of the provided element IDs. Using this argument will cause relatedTo argument to be ignored.
ref[String]Narrows the query results based on a reference string.
fixedOrderBooleanCauses the query results to be returned in the order specified by the id argument.
inReverseBooleanCauses the query results to be returned in reverse order.
dateCreated[String]Narrows the query results based on the elements’ creation dates.
dateUpdated[String]Narrows the query results based on the elements’ last-updated dates.
offsetIntSets the offset for paginated results.
limitIntSets the limit for paginated results.
orderByStringSets the field the returned elements should be ordered by.
handle[String]Narrows the query results based on the form’s handle.

The FormInterface interface #

This is the interface implemented by all forms.

FieldTypeDescription
idIDThe id of the entity.
uidStringThe uid of the entity.
titleStringThe element’s title.
enabledBooleanWhether the element is enabled or not.
archivedBooleanWhether the element is archived or not.
searchScoreStringThe element’s search score, if the search parameter was used when querying for the element.
trashedBooleanWhether the element has been soft-deleted or not.
dateCreatedDateTimeThe date the element was created.
dateUpdatedDateTimeThe date the element was last updated.
pages[PageInterface]The form’s pages.
rows[RowInterface]The form’s rows.
fields[FieldInterface]The form’s fields.
settings[FormSettingsInterface]The form’s settings.
configJsonStringThe form’s config as JSON.
templateHtmlStringThe form’s rendered HTML.
csrfToken[CsrfTokenInterface]A CSRF token (name and value).

The FormSettingsInterface interface #

This is the interface implemented by all forms.

FieldTypeDescription
displayFormTitleBooleanWhether to show the form’s title.
displayPageTabsBooleanWhether to show the form’s page tabs.
displayCurrentPageTitleBooleanWhether to show the form’s current page title.
displayPageProgressBooleanWhether to show the form’s page progress.
submitMethodStringThe form’s submit method.
submitActionStringThe form’s submit action.
submitActionTabStringThe form’s submit redirect option (if in new tab or same tab).
submitActionUrlStringThe form’s submit action URL.
submitActionFormHideBooleanWhether to hide the form’s success message.
submitActionMessageHtmlStringThe form’s submit success message.
submitActionMessageTimeoutIntegerThe form’s submit success message timeout.
redirectUrlStringThe form’s submit action redirect URL.
redirectEntryEntryInterfaceThe form’s submit action entry (for redirection).
errorMessageHtmlStringThe form’s submit error message.
loadingIndicatorBooleanWhether to show the form’s loading indicator.
loadingIndicatorTextStringThe form’s loading indicator text.
validationOnSubmitBooleanWhether to validate the form’s on submit.
validationOnFocusBooleanWhether to validate the form’s on focus.
defaultLabelPositionStringThe form’s default label position for fields.
defaultInstructionsPositionStringThe form’s default instructions position for fields.
progressPositionStringThe form’s progress bar position.
integrations[FormIntegrationsInterface]The form’s enabled integrations.

The FormIntegrationsInterface interface #

This is the interface implemented by all form integrations.

FieldTypeDescription
nameStringThe integration’s name.
handleStringThe integration’s handle.
enabledBooleanWhether the integration is enabled.
settingsStringThe integration’s settings as a JSON string.

The PageInterface interface #

This is the interface implemented by all pages.

FieldTypeDescription
idIDThe id of the entity.
uidStringThe uid of the entity.
dateCreatedDateTimeThe date the element was created.
dateUpdatedDateTimeThe date the element was last updated.
nameStringThe name of the page.
rows[RowInterface]The pages’s rows.
fields[FieldInterface]The pages’s fields.
settings[PageSettingsInterface]The pages’s settings

The PageSettingsInterface interface #

This is the interface implemented by all pages.

FieldTypeDescription
submitButtonLabelStringThe page’s submit button label.
backButtonLabelStringThe page’s back button label.
showBackButtonBooleanWhether to show the page’s back button.
buttonsPositionStringThe page’s button positions.

The RowInterface interface #

This is the interface implemented by all rows.

FieldTypeDescription
idIDThe id of the entity.
uidStringThe uid of the entity.
fields[FieldInterface]The row’s fields.

The FieldInterface interface #

This is the interface implemented by all fields. Note that as settings are specific to fields, you'll need to use Inline Fragments.

FieldTypeDescription
idIDThe id of the entity.
uidStringThe uid of the entity.
nameStringThe field’s name.
handleStringThe field’s handle.
instructionsStringThe field’s instructions.
requiredBooleanWhether the field is required.
typeStringThe field’s full class type.
typeNameStringThe field’s full GQL type.
displayNameStringThe field’s display name (last portion of the class).
inputTypeNameStringThe field’s full GQL input type. Useful for mutations.
limitBooleanWhether the field should limit content.
limitTypeStringThe field’s limit type.
limitAmountIntThe field’s limit amount.
placeholderStringThe field’s placeholder.
errorMessageStringThe field’s error message.
labelPositionStringThe field’s label position.
instructionsPositionStringThe field’s instructions position.
cssClassesStringThe field’s CSS classes.
containerAttributesStringThe field’s container attributes.
inputAttributesStringThe field’s input attributes.
includeInEmailBooleanWhether the field should be included in email content.
enableConditionsBooleanWhether the field has conditions enabled.
conditionsStringThe field’s conditions.
enableContentEncryptionBooleanWhether the field has content encryption enabled.
visibilityStringThe field’s visibility.

Once using the necessary Inline Fragments for each field type, you'll have access to the same variables as described on the Field docs.

Address Fields #

FieldTypeDescription
address1LabelStringThe label for the Address 1 sub-field.
address1PlaceholderStringThe placeholder for the Address 1 sub-field.
address1DefaultValueStringThe default value for the Address 1 sub-field.
address1RequiredStringWhether the Address 1 sub-field should be required.
address1ErrorMessageStringThe error message for the Address 1 sub-field.
address1CollapsedBooleanWhether the Address 1 sub-field is collapsed in the control panel.
address1EnabledBooleanWhether the Address 1 sub-field is enabled in the control panel.
address2LabelStringThe label for the Address 2 sub-field.
address2PlaceholderStringThe placeholder for the Address 2 sub-field.
address2DefaultValueStringThe default value for the Address 2 sub-field.
address2RequiredStringWhether the Address 2 sub-field should be required.
address2ErrorMessageStringThe error message for the Address 2 sub-field.
address2CollapsedBooleanWhether the Address 2 sub-field is collapsed in the control panel.
address2EnabledBooleanWhether the Address 2 sub-field is enabled in the control panel.
address3LabelStringThe label for the Address 3 sub-field.
address3PlaceholderStringThe placeholder for the Address 3 sub-field.
address3DefaultValueStringThe default value for the Address 3 sub-field.
address3RequiredStringWhether the Address 3 sub-field should be required.
address3ErrorMessageStringThe error message for the Address 3 sub-field.
address3CollapsedBooleanWhether the Address 3 sub-field is collapsed in the control panel.
address3EnabledBooleanWhether the Address 3 sub-field is enabled in the control panel.
cityLabelStringThe label for the City sub-field.
cityPlaceholderStringThe placeholder for the City sub-field.
cityDefaultValueStringThe default value for the City sub-field.
cityRequiredStringWhether the City sub-field should be required.
cityErrorMessageStringThe error message for the City sub-field.
cityCollapsedBooleanWhether the City sub-field is collapsed in the control panel.
cityEnabledBooleanWhether the City sub-field is enabled in the control panel.
stateLabelStringThe label for the State sub-field.
statePlaceholderStringThe placeholder for the State sub-field.
stateDefaultValueStringThe default value for the State sub-field.
stateRequiredStringWhether the State sub-field should be required.
stateErrorMessageStringThe error message for the State sub-field.
stateCollapsedBooleanWhether the State sub-field is collapsed in the control panel.
stateEnabledBooleanWhether the State sub-field is enabled in the control panel.
zipLabelStringThe label for the Zip sub-field.
zipPlaceholderStringThe placeholder for the Zip sub-field.
zipDefaultValueStringThe default value for the Zip sub-field.
zipRequiredStringWhether the Zip sub-field should be required.
zipErrorMessageStringThe error message for the Zip sub-field.
zipCollapsedBooleanWhether the Zip sub-field is collapsed in the control panel.
zipEnabledBooleanWhether the Zip sub-field is enabled in the control panel.
countryLabelStringThe label for the Country sub-field.
countryPlaceholderStringThe placeholder for the Country sub-field.
countryDefaultValueStringThe default value for the Country sub-field.
countryRequiredStringWhether the Country sub-field should be required.
countryErrorMessageStringThe error message for the Country sub-field.
countryCollapsedBooleanWhether the Country sub-field is collapsed in the control panel.
countryEnabledBooleanWhether the Country sub-field is enabled in the control panel.
countryOptionsFieldAttributeAn array of options available to pick a country from.

Agree #

FieldTypeDescription
descriptionStringThe description for the field.
descriptionHtmlStringThe HTML description for the field.
checkedValue StringThe value of this field when it is checked.
uncheckedValueStringThe value of this field when it is unchecked.
defaultValueStringThe default value for the field when it loads.

Categories #

FieldTypeDescription
placeholderStringThe option shown initially, when no option is selected.
sourceStringWhich source do you want to select categories from?
branchLimitStringLimit the number of selectable category branches.
categoriesCategoryQueryThe category query for available categories.

Checkboxes #

FieldTypeDescription
optionsKeyValueDefine the available options for users to select from.
layoutStringSelect which layout to use for these fields.
defaultValueStringEntering a default value will place the value in the field when it loads.

Date/Time #

FieldTypeDescription
includeTimeBooleanWhether this field should include the time.
defaultValueStringEntering a default value will place the value in the field when it loads.
displayTypeStringSet different display layouts for this field.

Dropdown #

FieldTypeDescription
multipleBooleanWhether this field should allow multiple options to be selected.
optionsStringDefine the available options for users to select from.
defaultValueStringEntering a default value will place the value in the field when it loads.

Email Address #

FieldTypeDescription
placeholderStringThe text that will be shown if the field doesn’t have a value.
defaultValueStringEntering a default value will place the value in the field when it loads.

Entries #

FieldTypeDescription
placeholderStringThe option shown initially, when no option is selected.
sourcesStringWhich sources do you want to select entries from?
limitStringLimit the number of selectable entries.
entriesEntryQueryThe entry query for available entries.

File Upload #

FieldTypeDescription
uploadLocationSourceStringThe volume for files to be uploaded into.
uploadLocationSubpathStringThe sub-path for the files to be uploaded into.
limitFilesStringLimit the number of files a user can upload.
sizeLimitStringLimit the size of the files a user can upload.
allowedKindsStringA collection of allowed mime-types the user can upload.

Heading #

FieldTypeDescription
headingSizeStringChoose the size for the heading.

Hidden #

FieldTypeDescription
defaultOptionStringThe selected option for the preset default value chosen.
defaultValueStringEntering a default value will place the value in the field when it loads. This will be dependant on the value chosen for the defaultOption.
queryParameterStringIf query string is selected for the defaultOption, this will contain the query string parameter to look up.

Html #

FieldTypeDescription
htmlContentStringEnter HTML content to be rendered for this field.

Multi-Line Text #

FieldTypeDescription
placeholderStringThe text that will be shown if the field doesn’t have a value.
defaultValueStringEntering a default value will place the value in the field when it loads.
limitStringWhether to limit the content of this field.
limitTypeStringEither words or characters.
limitAmountStringThe number of character or words to limit this field by.
useRichTextStringWhether the front-end of the field should use a Rich Text editor. This is powered by Pell.
richTextButtonsStringAn array of available buttons the Rich Text field should use. Consult the Pell docs for these options.

Name #

FieldTypeDescription
useMultipleFieldsStringWhether this field should use multiple fields for users to enter their details.
prefixLabelStringThe label for the Prefix sub-field.
prefixPlaceholderStringThe placeholder for the Prefix sub-field.
prefixDefaultValueStringThe default value for the Prefix sub-field.
prefixRequiredStringWhether the Prefix sub-field should be required.
prefixErrorMessageStringThe error message for the Prefix sub-field.
prefixCollapsedBooleanWhether the Prefix sub-field is collapsed in the control panel.
prefixEnabledBooleanWhether the Prefix sub-field is enabled in the control panel.
prefixOptionsFieldAttributeAn array of options available to pick a prefix from.
firstNameLabelStringThe label for the First Name sub-field.
firstNamePlaceholderStringThe placeholder for the First Name sub-field.
firstNameDefaultValueStringThe default value for the First Name sub-field.
firstNameRequiredStringWhether the First Name sub-field should be required.
firstNameErrorMessageStringThe error message for the First Name sub-field.
firstNameCollapsedBooleanWhether the First Name sub-field is collapsed in the control panel.
firstNameEnabledBooleanWhether the First Name sub-field is enabled in the control panel.
middleNameLabelStringThe label for the Middle Name sub-field.
middleNamePlaceholderStringThe placeholder for the Middle Name sub-field.
middleNameDefaultValueStringThe default value for the Middle Name sub-field.
middleNameRequiredStringWhether the Middle Name sub-field should be required.
middleNameErrorMessageStringThe error message for the Middle Name sub-field.
middleNameCollapsedBooleanWhether the Middle Name sub-field is collapsed in the control panel.
middleNameEnabledBooleanWhether the Middle Name sub-field is enabled in the control panel.
lastNameLabelStringThe label for the Last Name sub-field.
lastNamePlaceholderStringThe placeholder for the Last Name sub-field.
lastNameDefaultValueStringThe default value for the Last Name sub-field.
lastNameRequiredStringWhether the Last Name sub-field should be required.
lastNameErrorMessageStringThe error message for the Last Name sub-field.
lastNameCollapsedBooleanWhether the Last Name sub-field is collapsed in the control panel.
lastNameEnabledBooleanWhether the Last Name sub-field is enabled in the control panel.

Number #

FieldTypeDescription
placeholderStringThe text that will be shown if the field doesn’t have a value.
defaultValueStringEntering a default value will place the value in the field when it loads.
limitStringWhether to limit the numbers for this field.
minStringThe minimum number that can be entered for this field.
maxStringThe maximum number that can be entered for this field.
decimalsStringSet the number of decimal points to format the field value.

Phone #

FieldTypeDescription
showCountryCodeStringWhether to show an additional dropdown for selecting the country code.
countryLabelStringThe label for the Country sub-field.
countryPlaceholderStringThe placeholder for the Country sub-field.
countryDefaultValueStringThe default value for the Country sub-field.
countryCollapsedBooleanWhether the Country sub-field is collapsed in the control panel.
countryEnabledBooleanWhether the Country sub-field is enabled in the control panel.
countryOptionsFieldAttributeAn array of options available to pick a country from.
numberLabelStringThe label for the Number sub-field.
numberPlaceholderStringThe placeholder for the Number sub-field.
numberDefaultValueStringThe default value for the Number sub-field.
numberCollapsedBooleanWhether the Number sub-field is collapsed in the control panel.

Products #

FieldTypeDescription
placeholderStringThe option shown initially, when no option is selected.
sourcesStringWhich sources do you want to select products from?
limitStringLimit the number of selectable products.

Radio #

FieldTypeDescription
optionsStringDefine the available options for users to select from.
layoutStringSelect which layout to use for these fields.

Repeater #

FieldTypeDescription
addLabelStringThe label for the button that adds another instance.
minRowsStringThe minimum required number of instances of this repeater's fields that must be completed.
maxRowsStringThe maximum required number of instances of this repeater's fields that must be completed.

Recipients #

FieldTypeDescription
displayTypeStringWhat sort of field to show on the front-end for users.
optionsStringDefine the available options for users to select from.

Section #

FieldTypeDescription
borderStringAdd a border to this section.
borderWidthStringSet the border width (in pixels).
borderColorStringSet the border color.

Single-Line Text #

FieldTypeDescription
placeholderStringThe text that will be shown if the field doesn’t have a value.
defaultValueStringEntering a default value will place the value in the field when it loads.
limitStringWhether to limit the content of this field.
limitTypeStringEither words or characters.
limitAmountStringThe number of character or words to limit this field by.

Table #

FieldTypeDescription
columnsStringDefine the columns your table should have.
defaultsStringDefine the default values for the field.
addRowLabelStringThe label for the button that adds another row.
staticStringWhether this field should disallow adding more rows, showing only the default rows.
minRowsStringThe minimum required number of rows in this table that must be completed.
maxRowsStringThe maximum required number of rows in this table that must be completed.

Tags #

FieldTypeDescription
placeholderStringThe option shown initially, when no option is selected.
sourceStringWhich source do you want to select tags from?
tagsTagQueryThe tag query for available tags.

Users #

FieldTypeDescription
placeholderStringThe option shown initially, when no option is selected.
sourcesStringWhich sources do you want to select users from?
limitStringLimit the number of selectable users.
usersUserQueryThe user query for available users.

Variants #

FieldTypeDescription
placeholderStringThe option shown initially, when no option is selected.
source StringWhich source do you want to select variants from?
limitStringLimit the number of selectable variants.

Nested Fields #

For nested fields like Group and Repeater, you have access to nestedRows and fields.

{
    form (handle: "contactForm") {
        title
        handle
        
        fields {
            name

            ... on Field_Group {
                nestedRows {
                    fields {
                        name
                    }
                }
            }
        }
    }
}

The CsrfTokenInterface interface #

This is the interface to allow easy retrieval of a CSRF token and value.

FieldTypeDescription
nameStringThe CSRF name.
valueStringThe CSRF token.

Submissions #

Query payload #

{
    submissions (form: "contactForm") {
        title

        ... on contactForm_Submission {
            yourName
            emailAddress
            message
        }
    }
}

The response #

{
    "data": {
        "submissions": [
            {
                "title": "2020-07-24 22:01:59",
                "yourName": "Peter Sherman",
                "emailAddress": "psherman@wallaby.com",
                "message": "Just wanted to say hi!"
            }
        ]
    }
}

The submissions query #

This query is used to query for Submission objects. You can also use the singular submission to fetch a single submission. There are also formieSubmissions and formieSubmission aliases.

ArgumentTypeDescription
id[QueryArgument]Narrows the query results based on the elements’ IDs.
uid[String]Narrows the query results based on the elements’ UIDs.
archivedBooleanNarrows the query results to only elements that have been archived.
trashedBooleanNarrows the query results to only elements that have been soft-deleted.
uniqueBooleanDetermines whether only elements with unique IDs should be returned by the query.
title[String]Narrows the query results based on the elements’ titles.
searchStringNarrows the query results to only elements that match a search query.
relatedTo[Int]Narrows the query results to elements that relate to any of the provided element IDs. This argument is ignored, if relatedToAll is also used.
relatedToAll[Int]Narrows the query results to elements that relate to all of the provided element IDs. Using this argument will cause relatedTo argument to be ignored.
ref[String]Narrows the query results based on a reference string.
fixedOrderBooleanCauses the query results to be returned in the order specified by the id argument.
inReverseBooleanCauses the query results to be returned in reverse order.
dateCreated[String]Narrows the query results based on the elements’ creation dates.
dateUpdated[String]Narrows the query results based on the elements’ last-updated dates.
offsetIntSets the offset for paginated results.
limitIntSets the limit for paginated results.
orderByStringSets the field the returned elements should be ordered by.
form[String]Narrows the query results based on the form’s handle.

Nested Fields #

An example for querying Repeater and Group field content.

{
    submissions (handle: "contactForm") {
        title
        
        ... on contactForm_Submission {
            groupFieldHandle {
                myFieldHandle
            }

            repeaterFieldHandle {
                rows {
                    myFieldHandle
                }
            }
        }
    }
}

Mutations #

Mutations in GraphQL provide a way of modifying data. The actual mutations will vary depending on the schema. There are some common mutations per GraphQL object type as well as type-specific mutations.

Be sure to read the GraphQL docs.

Submissions #

Saving a submission #

To create or update a submission use the form-specific mutation, which will have the name in the form of save_<formHandle>_Submission.

ArgumentTypeDescription
idIDSet the element’s ID.
uidStringSet the element’s UID.
enabledBooleanWhether the element should be enabled.
titleStringSet the element’s title.
statusStringSet the element’s status as its handle.
statusIdIntSet the element’s statusId.
...More arguments depending on the field layout for the form

The below shows an example request to create a new submission. For this form, we have a single-line text field with the handle yourName. In our query variables, we pass the value(s) we want to use in the query.

// Query
mutation saveSubmission($yourName:String) {
    save_contactForm_Submission(yourName: $yourName) {
        title
        yourName
    }
}

// Query Variables
{
    "yourName": "Peter Sherman"
}

With the resulting output:

{
    "data": {
        "save_contactForm_Submission": {
            "title": "2020-08-18 10:29:06",
            "yourName": "Peter Sherman"
        }
    }
}

Complex Fields #

Some fields, such as Name and Address fields are much more than primitive values. Instead, their content needs to be provided as an object. The Name field is an exception, as it can be set to have multiple fields, or a single field.

For example, you can populate a name and address field using the below:

// Query
mutation saveSubmission($yourName:contactForm_yourName_FormieNameInput $yourAddress:contactForm_yourAddress_FormieAddressInput) {
    save_contactForm_Submission(yourName: $yourName, yourAddress: $yourAddress) {
        yourName
        yourAddress
    }
}

// Query Variables
{
    "yourName": {
        "firstName": "Peter",
        "lastName": "Sherman"
    },
    "yourAddress": {
        "address1": "42 Wallaby Way",
        "city": "Sydney",
        "zip": "2000",
        "state": "NSW",
        "country": "Australia"
    }
}

You'll notice the contactForm_yourName_FormieNameInput type being used. This follows the structure of {formHandle}_{fieldHandle}_FormieNameInput. There are also a number of other input types to consider.

Address Field #

// Query
mutation saveSubmission($yourAddress:contactForm_yourAddress_FormieAddressInput) {
    save_contactForm_Submission(yourAddress: $yourAddress) {
        yourAddress
    }
}

// Query Variables
{
    "yourAddress": {
        "address1": "42 Wallaby Way",
        "city": "Sydney",
        "zip": "2000",
        "state": "NSW",
        "country": "Australia"
    }
}

Group Field #

// Query
mutation saveSubmission($groupField:contactForm_groupField_FormieGroupInput) {
    save_contactForm_Submission(groupField: $groupField) {
        groupField {
            firstValue: firstValue
            secondValue: secondValue
        }
    }
}

// Query Variables
{
    "groupField": {
        "firstValue": "This content",
        "secondValue": "is for groups"
    }
}

Repeater Field #

// Query
mutation saveSubmission($repeaterField:contactForm_repeaterField_FormieRepeaterInput) {
    save_contactForm_Submission(repeaterField: $repeaterField) {
        repeaterField {
            rows: {
                field1: field1
                field2: field2
            }
        }
    }
}

// Query Variables
{
    "repeaterField": {
        "rows": [
            {
                "field1": "First Block - Field 1",
                "field2": "First Block - Field 2"
            },
            {
                "field1": "Second Block - Field 1",
                "field2": "Second Block - Field 2"
            }
        ]
    }
}

Deleting a submission #

To delete a submission use the deleteSubmission mutation, which requires the id of the submission that must be deleted. It returns a boolean value as the result to indicate whether the operation was successful.

// Query to delete a submission with ID of `1110` for a site with an ID of `2`.
mutation deleteSubmission {
    deleteSubmission(id:1110 siteId:2)
}

With the resulting output:

{
    "data": {
        "deleteSubmission": true
    }
}

Validation #

If a mutation triggers a validation error, you'll get a response back, similar to the below. Here, the example shows the user didn't provide an email address, for the emailAddress field, despite it being required. The message will always be a JSON-encoded response of errors.

{
    "errors": [
        {
            "message": "{\"emailAddress\":[\"Email Address cannot be blank.\"]}",
            "extensions": {
                "category": "graphql"
            }
        }
    ],
    "data": {
        "save_contactForm_Submission": null
    }
}

Get started with Formie

Available for Craft 3. Get it from the plugin store.