Fill out the following form with random data (don’t submit it) and tell me if you notice anything unusual:
You may have noticed that when you type in a password the characters display on your screen. That’s because the OptimizePress opt-in element overrides any input with the type ‘password’ and changes it to input type=’text’.
By default, any input with the type ‘password’ always forces your browser to hide the characters as you type them. But since the OptimizePress opt-in element overrides this, we have to use a workaround solution to hide passwords.
- Create the opt-in box element as you normally would. In this case you’d be pasting a form code and adding an additional ‘password’ field.
- Publish the page and visit it.
- In Chrome, right click “view page source”
- Search for ‘form action‘. You’re going to find a snippet of code that looks something like this:
And here it is again in text:
<div id=”540435032899b” class=”optin-box optin-box-22″ style=”margin-right: auto;margin-left: auto;”>
<div class=”optin-box-content”>
<form action=”http://www.vicdorfman.com/wp-content/plugins/membermouse/api/webform.php” method=”post” class=”cf op-optin-validation”><div style=”display:none”><input name=”submit” type=”hidden” value=”Sign Up” /><input name=”membership_level” type=”hidden” value=”1″ /><input name=”redirect_url” type=”hidden” value=”http://www.vicdorfman.com/wp-content/plugins/membermouse/api/webform.php” /><input name=”email_field” type=”hidden” value=”email” /><input name=”op_optin_nonce” type=”hidden” value=”c15906a0d0″ /><input name=”_wp_http_referer” type=”hidden” value=”/signup/” /><input type=”hidden” name=”redirect_url” value=”http://www.vicdorfman.com/wp-content/plugins/membermouse/api/webform.php” /><input type=”hidden” name=”email_field” value=”email” /></div> <div class=”text-boxes”>
<div class=”text-box name”><input type=”text” name=”first_name” placeholder=”Enter your first name” value=”” /></div><div class=”text-box email”><input type=”email” required=”required” name=”email” placeholder=”Enter your email address” value=”” /></div><div class=”text-box”><input type=”text” required=”required” name=”password” placeholder=”Password” value=”” /></div> </div>
<input type=”hidden” id=”op_optin_nonce” name=”op_optin_nonce” value=”31bffc4227″ /><input type=”hidden” name=”_wp_http_referer” value=”/?p=1967″ /> <button type=”submit” class=”default-button”><span>Get Instant Access!</span></button> </form>
<p class=”privacy”><img src=”https://memberfix.rocks/wp-content/uploads/2020/06/privacy.png” alt=”privacy” width=”16″ height=”15″ /> We value your privacy and would never spam you</p> </div>
</div>
In the code above I’m using the attractive-looking OptimizePress optin box element to present the signup form for a free membership level using the MemberMouse plugin.
See the part I bolded? That’s the password field. Notice how it’s being rendered as a ‘text’ input rather than as a ‘password’ input. This is what we’re going to change.
- Copy the entire snippet to your clipboard.
- Come back to your page editor and add a new ‘Custom HTML/Shortcode’ element where you want your form to appear.
- Paste the snippet from your clipboard into the field.
- Find the piece of code that says text” required=”required” name=”password” placeholder=”Password” value=”” /> and change it to password” required=”required” name=”password” placeholder=”Password” value=”” />
The only part you have to change is the part in red. You’ll wind up with the same exact form that you had originally created. But now the characters in the password field will be hidden as you type them. Go ahead, try it out!
We value your privacy and would never spam you
My testing has shown that this method doesn’t work for every single opt-in box style. So your mileage may vary.
