# POST body

In addition to pre-populating answers using [URL parameters](https://docs.formsort.com/importing-data/url-parameters), It's possible to `POST` form data into Formsort. This may be preferable, as answers will not appear within the URL at any point - POST bodies are part of the HTTP body and are encrypted with HTTPS.

To POST data, the user must navigate to the deployed URL of your flow with the answers as form data in the body of the form, using the answer variable name as the `name` of the input.

{% hint style="warning" %}
The POST must be a *navigation* request.

You cannot just POST form data to Formsort using AJAX and then redirect the user.
{% endhint %}

## Example: POSTing from a \<form>

Normally, when you access a page directly in a browser, or by clicking a link, the browser will send a GET request, which cannot contain a body.

On the other hand, when submitting a `<form>` in HTML, the browser will navigate with a `POST` method, which will actually redirect the user to that URL.

Here's a working example as a standalone html page, that would redirect the user to a flow with the text question (`cat_name`) set to `"Olivia"` and a Select question (`cat_color`) set to `gray`:

```html
<!DOCTYPE html>
<html>
  <body>
    <!-- TODO: Set the `action` to the URL of your deployed form -->
    <form
      method="POST"
      <!-- "/variant/VARIANT_ID/" path is optional -->
      action="https://CLIENT_ID.formsort.app/flow/FLOW_ID/variant/VARIANT_ID/..."
    >
      <input name="cat_name" value="Olivia" />
      <select name="cat_color" multiple>
        <option value="gray" selected>gray</option>
        <option value="brown" selected>brown</option>
        <option value="red" selected>red</option>
      </select>
      <input type="submit" value="Start flow" />
    </form>
  </body>
</html>
```

Of course, you could also use `<input>` attribute `type="hidden"` if the data you wish to pass should not be user editable.

In the cases where a question may be an object with nested fields, such as the [Address](https://docs.formsort.com/adding-questions-and-content/question-reference/address) component, or may be an array of objects, such as the [Question Group](https://docs.formsort.com/adding-questions-and-content/question-reference/question-group), you can use bracket notation for pathing. View two examples below.&#x20;

The Address component data shape is as follows,

```
"address": {
 "address_1": "123 William St",
 "city": "New York",
 "state": "NY",
 "postal_code": "10038",
 }
```

and can be POSTed using the following HTML format:&#x20;

```
<legend>Compound field</legend>
<input name="address[address_1]" value="123 William St" />
<input name=address[city]" value="New York" />
<input name="address[state]" value="NY" />
<input name="address[postal_code]" value="10038" />
```

Question Groups, which are an array of objects,

```
"question_group": [
      {
        "group_text": "first input"
      },
      {
        "group_text": "second input"
      }
    ]
```

can be POSTed as:&#x20;

```
<legend>Compound field:</legend>
<input name="question_group[0][group_text]" value="first input" />
<input name="question_group[1][group_text]" value="second input" /> 
```

In this Question Group example, notice that indices start from 0.&#x20;

## Example: POSTing in javascript

If you cannot have a `<form>`, or it doesn't make sense for your UX, you can create a `form` element on the fly and synthetically submit it:

1. Build up a `<form>` in your click handler
2. Add the answers:
   * For questions that accept a single answer, such as text questions, use `<input type="hidden">`. Assign the answer's *variable name* as the element's `name`.
     * For questions that accept multiple answers, use a `<select>` element, adding each answer as an `<option>`. Assign the answer's *variable name* as the `<select>` element's `name`. Make sure the `<select>` has the `multiple` property set to `true`, and each `<option>` has the `selected` property set to `true`.
3. Finally, `.submit()` the form instance.

Here's a working example as a standalone html page, that would redirect the user to a flow with `cat_name` set to `"Olivia"`:

{% code title="index.html" %}

```markup
<!doctype html>
<html>
  <head>
    <script>
      // TODO: Set these to your own values
      const clientId = 'YOUR_CLIENT';
      const flowId = 'YOUR_FLOW_LABEL';
      const variantId = 'YOUR_VARIANT_LABEL';
    
      let flow_url = "https://flow.formsort.com"
      flow_url += `/client/${clientId}`;
      flow_url += `/flow/${flowId}`;
      flow_url += `/variant/${variantId}`;
      
      const answers = {
        "cat_name": "Olivia",
        "cat_color": ["gray", "brown"]
      };
      
      const handleFormRedirect = (e) => {
        e.preventDefault();
        
        // 1. Build up a <form>
        const form = document.createElement('form');
        form.method = "POST"
        form.action = flow_url;
        
        // 2. Add the answers as <input type=hidden>
        Object.keys(answers).forEach((key) => {
          // If the answer is an array, add as <select> with <options>s
          if (Array.isArray(answers[key])) {
            const select = document.createElement("select");
            select.type === "hidden"
            select.name = key;
            select.multiple = true;

            answers[key].forEach((answer) => {
              const option = document.createElement("option");
              option.value = answer;
              option.selected = true;
              select.options.add(option);
            });
            form.appendChild(select);
          } else {
            // If the answer is a single value, add as an <input>
            const input = document.createElement("input");
            input.type = "hidden";
            input.name = key;
            input.value = answers[key];
            form.appendChild(input);
          }
        });
        document.body.appendChild(form);
        
        // 3. Submit the form instance
        form.submit();
      }
    </script>
  </head>
  <body>
    <a href="" onclick="handleFormRedirect(event)">Start flow</a>
  </body>
<html>
```

{% endcode %}

## Pre-posting data for a responder UUID

In the future, we'd like to support pre-posting data for a responder UUID, so that you can POST data asynchronously before you actually navigate the user to the flow, at which point the data will be retrieved.

{% hint style="info" %}
This is an unimplemented feature - chat us if you'd be interested in this.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.formsort.com/importing-data/post-body.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
