GraphQL

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

Forms #

Query payload #

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

            rows {
                fields {
                    name
                    handle
                    type
                    displayName
                    columnWidth

                    ... on Field_Name {
                        firstNameLabel
                        firstNameRequired
                        lastNameLabel
                        lastNameRequired
                    }

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

The response #

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

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.

The FormInterface interface #

This is the interface implemented by all forms.

The PageInterface interface #

This is the interface implemented by all pages.

The PageSettingsInterface interface #

This is the interface implemented by all pages.

The RowInterface interface #

This is the interface implemented by all rows.

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.

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

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
                    }
                }
            }
        }
    }
}

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.