Customizing PrefPass for your site
Customizing the way PrefPass works to match the needs of your particular site is easy if you’re familiar with how HTML and Javascript work.
Let’s consider for example the registration form, where customization can be important. The default behavior of PrefPass is to display an ID selection window when the user clicks on the submit button. This behavior is designed to make registration as streamlined as possible for users who are ready and eager to sign up without a password.
What if you want to present an explicit choice to users before they hit the submit button? This makes the form bigger, but may be more reassuring for some users. Here’s the important functions to consider:
prefpassHidePasswordOptions(): This function hides the password field(s) and sets the submit button to trigger the ID selection window.
prefpassDisplayPasswordOptions(): This function shows the password field(s) and sets the submit button to work normally.
So for example, if you’d like to display a radio button choice to users, you could set up your registration form something like this:
<form id="prefpassFormSubmissionReg" method="post" action="register.php">
E-mail: <input name="user_email" size="20" type="text" />
<!-- add explicit choice to use PrefPass -->
<input name="prefpass_reg_choose" value="no" onclick="prefpassHidePasswordOptions();" checked="checked" type="radio" />Use one of these IDs: <img src="prefpass-icons.gif" />
<input name="prefpass_reg_choose" value="yes" onclick="prefpassDisplayPasswordOptions();" type="radio" />Choose a password
<span id="prefpass-enabled-password-field-1">
Password: <input name="user_pass" size="20" type="password" />
</span>
<script>prefpassHidePasswordOptions();</script>
<input value="Register" onclick="prefpassSSORouterReg(this.form.user_email.value);return false;" type="submit" />
</form>
You can see this approach in action with the PrefPass WordPress plugin at the test blog we set up with the “explicit choice” registration option enabled. Check out the customized registration page here.