Usage Notes

Creatively merge data into your Webflow sites

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 )

• Populate form fields to include the current URL or path ( see demo )

• Populate form fields from webStorage or cookies, as part of a referral tracking system ( see demo )

• 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 )

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.

Getting Started

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply wfu-bind to Desired Elements

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

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.

Usage Notes

See Data Sources to learn about the many possible data sources.

See Data Binding to learn about;

• The data binding syntax and how to connect a data source to an element

• The effect the attribute has on different element types.