Add docs on multipage forms

[justlevine]

Gotten several questions about this privately.

We should add a doc outlining usage of multipage forms, including:

• querying and paginating through form fields and pages.
• page validation and submission.
• routing to the targetPage.

[SamuelHadsall]

@justlevine is there any documentation on multipage forms yet?
where: {pageNumber: $pageNumber} is now working, Thank you for the fix. But what do I key off to know that it's a stepped form?
If I query page 1, I have no nextbutton until I query page 2. Also if I query pageInfo, hasNextPage always returns false shouldn't this be true?

"data": {
    "gfForm": {
      "databaseId": 7,
      "title": "Car Shipping",
      "description": "",
      "submitButton": {
        "conditionalLogic": null,
        "location": "BOTTOM",
        "text": "Submit",
        "type": "TEXT",
        "width": "AUTO"
      },
      "confirmations": [
        {
          "isDefault": true,
          "message": ""
        }
      ],
      "formFields": {
        "nodes": [
          {
            "id": 2,
            "type": "ADDRESS",
            "pageNumber": 1,
            "databaseId": 2,
            "label": "Pickup Zip",
            "description": null,
            "cssClass": null,
            "isRequired": true,
            "inputs": [
              {
                "key": "street",
                "label": "Street Address",
                "placeholder": null,
                "isHidden": true
              },
              {
                "key": "lineTwo",
                "label": "Address Line 2",
                "placeholder": null,
                "isHidden": true
              },
              {
                "key": "city",
                "label": "City",
                "placeholder": null,
                "isHidden": true
              },
              {
                "key": "state",
                "label": "State / Province",
                "placeholder": null,
                "isHidden": true
              },
              {
                "key": "zip",
                "label": "ZIP / Postal Code",
                "placeholder": null,
                "isHidden": false
              },
              {
                "key": "country",
                "label": "Country",
                "placeholder": null,
                "isHidden": true
              }
            ],
            "conditionalLogic": null,
            "visibility": "VISIBLE"
          },
          {
            "id": 3,
            "type": "ADDRESS",
            "pageNumber": 1,
            "databaseId": 3,
            "label": "Delivery Zip",
            "description": null,
            "cssClass": null,
            "isRequired": true,
            "inputs": [
              {
                "key": "street",
                "label": "Street Address",
                "placeholder": null,
                "isHidden": true
              },
              {
                "key": "lineTwo",
                "label": "Address Line 2",
                "placeholder": null,
                "isHidden": true
              },
              {
                "key": "city",
                "label": "City",
                "placeholder": null,
                "isHidden": true
              },
              {
                "key": "state",
                "label": "State / Province",
                "placeholder": null,
                "isHidden": true
              },
              {
                "key": "zip",
                "label": "ZIP / Postal Code",
                "placeholder": null,
                "isHidden": false
              },
              {
                "key": "country",
                "label": "Country",
                "placeholder": null,
                "isHidden": true
              }
            ],
            "conditionalLogic": null,
            "visibility": "VISIBLE"
          }
        ],
        "pageInfo": {
          "endCursor": "YXJyYXljb25uZWN0aW9uOjE=",
          "hasNextPage": false,
          "hasPreviousPage": false,
          "startCursor": "YXJyYXljb25uZWN0aW9uOjA="
        }
      },
      "nextFieldId": 15,
      "pagination": {
        "type": "PERCENTAGE",
        "style": "BLUE",
        "color": null,
        "hasProgressbarOnConfirmation": false,
        "backgroundColor": null,
        "lastPageButton": {
          "text": "Previous",
          "type": "TEXT"
        }
      }
    }
  }

[justlevine]

Hey @SamuelHadsall , so sorry I missed this reply.

is there any documentation on multipage forms yet?

Not yet but I'm working on it for this release. PRs encouraged ;-)

But what do I key off to know that it's a stepped form?

Not entire sure what you mean by this. If you're asking if there's an indicator on gfForm that the form fields are split into pages, theres the GfForm.pagination field, which gives you a FormPagination object.

If I query page 1, I have no nextbutton until I query page 2.

This is a DX bug, caused by GF_Field_Page using the pageNumber for the upcoming page, as you noted leads to pointless behavior in this context. Addressing this ix #422 , which will ship in the upcoming 0.13.0 release.

Also if I query pageInfo, hasNextPage always returns false shouldn't this be true?

This is a naming things problem. pageInfo refers to GraphQL's Relay pagination, and indicates whether there are more results than the number of connection items you're requesting in the first or last args. If you're filtering by a GF form page number, and you're getting all the form fields for that filter, then there is no additional items for GraphQL to paginate through.

I think the best way to address this is renaming the filter arg from pageNumber to formPageNumber to make the distinction clearer, but i'm open to other/additional ideas.

[SamuelHadsall]

Thanks @justlevine I'll keep an eye out for the next release.