mermberfix logo x
The MemberFix Team’s got you covered.
Membership plugins

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

how to hide the password field in an optimizepress opt in box element

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

Enter Your Name And Email BelowPHA+TG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2NpbmcgZWxp dC4gRG9uZWMgdmVsIG51bmMgbm9uIGxhY3VzIHZlbmVuYXRpcyBjb21tb2RvLjwvcD4KWe value your privacy and would never spam youundefinedGet Instant Access!

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”

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

  • 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:

<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.

  • 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!

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.

You may also enjoy...

WordPress based membership sites have certain requirements, and make use of certain applications that, in my experience, makes most of the popular hosting providers a poor choice.
How you can add a time delay to your buy button.
Want to add custom slider for your course or lessons page? Click here to check out our step by step guide!

No official Google Maps location? No problem! Do you want to show Google Maps pins on custom places that aren’t “official” locations on a Google Map? No problem, in this

Notify of
Inline Feedbacks
View all comments