A member tries to log in to renew online, gets the password wrong twice, and gives up and calls the membership office. Half the time the problem is a typo they couldn’t see: caps lock, a doubled letter, an autocorrected character on a phone. A small “show password” eye icon next to the field fixes most of these, and members expect one because nearly every other site has it.
Whether you can add one to your Altru web forms depends on what your forms let you customize. This guide covers what to check, a lightweight script you can try, and the cases where it’s better to get rid of the password step altogether.
Start by checking what you already have
Before writing any code, confirm the current behavior on the devices your members actually use:
- The login and account-creation forms on your Altru site. Open them on desktop and on a phone. Look for any built-in reveal control. We’re not aware of a configuration setting in Altru that turns one on, but if you’re unsure, ask Blackbaud support whether your version offers it before building a workaround.
- The browser itself. Microsoft Edge adds its own reveal icon to password fields, and phone keyboards often show the last typed character briefly. Chrome, Safari, and Firefox on desktop generally don’t. So some members already have a toggle and some don’t, which is why complaints can seem inconsistent.
- Password managers. Members who use one rarely hit this problem. The people who do are usually typing from memory on a phone, which is exactly the case a toggle helps.
Adding a toggle with a small script
If your Altru web pages let you add custom HTML or JavaScript (for example, through a formatted text area or a site-wide header or footer), you can add the toggle yourself. Confirm that scripts are allowed and actually run on your pages; test in a sandbox or on an unpublished page first, because what’s permitted can vary and Blackbaud may change it.
The approach is simple: find every password input on the page and put a button after it that switches the field between type="password" and type="text". Here’s a minimal version that doesn’t depend on any Altru-specific IDs:
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('input[type="password"]').forEach(function (field) {
var btn = document.createElement('button');
btn.type = 'button';
btn.textContent = 'Show';
btn.setAttribute('aria-pressed', 'false');
btn.setAttribute('aria-label', 'Show password');
btn.addEventListener('click', function () {
var hidden = field.type === 'password';
field.type = hidden ? 'text' : 'password';
btn.textContent = hidden ? 'Hide' : 'Show';
btn.setAttribute('aria-pressed', hidden ? 'true' : 'false');
btn.setAttribute('aria-label', hidden ? 'Hide password' : 'Show password');
});
field.insertAdjacentElement('afterend', btn);
});
});Details that matter
type="button"is required. Without it, the button acts as a submit button and clicking it posts the form.- Use a text label, not just an icon. “Show” and “Hide” are clear to everyone, work with screen readers, and don’t need an image file. Style it to match your site with your existing stylesheet.
- Forms that load late. If the login form appears after the page loads (inside a step-by-step flow or a popup), the script above won’t find it. You’d need to run it again when the form appears, which is more fragile. Test every place a password field shows up: login, create account, reset password, and checkout.
- Don’t change the field’s name or ID. The script only flips the type. Altru still receives the same value it always did.
- Re-test after Altru updates. Because the script relies on the page’s markup, a platform update could move or restyle the field. Put a quick login check on your post-update checklist.
Is it safe to show the password?
Yes, when the member chooses to. The password is only displayed on their own screen and is still sent the same way when they submit. The risk is someone looking over a shoulder, which is why the field should start hidden and only reveal on a click. Avoid any version that logs, copies, or stores what’s typed.
When to skip the password instead
A toggle reduces typos, but it doesn’t help members who have forgotten the password entirely, or who never knew they had an account. Look at where people are actually getting stuck:
- If the struggle is on the reset step, check that your reset emails are arriving and aren’t landing in spam.
- If many members have duplicate accounts under different emails, logins fail because they’re trying the wrong one. Cleaning up duplicate constituent records helps more than any field-level fix.
- If the login only exists to get people to a purchase or renewal, ask whether that transaction needs a login at all.
That last point is where we come in. Social Good Checkouts replaces Altru webforms for tickets, memberships, and donations with a branded, mobile-friendly checkout that supports Apple Pay and Google Pay and writes the data back to Altru. For organizations whose password complaints mostly come from people trying to buy something, changing the checkout is often a bigger fix than adding a toggle to the old form.
Quick answers
Will the script break if Altru doesn’t allow JavaScript on my pages?
It simply won’t run, and the form works as before. Check with Blackbaud support if you’re not sure what your site permits.
Do I need a separate toggle for the “confirm password” field?
The script adds one to every password input it finds, so each field gets its own button.
