> For the complete documentation index, see [llms.txt](https://attr.sygnal.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://attr.sygnal.com/sa5-data/overview.md).

# Usage Notes

SA5's Data features have two facets- 

* **Data Sources** refer to the ability to assemble, store, and retrieve data from Collection Lists, remote sources, the querystring, webStorage, cookies, and more. The data is collected and organized into a Datastore. 
* **Data-Bound Elements** uses these sources to pull data into your page, text element, rich text templates, form fields, and more. It lets you easily display data from these sources using simple markup. 

## Use Cases

The features here are meant to be very flexible, but here are a few common use cases we see often; 

* Populate form fields from querystring params ( see [demo](https://data-binding.webflow.io/query?code=ID6079\&name=Trial+User+1\&color=blue\&accept=true) )
* Populate form fields to include the current URL or path ( see [demo](https://data-binding.webflow.io/url) )
* Populate form fields from webStorage or cookies, as part of a referral tracking system ( see [demo](https://data-binding.webflow.io/webstorage) )
* Populate form fields with current user data, such as the user's email & name
* Perform "mad libs" style text replacements in rich text content, mixed from Collection List fields and other sources ( see [demo](https://data-binding.webflow.io/cms) ) 

{% hint style="info" %}
In combination, these can be used to move data easily through your site, and to pass information back to your server in hidden fields as users submit forms. 
{% endhint %}

## Getting Started  <a href="#getting-started-nocode" id="getting-started-nocode"></a>

### STEP 1 - Add the Library  <a href="#step-1---add-the-library" id="step-1---add-the-library"></a>

First, **add the library** as detailed in [Quick Start](/sa5-data/quick-start.md).&#x20;

### STEP 2 - Apply `wfu-bind` to Desired Elements <a href="#step-2---apply-wfu-query-param-to-desired-elements" id="step-2---apply-wfu-query-param-to-desired-elements"></a>

Where you place the element and the value you use depend entirely on the element you want to bind and the data source.&#x20;

{% hint style="success" %}
For example, if you want the `name` querystring value to automatically intialize a form input, you would add the `wfu-bind=?name` attribute to your form input element.
{% endhint %}

## Usage Notes&#x20;

See [Data Sources](/sa5-data/data-sources.md) to learn about the many possible data sources.&#x20;

See [Data Binding](/sa5-data/binding-data.md) to learn about;

* The data binding syntax and how to connect a data source to an element&#x20;
* The effect the attribute has on different element types. &#x20;

<br>