javascripthtmlcssformsformstack

Force an input type 'text' field to behave like an input type 'password' field on a formstack form

screenshot of the form with dev tools openA user account creation form built in formstack by a client is having an issue with the password form field. Currently, the placeholder text shows up properly before the user starts typing. But after the user starts typing, the typed password is visible and the ask is to hide the characters that the user is typing in order to protect the user's privacy. Basically, have the password field behave like a password field...

Solution

  • I figured out the problem. For whatever reason, the client used a input['type=text'] instead of using input['type=password'] for the password field. But upon further investigation, it makes sense because it appears that formstack does not provide password fields in the form builder... what a bummer! So I found a workaround, since the form does allow you to add custom CSS and Javascript. And each input field has its own id so what I added into the form'd "embed code" section was using CSS to make the styling for input['type=password] match the styling of input['type=text'] and then with Javascript, I'm calling the password field by id and changing the type to "password" instead of "text."

    <style type="text/css">
  input[type=password] {
    border: 1px solid #cfd4d8;
    background-color: #fff;
    height: 42px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 7px;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 14px;
    color: #595d64;
    width: 100%;
    max-width: 100%;
  }
</style>
<script type="text/javascript">
  document.getElementById('password_field_id').type = 'password';
</script>