Pre-fill Form

Simplify data entry with automatic URL pre-filling.

Setup

Attribute: sf-prefill-url = true

Where: Form Container

Automatically fills form fields using URL query parameters. When combined with sf-save-progress (see Save Data & Progress) local storage data will take precedence unless it lacks specific fields, in which case URL data is used.

Usage Options

Option A: Dynamic Data Prefilling

Setup: Permanently enable sf-prefill-url=true on your form container.

Behavior: This setting dynamically manages data via URL parameters, allowing for real-time updates and edits. As users input or modify data, the URL parameters update accordingly, ensuring that the form data remains current.

User Interaction:

• When shared, this link allows recipients to view and edit the form based on the latest data reflected in the URL.

• Any changes made by users are saved and reflected in the URL, making it possible for them to pause and resume filling out the form without losing their progress.

This approach is ideal for collaborative or lengthy forms where multiple sessions or user inputs are expected, ensuring data integrity and continuity throughout the form completion process.

HTML Example

index.html

<!-- Form Container with Prefill URL Data Settings -->
<div sf="myForm" sf-prefill-url="true">
    <form>
        <!-- Step 1 -->
        <!-- Step 2 -->
    </form>
</div>

Webflow Example

Option B: Static Link Generation

Setup: Temporarily activate sf-prefill-url=true on your form container to generate a prefilled URL.

Behavior: This setup allows you to create a URL that captures the form's state at the moment of link creation. Once the link is generated, remove the sf-prefill-url attribute to lock in the data, preventing any further changes from affecting the prefilled values.

User Interaction:

• The generated link provides a static snapshot of the form data, which means recipients will see the form exactly as it was when the link was created.

• Ideal for situations where uniformity is critical, such as distributing registration forms for an event, where each participant receives the same initial information.

• Similar to the "Get Prefilled Link" feature in Google Forms.

This method is perfect for ensuring consistency and preventing discrepancies in data collection, especially when you need to distribute the form to multiple users under standardized conditions.

Best Practices

• Data Precedence: When combined with sf-save-progress, local storage data takes precedence over URL data, unless specific fields are missing, which the URL data then supplements.

• Link Stability: For scenarios requiring consistent information irrespective of user changes, initially use sf-prefill-url to set up the form, then remove the attribute post-link creation to maintain data integrity. Functions similarly to the "Get Prefilled Link" feature in Google Forms.

---

Quick Recap

Let's summarize the differences:

Feature	Option A: Dynamic Prefilling	Option B: Static Link Generation
Setup	Permanent sf-prefill-url=true	Temporary sf-prefill-url=true
Behavior	URL updates as data is edited, allowing real-time changes	URL captures data at link creation and locks it in
Ideal For	Forms needing ongoing updates, multi-session entries	URL captures data at link creation and locks it in
User Interaction	Editable by recipients, updates reflect in URL	Static data, recipients see form as it was when the link was created

This table highlights the distinct functionalities and suitable scenarios for each option, helping you determine the best approach based on your form's requirements and the desired user experience.