Memberships - Disable Form Fields on User Account Page

Design help Custom code
1

Hello! :v:

Currently designing a website for a large flying association utilising Webflow’s membership system.

On the User Account page, I’m trying to disable specific fields in a form from being edited by the user.

Essentially I’m trying to make it so the user can update their Personal Details fields and save them but they can’t edit the Membership Details fields, which basically share relevant information about the paid membership they are on so only want those fields to be changed from the client/backend side of things.

I’m aware this will probably need custom code as I don’t believe it’s a native functionality within Webflow.

Any recommendations?

Screenshot 2023-05-25 21.51.16
Screenshot 2023-05-25 21.51.161919×934 56.2 KB

Here is my site Read-Only: Webflow - RAANZ Website

2

The easiest way to do that is likely to apply the readonly attribute to those custom user data fields.

While you can manually set custom attributes on these inputs, readonly is unfortunately reserved so you’ll need to apply it using script.

If you’re wanting to lock all of the fields under Membership Details, I’d probably;

  1. add an ID to the User Account Grid element, of membership-details
  2. add this script in the /body custom code area of the page
<script>
window.onload = function() {
  var inputs = document.querySelectorAll('#membership-details input');
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].setAttribute('readonly', true);
  }
};
</script>

I swear every question I answered today from NZ devs.
We should start a monthly coffee chat in the Auckland CBD.

1 Like
3

You’re an absolute king Michael! :heart_hands:

Haha, great minds think alike, NZ Webflow group definitely needs to happen!