POST body
Passing data through the body of a HTTP request.
In addition to pre-populating answers using 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.The POST must be a navigation request.
You cannot just POST form data to Formsort using AJAX and then redirect the user.
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
cat_name
set to "Olivia"
and the cat_color
set to gray
:<!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.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'sname
.- 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'sname
. Make sure the<select>
has themultiple
property set totrue
, and each<option>
has theselected
property set totrue
.
- 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"
:index.html
<!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>
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.
This is an unimplemented feature - chat us if you'd be interested in this.
Last modified 4mo ago