Progressive Form Capture

Gather even more data from your forms by collecting partial submissions in multiple steps with progressive form capture.

Paid Feature

This feature is only available on the Agency plan. Free, Basic, Standard, and Premium users will need to upgrade to use this feature.

How does progressive form capture work?

Progressive form capture on usebasin.com is designed to streamline data collection by dividing a single form into multiple sections. As users navigate through each section, Basin tracks and stores the entered data, ensuring a cohesive submission. If a user exits the form part way through filling it out, Basin retains the data as a 'draft' for 15 minutes before marking it as 'abandoned.' Completed forms are seamlessly recorded as 'completed' submissions. This feature enhances data collection by capturing valuable insights even from partially completed forms, offering a comprehensive view of user interactions.

Setting up progressive form capture

---

1. Include the BasinJS script

Paste the example code below anywhere before the</body> tag:

<script src="https://js.usebasin.com/v2.3.0.min.js" async></script>

2. Set up your form for progressive form capture

Add data attributes to your form as follows:

1. Add data-basin-multistep to your <form> element

3. Optional: Set up form auto navigation

Don't want to code up the javascript to navigate between pages on your progressive form capture form? We've got you covered. Simply add these extra tags to your form and BasinJS will automatically move between pages/steps on your form.

1. Add data-basin-step to each page/step on your form.

   Example:

   <div id="step1" data-basin-step>
       <!-- Your form code for step/page 1 here -->
   </div>
   

2. Add data-basin-next and data-basin-previous to your navigation buttons.

   Let BasinJS know which buttons are for navigating between pages on your form.

   Example:

   <div id="step2" data-basin-step>
       <!-- Your form inputs here -->
       <button type="button" data-basin-previous>Back</button>
       <button type="button" data-basin-next>Next</button>
   </div>
   

Full example with auto-navigation

<form id="multiPageForm" action="https://usebasin.com/f/[YOUR_FORM_ENDPOINT]" method="POST" data-basin-multistep>
    <div id="step1" data-basin-step>
        <h2>Step 1: Personal Information</h2>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <br><br>
        <button type="button" data-basin-next>Next</button>
    </div>

    <div id="step2" data-basin-step>
        <h2>Step 2: Address</h2>
        <label for="address">Address:</label>
        <input type="text" id="address" name="address">
        <br><br>
        <label for="city">City:</label>
        <input type="text" id="city" name="city">
        <br><br>
        <button type="button" data-basin-previous>Previous</button>
        <button type="button" data-basin-next>Next</button>
    </div>

    <div id="step3" data-basin-step>
        <h2>Step 3: Age</h2>
        <label for="age">Age:</label>
        <input type="number" id="age" name="age">
        <br><br>
        <label for="DOB">DOB:</label>
        <input type="date" id="DOB" name="DOB">
        <br><br>
        <button type="button" data-basin-previous>Previous</button>
        <button type="submit">Submit</button>
    </div>
</form>
<script src="https://js.usebasin.com/v2.3.0.min.js" async></script>

Advanced: Basin progressive form capture API

Don't want to use BasinJS? Want to roll your own Javascript to interact with Basin? No problem, follow these steps to get going:

1. Acquire a JWT from Basin

   Make a GET request to https://usebasin.com/f/[YOUR_FORM_ENDPOINT]/generate_jwt this token will link your user's session to a single submission in Basin. This step needs to be completed before sending in the first part of the submission.

2. POST submissions to your form endpoint

   Once you have a JWT you can make POST requests to your form endpoint (https://usebasin.com/f/[YOUR_FORM_ENDPOINT]). A progressive form capture submission can be a draft submission or a complete submission. A draft submission is a submission that is not the final submission for the user session. For Basin to process progressive form capture submissions properly, a few keys are required with each request:

   Required Key	Type	Description
   basinjsmultistep	bool	Tag letting Basin know this is a multistep submission, should always be true
   basinjsdraft	bool	Tag for whether this is a draft or the final submission, should be true if there will be more POSTs from this user session that should be linked to the same submission in Basin. Should be false if this is the final POST for the submission.
   basinjwt	string	The JWT acquired in Step 1 from https://usebasin.com/f/[YOUR_FORM_ENDPOINT]/generate_jwt, links this POST request to a submission in Basin.

3. Expected responses

   All draft submissions will return a 200 OK response if accepted. Any other response should include a relevant error message.

Configuring webhooks with progressive form capture

Basin's integrations give you full control over how your progressive form capture submissions are handled. You can have webhooks fire for completed submissions, abandoned submissions or both. This allows you the flexibility to handle your submissions your way.

To configure your webhooks simply check the boxes for when you'd like the webhook to fire. Note that completed submissions are treated as 'non-spam' submissions

Privacy considerations

Please note that users residing in jurisdictions with specific privacy regulations (such as GDPR in the European Union, CCPA in California, or similar laws) may need to take additional steps to ensure compliance. These steps could include providing explicit consent for data collection, understanding their rights regarding data access and deletion, or adjusting form settings to align with local privacy requirements. We recommend reviewing the applicable privacy laws in your region and consulting with a legal professional if you have concerns about using Progressive Form Capture in your location. Basin is committed to data privacy, but it's the responsibility of form owners to ensure their data collection practices comply with all relevant local and international regulations.