---
description: Simplify data entry with automatic URL pre-filling.
---

# Pre-fill Form



## Setup

**Attribute:** `sf-prefill-url = true`

**Where:** [form-container](../essentials/form-container "mention")

Automatically fills form fields using URL query parameters. When combined with `sf-save-progress` (see [save-data-and-progress](save-data-and-progress "mention")) 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**

{% code title="index.html" %}
```html
<!-- Form Container with Prefill URL Data Settings -->
<div sf="myForm" sf-prefill-url="true">
    <form>
        <!-- Step 1 -->
        <!-- Step 2 -->
    </form>
</div>

```
{% endcode %}



**Webflow Example**

{% embed url="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FeUixGqbGZrOOLg2gUMHX%2FPrefill-URL.mp4?alt=media&token=59cc4dbc-0164-4ee0-bbd1-e161146c31a6" %}





**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.&#x20;



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



{% hint style="info" %}
**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.&#x20;


{% endhint %}





***

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

