#10 - Display/Remove Element based on Custom Field v0.2

Check if a member has filled out a custom field. If yes, set the target element to display.

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo


<!-- 💙 MEMBERSCRIPT #10 v0.2 💙 HIDE ELEMENTS IF CUSTOM FIELD IS BLANK -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Get the `_ms-mem` object from the local storage
  const msMem = JSON.parse(localStorage.getItem('_ms-mem'));

  // Get all the elements that have the `ms-code-customfield` attribute
  const elements = document.querySelectorAll('[ms-code-customfield]');

  // Iterate over each element
  elements.forEach(element => {
    // Get the value of the `ms-code-customfield` attribute
    const customField = element.getAttribute('ms-code-customfield');

    // If customField starts with '!', we invert the logic
    if (customField.startsWith('!')) {
      const actualCustomField = customField.slice(1); // remove the '!' from the start

      // If the custom field is empty, remove the element from the DOM
      if (msMem.customFields && msMem.customFields[actualCustomField]) {
        element.parentNode.removeChild(element);
      }
    } else {
      // Check if the user has the corresponding custom field in Memberstack
      if (!msMem.customFields || !msMem.customFields[customField]) {
        // If the custom field is empty, remove the element from the DOM
        element.parentNode.removeChild(element);
      }
    }
  });
});
</script>

Description

Attribute

Content | Show if Custom Field is Set

Visible if a specific custom field is set.

ms-code-customfield

Your_Field_ID

Content | Visible if Custom Field is Empty

Visible if a specific custom field is EMPTY.

ms-code-customfield

!Your_Field_ID

v0.1 - DISPLAY element IF Custom field is SET

Check if a member has filled out a custom field. If yes, set the target element to display.

v0.2 - HIDE element IF custom field is SET

You can also hide an element once a custom field is set. Just place a "!" before the Custom Field ID in your attribute.

You could use this to hide a "complete your profile" form to once someone has finished setting up their account.

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

Download File

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

How to Make Members Complete their Profile

Memberscripts needed

#10 - Display/Remove Element based on Custom Field - How to make members complete their profile

Tutorials

https://www.loom.com/share/6a0d609ba7c8431cb9a964634ac0ed86?sid=a27367c5-4d6b-4851-8338-66ed9e10e010

Attributes used

data-ms-member=””
ms-code-customfield=””

Cloneable

https://webflow.com/made-in-webflow/website/hide-elements-if-custom-field-blank

Why/When to use the Make Members Complete their Profile Featyre?

Increase a profile’s trust and credibility on sites where interactions between users are part of the experience.
Provide a better experience when there’s an algorithm that tailors users’ experiences based on the personal information they submit.
Improve profiles’ visibility.

Examples of sites/apps where a complete profile is essential for the best experience: job finding sites, freelancing sites, dating sites and other social networking platforms, health apps, content streaming sites, etc.

Sometimes, a user completing their profile is key to them having the best experience on your site.

For example, if you’ve got a social networking platform, not only would completing their profile make for a more trustworthy presence on the site, but it may also provide them with better suggestions for new people they could connect with.

Another example would be a content streaming website, where if they don’t fill out information about the content they like, the algorithm won’t know what to recommend them.

How to get people to complete their profiles

In order to entice people to complete their profiles with the requested information, you need to tell them what exactly it is they’re missing out on.

If there are certain functionalities that are central to the experience you want to provide, you might want to make them unavailable until users add the needed data and inform them of this.

One way to do that would be to simply hide elements of a page until certain fields are filled out and with MemberScript #10 - Display/Remove Element based on Custom Field, that’s exactly what you can do.

How to add or remove an element based on a custom field

Click the link above to get the code needed for the functionality we’re adding and also watch a tutorial video on how it works.

Creating each element

For starters, you can either use our cloneable below to get you started or just build out your custom elements from scratch.

You’ll need the field itself and the element whose visibility is tied to it.

After you’ve created the field, you’ll need to add the data-ms-member=”” attribute to it.

Then comes the disappearing element which needs to use the ms-code-customfield=”” attribute.

Remember to use the same value in each attribute in order to tie the element to the field.

Making it work

Now that you’ve built everything, getting it to work is simple: all you need to do is copy the custom code from MemberScript #10 to your page, before the closing body tag.

And that’s pretty much all there is to it, this is a rather simple one. You can have multiple fields tied to multiple elements and even multiple elements tied to a single field. Just be careful not to get the attribute values mixed up.

Conclusion

Sometimes in order to provide members with the best experience and the full range of functionalities, they need to fill out certain information. Thankfully, thanks to MemberScripts, it’s pretty easy to get them to do so and you should now have the tools you need to convince your users to complete their profiles.

Check-out our free cloneable you can use right away!

Screens screenshot of a computerDescription automatically generated

Take me to the Script

#10 - Display/Remove Element based on Custom Field - How to make members complete their profile

Read full documentation

Button Text

Something not working as expected?