How to Add Eye Icon to Password Field in WordPress Registration Form | JetFormBuilder

Discover the straightforward method of incorporating #eyeicons into password fields with the #JetFormBuilder #WordPress plugin. This enables users to easily switch between concealing and revealing passwords with a simple click.
Join us as we guide you through each stage, starting from setting up a user #registration form to demonstrating the eye icon functionality.
Don't forget to subscribe to our channel and enable notifications to stay updated with our latest tutorials.
► TIMESTAMPS
00:00 Introduction
00:45 Requirements and tutorial overview
01:15 Registration form
02:02 Post-submit actions
03:03 User registration page
03:48 Adding an eye icon to the password field
06:44 Checking the result
---------------
Written instructions:
📄 Custom code
👉 gist.github.com/girafffee/0d4...
📄 JetFormBuilder Documentation
👉 out.crocoblock.com/3xEUmwD
---------------
►Get JetFormBuilder:
out.crocoblock.com/49AL2aq
►Choose Crocoblock subscription:
out.crocoblock.com/49yvnbR
-------------
Watch related videos:
◎ JetFormBuilder Tutorials Playlist
👉 • JetFormBuilder | Tutor...
◎ How to Create WordPress Registration Form | JetFormBuilder Plugin
👉 • How to Create WordPres...
---------------
Follow Zen Ideas for more helpful content:
► / @osamu_wakabayashi
►zenideas.ca/
---------------
#WebDesign #WebDevelopment #WordPress
Join us here:
► FB Community: / crocoblockcommunity
► Facebook: / crocoblock
► Twitter: / mrcrocoblock
► Instagram: / mrcrocoblock
► LinkedIn: / crocoblock

[@Ellinio]

Thank you!! Very useful!!

[@Crocoblock]

Glad to hear that!

[@nishidshajib5720]

This way will load font-awesome. It can be done without font-awesome just use svg 🔥
Anyway nice tutorial ❤️

[@DeveloperNadimul]

Thank you

[@FrancisAlisson]

Thanks

[@Website-Developer]

Just happened across this while researching something else. A must for all the forms Thank you.

[@Crocoblock]

thanks for letting know 💛
very pleased to be helpful for you 💛

[@Website-Developer]

@@Crocoblock Unfortunately I Just discovered that it isn't working for a change password form?

[@Crocoblock]

I think, you mean Reset Password fields (crocoblock.com/knowledge-base/jetblocks/how-to-create-reset-password-form/)
if so, then after clicking to the Block icon, and then Group icon, you'll get 2 conditional blocks, where the 2nd one have text fields , where you can edit CSS class name prnt.sc/WGyk61tZPKHR
hope it helps

[@Website-Developer]

@@Crocoblock Yup that was it. I can't believe I missed that 😜

[@wpcoderdavid]

nice way

[@ArezkyH]

Thank you. Very useful. The only thing I do not like is that the eye shows the state it WILL have when clicked, not the current state it has NOW.

[@Crocoblock]

it looks like a custom solution - kindly proceed to our support team crocoblock.com/help-center/

[@rom1landry]

Very cool ! Just please, does it work for you also on the register form where you choose a password and then confirm in a second field ?

[@Crocoblock]

yep :)

[@redtvtalks3464]

Another fantastic video! The code is working fine. But the eye icon is not visible in the line.

[@Crocoblock]

kindly proceed to our support team so we could check it crocoblock.com/help-center/

[@abdullahmaqsood9017]

Can you please tell me how to add icons in input fields for login form user icon or password icon.

[@Crocoblock]

sorry, could you please elaborate a bit on it?
as now it's not clear enough, what exactly you are going to achieve?
if I get you right, then you can perform the same for the login form, but you'll need a separate plugin for it jetformbuilder.com/addons/user-login/

[@ramaslan]

I always watch your videos closely and you make very good instructional videos. My question today is this: Let's say in Jetforumbulder, the user enters his own Facebook or any URL. How can you protect the security of that url or ask the user to enter a static url? In other words, the user enters a malicious link into whatever link he enters, and when the other user clicks on that link, he is infected with the virus. How to prevent this from jetforumbulder or jetengin?

[@Crocoblock]

it's a good question though
so, the functionality of our forms and JetEngine itself can't predict if the link is save or not
you need to check it on your own
or, as an alternative, you can give a link to the form to the verified user only and hide the form for others with the Dynamic Visibility option crocoblock.com/plugins/jetengine/dynamic-visibility/

[@gabrielk5497]

Same code works for elementor form widget?

[@Crocoblock]

you can give it a try, but we have created it for JetFormBuilder :)

[@GabrielMacedo-oh5bb]

Does it work with JetEngine form?

[@Crocoblock]

it works with the JetFormBuilder - kindly try this plugin as JetEngine forms are legacy ones as for now
if you have forms created with JetEngine you can concert them into JetFormBuilder with a converter ruclips.net/video/zGQEisL-Lv8/видео.html

[@eyeswatchnyou]

Does this work for the login form?

[@Crocoblock]

yep, it should work with the login form as well :)

[@eyeswatchnyou]

@@Crocoblock Thank You!

[@fatjay9402]

Can you tell me how to get rid of spam registrations? got every day 10 - 40

[@Crocoblock]

it looks like you need to enable the SPAM protection, maybe captcha
jetformbuilder.com/features/setting-recaptcha-anti-spam-protection-in-form/

[@Crocoblock]

Additionally, this guide can help you jetformbuilder.com/features/advanced-form-validation/