Skip to main content

Starts at 0:05, after the intro.

Lesson 1 of 5 · 1:39 · Intermediate · Webflow

Show elements based on a custom field

Show or hide an element depending on what’s in a member’s custom field.

Where this journey starts

Your site is live and your logins are solid. This journey is about member data, starting with using a member’s custom field to decide what appears on the page.

By the end of this lesson you can

  • Hide an element when a member’s custom field is blank
  • Add the ms-code-customfield attribute with the field’s ID
  • Test it by clearing and filling the field in a profile form

Heads up: Older 2023 video. You paste MemberScript #10 into your body code, and it doesn’t need editing.

Lesson notes

How it works

How Memberstack hides an element when a custom field is blank

Every member has custom fields, like a name, a company or a bio. You create them in the dashboard and members fill them in through Memberstack forms. MemberScript #10 uses those values to decide whether an element stays on the page.

When the page loads, the script reads the logged-in member's data that Memberstack keeps in the browser. It then finds every element with the ms-code-customfield attribute and looks up the field named in that attribute. If the field is empty or missing, the script removes the element from the page. If the field has a value, the element stays.

You can flip the logic by putting ! in front of the field ID, for example ms-code-customfield="!name". Now the element is removed when the field is filled in. That is handy for a "Finish your profile" prompt that should disappear once the member has done it.

Set it up in Webflow

The script needs no edits. All the setup is one attribute per element.

  1. In the dashboard, go to Members and click the Custom Fields button in the top right. Create the field if it doesn't exist yet.
  2. Click the pencil icon next to the field to see its ID. The attribute must use this ID, not the label.
  3. Paste MemberScript #10 into your page's body code (or site-wide if you use it on many pages).
  4. Select the element you want to control and add the attribute ms-code-customfield with the field ID as the value, for example ms-code-customfield="name".
  5. Publish, log in as a test member, then clear and fill the field with a profile form (data-ms-form="profile" with an input like data-ms-member="name") and refresh each time.

Use it for display, not for protection

Custom fields live on the member and can be changed from the browser. Memberstack's docs are clear that you should never gate content with custom fields or member JSON, because a member could work around it. Use this script to tidy up what a member sees, like hiding an empty "Website" link or a profile badge. To lock content, use plans and gated content.

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 let members save their own information to their member JSON with a form.

Common questions

How do I hide an element in Webflow when a Memberstack custom field is empty?

Add MemberScript #10 to the page and put ms-code-customfield="your-field-id" on the element. The script removes the element on page load when that member's field is blank.

Can I show an element only when the field is empty instead?

Yes. Put ! before the field ID, like ms-code-customfield="!name". The element is then removed when the field has a value.

Is this a secure way to restrict content?

No. Custom fields can be changed from the browser, so Memberstack recommends gating content with plans and gated content instead.

Keep going

Checked against the Memberstack docs

TranscriptAuto-generated captions
  1. 0:00

    Hey everyone Julian here and welcome to MemberScripts number 10 so this one is super easy to implement but definitely is a commonly requested one and that is hiding elements if a certain custom field is not filled out so I’m going to show you how to do that right now but first I’m going to show you how that looks so here we have a simple Memberstack um profile form and as you can see the name is blank and there’s just an empty box here so let’s go ahead and update

  2. 0:30

    this quick profile’s been updated great now let’s refresh and as we can see here it does load so now again I’m going to go ahead and make this field blank and I’m going to refresh and as you can see nothing so how do we make that happen first things first you are going to need a MemberScript number 10 which is right here actually a pretty short one so just copy and paste this into your body and you’re good to go on that front and then all you need to do is the following of course you need your

  3. 1:01

    custom field and here we have a profile form that is updating this um this is just for testing purposes you don’t need this at all this MemberScript is affecting the following this here I have this ms-code custom field equals name this is directly matching the field that I have within Memberstack so this is it if you have that then everything should be hidden and yeah that’s about it so if you have any

  4. 1:33

    questions just let me know Julian Memberstack.com or in the 2.0 slack and I will hear from you soon enjoy

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.