Change Field Display Names on App Login Form

API & Custom Code Ask Developers
1

This might be a weird request, but is there any way (maybe with JavaScript) to change the word “Email” on an app’s login form to “Username” or something else? I am not looking to change the field itself, just the word that appears on the screen. Thanks.

2

Hi Jason,

Hands up :raised_hand_with_fingers_splayed::raised_hand_with_fingers_splayed:…I’m not a coder so don’t have an answer. However, my best work around would be to add the text and hide the Email label. It’s not elegant so hopefully a CSS coder can assist. I’ve reached out to a college to see if I can get a better answer for you.

image
image892×974 52.4 KB

1 Like
3

Hey Jason!

Here’s some JS to accomplish that:

// Change Email label on login forms
$(document).on('knack-view-render.login', (_event, view) => {
  const emailLabel = document.querySelector(`#${view.key} label[for="email"]`);
  if (emailLabel) {
    emailLabel.textContent = 'Username';
  }
});

Whenever a login view loads, this will:

  • Find the Email Address element within the login view.
  • Then, if it exists, set the text of the element to ‘Username’.

You can change ‘Username’ to whatever you wish! :slight_smile:

2 Likes
4

Cheers @hmnd - I knew there would be a proper answer to this question :blush:

1 Like
5

@hmnd, that’s perfect. Thank you very much.

1 Like