Fill out the following form with random data (don’t submit it) and tell me if you notice anything unusual:

[optin_box style=”22″ alignment=”center” action=”” method=”post” email_field=”email” email_default=”Enter your email address” email_order=”2″ integration_type=”custom” double_optin=”Y” name_field=”first_name” name_order=”1″ name_required=”N” name_default=”Enter your first name” extra_field_1_name=”password” extra_field_1_title=”Password” extra_field_1_order=”3″ extra_field_1_required=”Y”][optin_box_hidden][/optin_box_hidden][optin_box_code]

[/optin_box_code][optin_box_field name=”headline”]Enter Your Name And Email Below[/optin_box_field][optin_box_field name=”paragraph”]PHA+TG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2NpbmcgZWxp dC4gRG9uZWMgdmVsIG51bmMgbm9uIGxhY3VzIHZlbmVuYXRpcyBjb21tb2RvLjwvcD4K[/optin_box_field][optin_box_field name=”privacy”]We value your privacy and would never spam you[/optin_box_field][optin_box_field name=”top_color”]undefined[/optin_box_field][optin_box_button type=”0″ button_below=”Y”]Get Instant Access![/optin_box_button] [/optin_box]

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.

[bullet_block large_icon=”39.png” width=”” alignment=”center”]
  • 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.
[/bullet_block] [bullet_block large_icon=”40.png” width=”” alignment=”center”]
  • Publish the page and visit it.
[/bullet_block] [bullet_block large_icon=”41.png” width=”” alignment=”center”]
  • In Chrome, right click “view page source”

view page source2 - How To Hide The Password Field In An OptimizePress Opt-In Box Element

[bullet_block large_icon=”42.png” width=”” alignment=”center”]
  • Search for ‘form action‘. You’re going to find a snippet of code that looks something like this:

form code - How To Hide The Password Field In An OptimizePress Opt-In Box Element

And here it is again in text:

[feature_box style=”23″ only_advanced=”There%20are%20no%20title%20options%20for%20the%20choosen%20style” alignment=”center”]

<div id=”540435032899b” class=”optin-box optin-box-22″ style=”margin-right: auto;margin-left: auto;”>
<div class=”optin-box-content”>
<form action=”” 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=”” /><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=”” /><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=”” alt=”privacy” width=”16″ height=”15″ /> We value your privacy and would never spam you</p> </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.

[bullet_block large_icon=”43.png” width=”” alignment=”center”]
  • Copy the entire snippet to your clipboard.
[/bullet_block] [bullet_block large_icon=”44.png” width=”” alignment=”center”]
  • Come back to your page editor and add a new ‘Custom HTML/Shortcode’ element where you want your form to appear.
[/bullet_block] [bullet_block large_icon=”45.png” width=”” alignment=”center”]
  • Paste the snippet from your clipboard into the field.
[/bullet_block] [bullet_block large_icon=”46.png” width=”” alignment=”center”]
  • 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!

privacy - How To Hide The Password Field In An OptimizePress Opt-In Box Element 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.