There are a variety of ways to submit Forms to Flywheel. See this article for an overview.


This article is dedicated to the details surrounding a server or ajax style submission.



URL:

The url is based on the MA instance url : https://[customer_name].flywheelma.com/form/submit?ajax=1


Important: You must include `ajax=1` in the URL - even if you're doing a server-side integration. Neglecting this flag will cause MA to assume that this is a normal Form submission and it will attempt to redirect on success/failure and will return html. This flag will cause all responses to be in JSON. 


Data:

MA is expecting a collection of data named 'mauticform` with an item for each Form field as well as a few required metadata items. 


`mauticform[formId]` : This should match the applicable MA Form

`mauticform[formName]` : This is the MA Form's name, but lowercase and only including [a-z][0-9] characters. For example, "Holiday 01-01-2019" would be "holiday01012019"


Every other item should match the "Field HTML Name" of the Form's field.
For example, the field shown in the image below would be `mauticform[numberofattendees]`:


Here is an example request in CURL format:

curl -X POST \
  'https://[CUSTOMER].flywheelma.com/form/submit?ajax=1' \
  -H 'Accept: application/json' \
  -d '{
    "mauticform" : {
      "name" : "Bruce Wayne",
      "email" : "bruce@example.com",
      "numberofattendees" : 2,
      "formId" : 1,
      "formName" : "kaleidoscoperegistration"
    }
}'


Response:

The response will be in JSON format. 


There will always be a success key. It will be 0 or 1, to represent a success or failure.


Successful Response:

{
    "success": 1,
    "results": {
        "name": "Bruce Wayne",
        "email": "bruce@example.com",
        "numberofattendees": 2
    },
    "successMessage": "Thank you for registering!",
    "formName": "kaleidoscoperegistration"
}


A Validation Failure will include details about the failure. The details may be an array or a string. There will be one item per failing field.

#Request:
curl -X POST \
  'https://[CUSTOMER].flywheelma.com/form/submit?ajax=1' \
  -H 'Accept: application/json' \
  -d '{
    "mauticform" : {
      "name" : "Bruce Wayne",
      "email" : "bruce@",
      "formId" : 1,
      "formName" : "kaleidoscoperegistration"
    }
}'

# Response:
{
    "success": 0,
    "validationErrors": {
        "email": [
            "The email is invalid."
        ],
        "numberofattendees": "'Number of attendees' is required."
    },
    "formName": "kaleidoscoperegistration"
}



Additional Ajax Considerations:

  1. In order to enable Cross Origin Resource Sharing (CORS), you must whitelist your domain in Flywheel MA. Please go to the Configuration -> System Settings -> CORS Settings to do this. 
  2. Ensure that you have proper error handling and logging in place. You do not want to block the User without clear direction. You also do not want to fail to sync data to Flywheel


Development:

Flywheel is always happy to provide a Development Copy of your instance and a developer user login. Please reach out to support@thinkflywheel.com to facilitate this.