Skip to main content

Starts at 0:05, after the intro.

Lesson 3 of 5 · 6:10 · Intermediate · Webflow

Save form submissions to Data Tables

Store a single value, a group of fields or a growing list from any Webflow form.

Where this fits

Member JSON works for small, personal bits of data. Data Tables are the step up, and you can fill them from plain Webflow forms, the same three ways you saved to member JSON: single, array and group.

By the end of this lesson you can

  • Create a new record from a basic form, like a note
  • Add entries to an array field on a member’s record
  • Save a group of fields, like a profile, to one record
  • Use a member reference and table rules so members only see their own records

Lesson notes

How it works

Why use Data Tables instead of member JSON

Member JSON is one object per member. Data Tables are a real database inside Memberstack: a table is a collection like notes, a record is one row and a field is a column. You set who can create, read, update and delete records per table, and updates change only the fields you send, so there's no risk of wiping a member's other data.

When a logged-in member creates a record, Memberstack records who created it automatically. Add a member reference field as well, so each record points to its owner and your rules and queries can use it.

How MemberScript #198 writes form data to a table

The script listens for forms with data-ms-code="form1". The form names the table with data-ms-code-table and the save mode with data-ms-code-table-type. Each input says which table field it fills with data-ms-code-table-name, using the field key from the dashboard.

In basic mode, every submission creates a new record, like a new note. In group mode, all the inputs go into one new record, like a profile with first name, last name and email. In array mode, the script first looks for the member's existing record in that table. If there is one, it appends the new entry to the field named in data-ms-code-array-field; if not, it creates the record. The script links records to the member through a field keyed member by default, which you can change with data-ms-code-member-field.

Set up the tables and forms

  1. In the dashboard, open Data Tables in the left navigation and create a table, for example notes.
  2. Add a required member reference field so you know who created each record, then add the fields your form fills, like note.
  3. Set the rules: any member can create records, and only the member who owns a record can read, update and delete it.
  4. Paste MemberScript #198 into the page or site body code.
  5. On the Webflow form add data-ms-code="form1", data-ms-code-table="notes" and data-ms-code-table-type="basic" (or group, or array plus data-ms-code-array-field).
  6. On each input add data-ms-code-table-name set to the field key, publish and submit as a test member.

Before you move on

0 of 5

Tick these off on your own site. Done with all of them? You’re ready for the next lesson.

Up next: Next, you’ll use a Data Table to power a saved items list for your CMS content.

Chapters

Common questions

Can I save a Webflow form straight into Memberstack Data Tables?

Yes. With MemberScript #198 you add data attributes to a normal Webflow form, and each submission creates or updates a record in the table you name.

How do I stop members seeing each other's records?

Set the table's read, update and delete rules so only the member who owns a record can access it. Memberstack applies those rules on the server for every request.

Are there limits on how fast records can be created?

Yes. Data Tables allow 10 record creates per minute per IP address and 30 updates or deletes per minute per IP, which normal form use won't hit.

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    Hey, Mahn at members here and welcome to members script 198. In this video, I’m going to show you how to allow members to add certain information into members tax data tables. For example, if you wanted to allow a user to save a note. So, like this. And then you would save it. And that would create a new record inside of members text data table. If you wanted to allow members to save a list on or an array of items, you simply add it over here.

  2. 0:32

    And if a user has a record inside of the members text data tables, it will update that record inside of an array. Again, if you wanted to allow members to save items with particular properties, you would use this form and users can update certain information like this. Okay, let me show you how to set all of this up inside of Webflow and Memberstack. So, inside of Webflow, you are going to need to add members script 198. And it should look like this.

  3. 1:09

    Like this. If you’re watching this on YouTube, the link to that code should be in the description below. And if you’re watching this on the members site, then you should have already seen the code. You can either add this sitewide on a particular page depending on your specific use case. So on the page itself, you are going to add the following attributes in order to make this work. Say you just wanted to allow users to save or or to create a new record inside of a particular table. You would use the basic form in you would drag in a form block and then you would have the attributes added

  4. 1:41

    to the form itself. So the attributes for this would be data MS code form one and then data MS code table which is set to notes in my case because I’m updating the notes table. If yours is recipes or tasks, you would update that over here. And then the last attribute is data MS code table type which is going to be set to basic. for the input field within that table, you are simply going to add the following attribute which is going to be data MS code table name and that’s going to be set to note because I’m

  5. 2:14

    updating the note um the notes field inside of member stacks data table. Okay, so the next table say you wanted to allow users to create a record that is also an array. You would simply add this form and the attributes for this form would be data MS code form one and then data MS code table type would be set to an array and then data MS code table is items because this is the table that I’m updating inside of Memberstack and then data MS code array field which

  6. 2:46

    would be the field that is going to be housing the array is going to be first name and within that form for the input field you are going to add the attribute of data MS code table name which is going to be set to first name and that is a key that you get inside of members deck. The last form that we have is to save an item inside of member text data tables but with properties. For the form itself, you’re going to add the following attributes of data MS code form one and then data MS code table

  7. 3:19

    type is going to be a group and then data MS code table. the FDS code table is going to be user profile and that is the table that I’m updating inside of Memberstack and then for the fields it’s going to be the same. So for the first name field or whatever your field is going to be it’ll be data ms code table name and that is going to be the key that you get inside of mete. So mine is first name and then this one is last name and the last one is set to email. All right. So let me show you how to set

  8. 3:52

    all of these tables up inside of Memberstack. In Memberstack you are going to use one of these tables. So firstly for the first form to save a simple item. I have the nodes table over here with rules. Any member can create an item but only the member of that item can read, update and delete the item. Okay. And then within the table I have the following fields which is member reference and that is required because we need to know exactly who submitted um or created that

  9. 4:24

    record. And then the field over here of notes which has the field key and that is what you’d be copying over to the input field inside of weblow over here. Okay. So the next table is to save an item as an array. So the table for that would be over here which has the same rules. So any member can create an item but only the member that owns that item can read, update and delete their their own

  10. 4:54

    records. Within that table I have the following fields of member reference. Again we need to know who created that record and then first name. for the first name. As you can see, when a record is created and submitted, we have an array within the first name over here. If a user does not have a record inside of this table, the record will be created and then if they input information again, it will just update that record. Okay. So the last um form we have over

  11. 5:26

    here is to save an item with properties and that would be the next table over here which has the same rules. So any member can create an item but only the member that owns that record can update, delete and read their own records. Within the table we have the following fields. member reference need to know who created the record. And then we have first name, last name, and email. All of these keys, field keys are what you add to the input fields over here.

  12. 6:01

    Over here. Okay. And that is it. If you have any questions on this, feel free to reach out in the Slack 2.0 channel. Bye.

This is v1 of Memberstack University, built from the tutorials we’ve put so much work into over the years. We’d like to make a more organized series.