Which fields should be pre-filled with previously input information when there are form errors?

Question

I've got a form with the following inputs:

• First name
• Last name
• Email
• New Password
• ReCaptcha
• Terms (checkbox)

I'm thinking about pre-filling the following for sure with the same values that were previously input by the user: First name, Last name, Email, Terms (checkbox).

But should I also do that for the New Password and Re-enter email fields?

If a user tries to sign up with an email that already exists in the database, it will return a form error. Should I then have the Email still pre-filled?

I think it will be safe for the New Password field not to be pre-filled to make sure the user remembers their last input password by having to fill it in again.

Answer 1

I'm thinking about pre-filling the following for sure with the same values that were previously input by the user: First name, Last name, Email, Terms (checkbox).

I think you are right to do that.

But should I also do that for the New Password and Re-enter email fields?

In the case of an error with the e-mail, I think that you should pre-fill it anyway so that the user won't have to fill it again, most of the time, it's just a little error that can be corrected easily, more easily than actually re-typing the entire e-mail two times.

For the password, in my opinion, it depends on the restrictions you putted, but if you just want a password with a certain (relatively small) number of any type of characters, then I think that your users should still remember their passwords...
You also need to take in account that the fact to have to re-fill a form is really bad for the UX so you should try to keep the number of fields to re-fill as small as possible.

Answer 2

Re-entering data is always a pain for the user, so avoid forcing them to do so where possible. If you have 2 password fields (a 2nd for confirmation), you could reduce the pain by just blanking the 2nd confirmation field so they only have to retype it once.

If it was data in a field which caused the error, it is nice to have the cursor on that field so the user is ready to go. If you know every character in the field is wrong you may also want to preselect the entire text so the user can start typing to delete the existing entry.

Answer 3

I would have all fields pre-filled except the ReCaptcha

If the user enters an email that is already in use I might redirect to a log-in page with the email pre-filled. (with an option to go back and have the form still be pre-filled) This is of course assuming e-mail is the username to log in. Otherwise there could be an option for sending a username reminder.

For password security, the field can be filled with a placeholder while the real password is remembered on the server side.*

Of course it might be even nicer to do validation with HTML5 so things like invalid email addresses are caught before the server is even involved. Additionally, if JS will be required for your site, I would even consider just using AJAX for the form submission rather than force a page reload on errors.

*The backend of using a placeholder could be a bit tricky, so here is my recommendation.

1. Remember the password serverside (most likely in a session variable)
2. Make the placeholder out of tab characters (normally untypeable, yet submit correctly)
3. Upon submission, check for modifications to the placeholder
   • If the new password contains no tabs, use it
   • If it is the original placeholder, use the saved password (of course check that it exists as a session variable)
   • If it's a mix, error and clear the password in the form