Custom User Fields

How to setup and access Webflow's Custom User Data fields from WFU

What are Custom Fields?

Webflow Memberships allows for custom fields as part of a User's account. These custom fields can be managed through;

• Through the Designer user manager

• Through the Webflow API

• During Sign Up, if you add those fields to the UI

• On the User Account /user-account screen, if you add those fields to the UI

We provide access to these fields both through Sygnal Attributes data-binding and directly through JavaScript. All fields are part of the Sa5User object, as a map under the data element.

Important Setup Notes

Very important things you need to know when setting this up...

Any Custom User Fields that you want to access MUST exist on your User Account page. To add them, you can simply add those fields to the page from the right-side configurator.

After adding these Custom User Fields and setting up WFU's User Info lib properly, your users MUST log out and then log back in again in order for the newly-accessible custom user field data to load. See the User object Lifecycle for details on how user data loads.

If you do not want your users to see these fields on the User Account screen, you can wrap them in a DIV and hide them using display: none on the style tab. Do not try to hide them using Webflow's new visibility hidden feature on the settings tab, as Webflow will not render the elements at all, and the data will not be accessible to WFU for loading.

How to Access Custom User Fields

The SA5 user object creates an array of custom fields under user.data.

Accessing via Data-Binding

You can use SA5's data-binding features with a custom attribute of wfu-bind and a value of $user.data.FIELD-NAME where the field name is your custom field name.

e.g. $user.data.birthdate

Accessing via Script

You can access your custom fields directly in script on the user object, e.g.;

<!-- Sygnal Attributes 5 | Memberships | User Info Changed Event -->
<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['userInfoChanged', 
  (user) => {
    // Check to verify the custom field data is loaded
    if(user.user_data_loaded.custom_fields) {
    
        // Do something with your data 
        console.log(user.data["full-name"]);

    	return;
    }
  }]); 
</script>

How Custom User Fields are Named

Custom fields are named using Webflow's generated internal field names for each. Typically this process is the same as slug-generation, e.g. a custom user field named Home Address would be slugged and internally named as home-address.

However, there are exceptions to this rule, described below. If you're not certain, it's best to view your /user-account page in browser devtools, and identify the field name that Webflow has assigned to your custom user fields.

The Webflow CMS and User data storage systems generate internal field names based on the generated slug, however there are situations where the slug and the internal field name will mismatch. For example, if you rename your slug field, Webflow will keep the original name as its internal field name.

What Custom Field Types are Supported by SA5?

As of Feb-2023, these are Webflow's current field types, and our current plans;

Field Type	Notes	Planned Support
Plain Text	max 256 chars	Yes.
Email		Yes.
Link		Yes.
Number	Can be defined with a min, max, and step	Yes. Delivered as a string, so that a blank value is identifiable as "" rather than 0.
Option	Pre-defined options that you choose	Yes. Delivered as the option value.
Switch	Boolean	Yes.
File	An uploaded file, such as a profile photo	Not in v3. Looking into how to retrieve the uploaded filename in the future.