Hiding and customising address fields in the Self Service Center

You can hide or customise address fields in the Self Service Center with some custom JavaScript in your settings. Most commonly this is used for customising the address fields to your needs.

For example, some of our users want to only have a single address line, without separate house number. So you want to remove the house number field so that your customers don't fill it out.

The only prerequisite is that your project is running on a custom domain.

To customise something in the Self Service Center, you can add custom code to Settings > Self Service Center > Custom code section.

The following example code does two things:

1. It hides the house number field.
2. It sets the address field to be limited to 35 characters.

Sample code

Put the following code in the Header field under Settings > Self Service Center > Custom code.

<script>
  const targetNode = document.documentElement || document.body;
  const config = { attributes: false, childList: true, subtree: true };

  const callback = function(mutationsList, observer) {
    // You can customise inside this callback function.
    const subscription_house_number = document.getElementById("subscription_house_number")
    if (subscription_house_number) {
      subscription_house_number.closest('div').remove()
    }
    
    const subscription_address = document.getElementById("subscription_address")
    if (subscription_address) {
      address.setAttribute("maxlength", "35");
    }
  };

  const observer = new MutationObserver(callback);
  observer.observe(targetNode, config);
</script>