Forms Auto-complete & Data-binding

Populate your form SELECTS and add INPUT autocomplete support directly from your Webflow CMS collections. You control the filtering and sorting of your own list content.‍
SEE A DEMONSTRATION

Enhances these Webflow elements.

Designed for Webflow. Build great stuff.

Overview
User Guide
Tech Notes
Demo

Introduction

Populate form lists and drop-downs from a Webflow CMS collection. You control the filtering and sorting of your own list content.

Databind your form controls to your Collection Lists

Webflow's collections are great, and so is its forms design capabilities - however at present they do not work together. As of Sept 2021, Webflow still doesn't allow you to connect a FORM SELECT element to a collection, which makes it difficult to do things like...

  • Build a simple ordering system, where customers select a CMS product from a list
  • Choose a department, product, or topic to route their enquiry to
  • Offer a customer feedback form, where customers can choose the employee they are commenting on

The web is dynamic, and we want our dynamic data to be part of our customer experience.

Now you can.

Library Features

  1. Allows you to bind any CMS Collection List to a Webflow SELECT form control.
  2. Allows you to filter and sort the Collection List to your needs, before binding.
  3. Supports the use of any Collection List field as the displayed text in the SELECT LIST.
  4. Supports the use of any Collection List field as the ID for the SELECT LIST item. Generally, we recommend using the slug since it is guaranteed to be unique.
  5. Works with all SELECT controls, including list boxes and drop-down lists.
  6. Allows the use static items like a "( select one )" item in your SELECT list.
  7. Supports as many Collection Lists, and Select controls, as you need, on the same page.
  8. Simple to use.

Design & Implementation Notes

  1. The data-binding feature makes use of the data-source feature, which digests a Webflow Collection List into an easily-processed JSON datasource.
  2. That JSON is available for use by your other scripts, if you have a need for it.
  3. You can append or prepend text to your displayed text and ID, as desired.


Access the open source repository on Github.

GITHUB REPO

Installation

Webflow does not allow you to upload script files into its hosting environment, therefore the easiest way to embed Sygnal Webflow Utils (SWU) is by using a Content Delivery Network (CDN).

Throughout this documentation, I'll use that approach and provide you with the URLs you need to include on your webpage as script references.

See installation notes for more advanced information on how to specify versioning, and where to place the files.

How to Use it

Here's how to implement this feature on your own Webflow site.

How to use it

Setup your Data Source

1) Create a CMS Collection

  • Create whatever kind of collection you like, which contains data that you want to appear in your Form SELECT
  • Make sure to choose a field which will be the displayed text in your SELECT list. You can just use the required Name field if you like.
  • Choose a field which will be the ID for each item in the list. It can be whatever you like, but this identifies to you what the user has selected in the list. It might be the Name, or a product ID, or the Slug of the item.

2) Create a CMS Collection List in the page where your Form exists

  • Add a Collection List element
  • Bind it to your CMS Collection
  • You can make the list content appear as part of your page content if you like, or you can hide the entire Collection List element if you'd like it to be invisible.

3) Add an HTML EMBED Element to your Collection List

  • Add an HTML EMBED Element inside of the Collection List Item
  • Paste in the following <SCRIPT>
<script type="application/json" data="blogposts">
{
"id": " YOUR ID HERE ",
"text": " YOUR TEXT HERE "
}
</script>
  • Set the ID and TEXT values as desired. For example;

Connect Your Form Select Element

4) Reference the Datasource on your SELECT Element

  • On the SCRIPT tag, set the DATA attribute to a datasource name of your choosing. Here I've chosen blogposts.
  • On the same page, click on your Form's SELECT element that you're wanting to data-bind.
  • Add a custom attribute ( under the gear icon ) to the SELECT element Name it data-source, and set the value to the name of your custom datasource, that you've used above, e.g. blogposts

5) Add Sygnal Webflow Data to your page, and invoke it

Open the configuration settings for you page and scroll down to the bottom, where custom code is added to the page. The name of this section is Before </body> tag.

Paste in the following script;

<script src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@2.1/dist/webflow-data.min.js"></script>
<script>

$(function() {

// Instantiate util
var webflowDataUtil = new WebflowDataUtil({
  logging: true, // enable logging to console
});

// Databind
webflowDataUtil.dataBindAll();

});
</script>

It will look like this-

  • Save and publish your site.

When you view your running website, the javascript will run, and you will see the data-binding in action.


Access the open source repository on Github.

GITHUB REPO

Technical Notes

Make sure to check out the Github repository if you're looking how to do fancier stuff.

This feature requires jQuery, which is already part of all Webflow-hosted sites.

How to use it

This library requires jQuery, which is already part of all Webflow-hosted sites.

Here's how to implement data-binding in your own Webflow site.

1) Create a CMS Collection

  • Create whatever kind of collection you like, which contains data that you want to appear in your Form SELECT
  • Make sure to choose a field which will be the displayed text in your SELECT list. You can just use the required Name field if you like.
  • Choose a field which will be the ID for each item in the list. It can be whatever you like, but this identifies to you what the user has selected in the list. It might be the Name, or a product ID, or the Slug of the item.

2) Create a CMS Collection List in the page where your Form exists

  • Add a Collection List element
  • Bind it to your CMS Collection
  • You can make the list content appear as part of your page content if you like, or you can hide the entire Collection List element if you'd like it to be invisible.

3) Add an HTML EMBED Element to your Collection List

  • Add an HTML EMBED Element inside of the Collection List Item
  • Paste in the following <SCRIPT>
<script type="application/json" data="blogposts">
{
"id": " YOUR ID HERE ",
"text": " YOUR TEXT HERE "
}
</script>
  • Set the ID and TEXT values as desired. For example;

4) Reference the Datasource on your SELECT Element

  • On the SCRIPT tag, set the DATA attribute to a datasource name of your choosing. Here I've chosen blogposts.
  • On the same page, click on your Form's SELECT element that you're wanting to data-bind.
  • Add a custom attribute ( under the gear icon ) to the SELECT element Name it data-source, and set the value to the name of your custom datasource, that you've used above, e.g. blogposts

5) Add Sygnal Webflow Data to your page, and invoke it

Open the configuration settings for you page and scroll down to the bottom, where custom code is added to the page. The name of this section is Before </body> tag.

Paste in the following script;

<script src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@2.1/dist/webflow-data.min.js"></script>
<script>

$(function() {

// Instantiate util
var webflowDataUtil = new WebflowDataUtil({
  logging: true, // enable logging to console
});

// Databind
webflowDataUtil.dataBindAll();

});
</script>

It will look like this-

  • Save and publish your site.

When you view your running website, the javascript will run, and you will see the data-binding in action.


Limitations

None known.

Future Plans

Access the open source repository on Github.

GITHUB REPO

Demonstration