Title: show/hide toggle?
Last modified: August 19, 2023

---

# show/hide toggle?

 *  [IT Hertz](https://wordpress.org/support/users/it-hertz/)
 * (@it-hertz)
 * [2 years, 9 months ago](https://wordpress.org/support/topic/show-hide-toggle/)
 * Is the eye icon supposed to be a toggle switch? If so, it isn’t working in any
   of my browsers.
 * If not, then it’s pointless, since the user can already see whether the password
   is hidden or shown. It also takes up space and, in my case, interferes/overlays
   with the last chars of the user input; looks messy.
 * If it isn’t a toggle, it really should be, to allow the user to select mode rather
   than the site forcing it on them, and it shouldn’t overlay their input. This 
   would enhance UX.

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [kimipooh](https://wordpress.org/support/users/kimipooh/)
 * (@kimipooh)
 * [2 years, 9 months ago](https://wordpress.org/support/topic/show-hide-toggle/#post-16986244)
 * The icon is the feature in which the password is shown because some users requested
   it.
 * 
   Your suggestion is a good idea about selectivity. In version 4.1, the option“
   hideIcon” was added.ex. [password* passowrd-10 hideIcon].Please update the plugin
   and try it.
 *  Thread Starter [IT Hertz](https://wordpress.org/support/users/it-hertz/)
 * (@it-hertz)
 * [2 years, 9 months ago](https://wordpress.org/support/topic/show-hide-toggle/#post-16986868)
 * Thanks for the update. It restores the form to its original appearance.
 * I fixed the overlay by giving the icon a background color that matches the form
   page and setting left padding and margin to conceal the bullets (necessary with
   FF, since it uses huge bullets, and on mobile devices, where the fields are reduced
   in width).
   However, I’m having trouble pushing the icon down, as top margin/padding
   don’t work. I tried to set a flexbox to align the items that way, but no joy.
   My fields are a little taller than default height, and the icon isn’t quite centered
   vertically.
 * At any rate, I see the `onclick="pushHideButton('Password')` attribute. I haven’t
   looked at your js to see what the listener is doing, but this isn’t working in
   any browser.
 *  Plugin Author [kimipooh](https://wordpress.org/support/users/kimipooh/)
 * (@kimipooh)
 * [2 years, 9 months ago](https://wordpress.org/support/topic/show-hide-toggle/#post-16987627)
 * As for the JS, specifically, it works as follows.
   Initially, the password is 
   hidden (input tag type is password) and the eye icon is open. When the eye icon
   is clicked, the type of the input tag is set to text. Also, when clicked, it 
   just switches between the class name when the eyes are open ( fa-eye ) and the
   class name when the eyes have slashes in them ( fa-eye-slash ).
 * The rest is using fontawesome.com’s service, and I don’t know more than that 
   because of the environment I have (WordPress 6.3 + PHP7.4.33/PHP8.2) and some
   users who are actually using it.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘show/hide toggle?’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/cf7-add-password-field.svg)
 * [Add Password Field for Contact Form 7](https://wordpress.org/plugins/cf7-add-password-field/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/cf7-add-password-field/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/cf7-add-password-field/)
 * [Active Topics](https://wordpress.org/support/plugin/cf7-add-password-field/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/cf7-add-password-field/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/cf7-add-password-field/reviews/)

## Tags

 * [toggle](https://wordpress.org/support/topic-tag/toggle/)

 * 3 replies
 * 2 participants
 * Last reply from: [kimipooh](https://wordpress.org/support/users/kimipooh/)
 * Last activity: [2 years, 9 months ago](https://wordpress.org/support/topic/show-hide-toggle/#post-16987627)
 * Status: not resolved