Passing data into forms

When a user fills out your form, you might already have some information about them before they even start the form. By prefilling the form answers, you can avoid repetition and customize the responder's experience.

Data can be passed into form flows in three ways:

• URL parameters
• Reading from (and writing to) cookies
• POSTing values from another form

Pre-populating with URL parameters

The easiest way to pre-populate forms with existing answers is to pass them directly in the URL, using the query string. The query string appears at the end of the URL's pathname (but before a hash). It begins with a ?, and is followed by a number of key and value pairs, each separated by an & and joined with a =.

Example URL     https://flow.formsort.com/client/formsort/flow/onboarding/variant/main?email=hello%40formsort.com&name=Fil#0
Host            https://flow.formsort.com
Pathname        /client/formsort/flow/onboarding/variant/main
Query string    ?email=hello%40formsort.com&name=Fil
Hash            #0

For each value that you wish to set, use the Answer variable name as the key, and the value you wish to set as the value.

Safe and easy generation of the query string

The query string is part of the URL, and its components need to be url-safe. Characters list spaces, ampersands, and others cannot appear in URLs, and so need to be escaped. This is why in the above example hello@formsort.com actually appears as hello%40formsort.com: it has been percent-encoded.

If you're generating the URL to redirect to in javascript, make sure to use the encodeURIComponent() method on each part that you're encoding. Similar functions exist for other languages.

If you're using the Formsort preview window, you can also set answers and see the generated URL using the Set answers... dialog.

Setting multiple values

There is no single standard for setting multiple values (eg, a select question that allows choosing multiple values). Formsort handles this by allowing you to repeat the answer key.

If you have a variable named favorite_fruits and want to pre-set it to both Apple and Banana, the query string should look like this:

?favorite_fruits=Apple&favorite_fruits=Banana

Domain defaults

When adding or editing a domain under which you will be hosting flows, you may set a default query string using the Default URL params field.

This is useful if you want to parametrize a flow based on what URL a responder is accessing it from, without needing to include URL parameters in every usage of that URL. For example, if you have a flow that contains a variable named country, you can set up one domain called fr.example.com with Default URL params set to ?country=France and another domain called es.example.com with Default URL params set to ?country=Spain and those answers would be pre-set when accessing the flows, even if accessing the bare URL without any query string.

Consideration: personally-identifying information (PII)

As part of the loading sequence, and before loading any third-party analytics, Formsort strips any values that correspond to semantically-labeled answers (such as responder_email or responder_first_name), or answers that have been marked as Don't send to analytics from the URL.

This is because many third party analytics scripts will happily log the URL of an event, and since the query string is part of the event, you may be sending PII to third parties if the answer were not stripped.

Reading from and writing to cookies

Cookies are text data that websites can store in your browser, which your browser sends back to servers, as a way of persisting data.You can use cookies to pass values into Formsort flows.

To enable the use of cookies:

1. Enable Read/write in cookie in the schema editor for the answers you wish to read and write using cookies.
2. Write a cookie, on your root domain, with a key of the variable name and a value of the answer for each answer you wish to pass forward.
3. Load the flow.

If, in the course of filling out the flow, the responder changes their answer for one of the cookie-enabled answers, the cookie will be updated with the new answer.

POSTing values

One of the most secure ways of passing data into a Formsort flow is to POST into the form.

Normally, when you navigate to a flow URL, your browser does a GET request to our servers. GET requests do not have a payload (known as a body): when making a link, the only way to pass information to the receiving page is using URL parameters, as described above. Since the parameters appear in the URL, they are visible to not only the responder but potentially to other scripts or browser extensions that you or the responder has loaded on their flow.

A POST request, on the other hand, has an encrypted body, and is the default way to submit form data in basic HTML. Formsort supports POSTing to the flow URLs as well as GETing. A form like the following would ask the responder for a name answer, then submit it to the Formsort URL. Note that we set the name attribute to match the Answer variable name value we've defined in the flow.

<!doctype html>
<html>
  <body>
    <form action="https://flow.formsort.com/client/formsort/flow/test/variant/test-post" method="POST">
      <label for="first_name">Enter your first name</label>
      <input type="text" name="first_name" required />
      <button type="submit">Let's go</button>
    </form>
  </body>
</html>

POSTing hidden inputs

If you don't actually want to ask questions before redirecting to formsort, that's not a problem: just set all of the answers you wish to pass forward within the value attribute of <input> elements with type=hidden, like this:

<input type="hidden" name="first_name" value="Olivia" />

When the containing <form> is submitted, the answers will come along for the ride, just as if the responder has entered them.

Want to learn more about Formsort? Get started today!