LogoLogo
Back to studio
  • Formsort documentation
  • โฉQuickstart
    • ๐ŸŸขGet started with Formsort
    • ๐ŸŽCore concepts
    • โ„น๏ธQuestion and content reference
    • ๐Ÿ“•Key terms
    • ๐Ÿž๏ธCreate your first flow
    • ๐Ÿ“–Add content and collect answers
      • ๐ŸคณCapture demographic data
      • โ„น๏ธAdd informational content
      • ๐Ÿ” Review your variable schema
    • ๐ŸŽจCreate a theme
      • Set brand guidelines
    • ๐ŸคนPersonalize your flow
      • ๐ŸŒŸTemplate your variables
      • ๐Ÿง Add conditional logic
      • ๐Ÿ’ซUsing conditional logic with Calculated and API variables
      • ๐Ÿ”šEnd the flow
    • ๐Ÿ”€Set up integrations
    • ๐Ÿš€Go live
      • Auditing your flow for content, functionality, and design
    • ๐Ÿ’ผCommon use cases
      • ๐Ÿ’”Disqualify responders
      • ๐Ÿ—“๏ธAdd a scheduling option
      • ๐Ÿ“„Allow responders to read and accept your company policies
  • ๐Ÿ—๏ธBuilding flows
    • Flows and variants
      • Flow starts
    • Adding content
      • Groups
      • Steps
        • Settings
        • Logic
        • Style
      • Questions
        • General Settings
        • Style
        • Address
        • Comparison
        • Confirmation
        • Date
        • Date & Time
        • Email address
        • File upload
        • Grid choice
        • Iframe
        • Image upload
        • Number
        • Payment
        • Phone number
        • Postal code
        • Question group
        • Region
        • Select
          • Providing choices via API or calculation
        • Signature
        • SSN
        • Text questions
        • Yes/No
      • Content
        • General Settings
        • Statement
        • Image
        • Video
        • Next button
        • Divider
        • Map
      • Endings
      • Using markdown
      • Using variable templating
        • Template formatting functions
      • Copy-pasting form content
      • Content library
    • Conditions and logic
      • Logical operator reference
      • Advanced logic
    • Variables (answers)
      • Variables from questions
      • Externally provided variables
      • Calculated variables
      • API lookups
      • System Library variables
      • Orphaned variables
    • Schemas
      • JSON Schemas
      • Validating flow schemas
    • Redirects
    • Styling and themes
      • CSS Reference
      • Overriding theme styling
      • Custom CSS overrides
      • Content area
      • Animations and transitions
      • Form Layout
      • Typography
        • Adobe Fonts
        • Hosting custom fonts
      • Color variables
      • Dimension variables
      • Question containers
      • Assets
      • Form Buttons
        • Select buttons
      • Inputs and dropdowns
      • Checkmarks
      • Tables
      • Sliders
      • Divider lines
      • Progress bar
      • Comparison cards
    • Variant settings
      • Form behavior for returning responders
      • Group ranking API
    • Publishing and versions
      • Preview window
      • Deploying
      • History
  • ๐Ÿ’พHandling data
    • Philosophy and data retention policy
    • Viewing form answers
    • Responder UUIDs
    • Environments
      • Loading different environments
    • Passing data in
      • URL parameters
      • POST body
      • Embed query parameters
    • Custom validators
    • Form answers and events
      • Analytics events
      • Signed requests
      • Event payload shape
      • Submission frequencies
      • Runtime error reporting
      • Admin API
      • Flow content data format
    • Integration reference
      • Amplitude
        • Amplitude cross domain tracking
      • BigQuery
      • FullStory
      • Google Analytics
        • Updating from Universal Analytics to GA4
      • Google Cloud Storage
      • Google Sheets
      • Google Tag Manager (GTM)
        • JavaScript triggered by flow events
      • Hubspot
      • Jornaya
      • Optimizely
      • PostgreSQL
      • Redshift
      • Rudderstack
      • S3
      • Salesforce
      • Segment
        • Segment Setup
        • Segment cross domain tracking
      • Stripe
      • TrustedForm
      • Webhooks
        • Zapier
  • ๐Ÿ“บGoing live
    • Custom domains
    • Built-in analytics
    • Embedding
      • Web-Embed API
        • React-embed
      • Adding authentication
      • Embedding forms in iOS and Android
      • Setting up a dev environment
    • Split testing
    • Preflight checklist
  • ๐ŸขTeams
    • Accounts
      • Roles and permissions
    • Events subscriptions
    • Workspace domain detection
Powered by GitBook
On this page
  • Example: POSTing from a <form>
  • Example: POSTing in javascript
  • Pre-posting data for a responder UUID

Was this helpful?

  1. Handling data
  2. Passing data in

POST body

Passing data through the body of a HTTP request.

PreviousURL parametersNextEmbed query parameters

Last updated 2 years ago

Was this helpful?

In addition to pre-populating answers using , 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.

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 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.

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":

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>

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.

This is an unimplemented feature - chat us if you'd be interested in this.

๐Ÿ’พ
URL parameters