How to Create User Login Form with the Reset Password Feature | JetFormBuilder User Login Addon
Vložit
- čas přidán 31. 07. 2024
- Welcome to our super-exciting tutorial on building #login form for #WordPress with JetFormBuilder User Login Pro Addon and its newly added Reset Password Feature.
Here we also cover how to use Render State functionality that was added in JetFormBuilder 3.0 and how you can benefit from it and save time.
💡 Tip. Make sure you have User Login Addon activated and SMTP configured.
Get FREE JetFormBuilder
► bit.ly/3nfLwQL
📄 Learn more about User Login Pro Addon
► bit.ly/3lBnOhx
📄 Check out JetFormBuilder Documentation
► bit.ly/3LPAnAm
-------------
Template Used:
LaborTime - Dynamic Job Board Website for Elementor
► bit.ly/3Ty46zM
-------------
🌟JetFormBuilder playlist:
► • JetFormBuilder | Tutor...
------
► TIMESTAMPS
00:00 Introduction
00:47 Tutorial’s overview
01:37 Requirements
02:05 Creating a new form
02:22 Building a login form
04:15 Render state for login form
05:20 Building reset password form
05:59 Render state for reset form
06:55 Adding button to switch between forms
08:22 Input and confirm new password fields
09:23 Post submit actions
11:56 Setting up events for actions
14:16 Adding the form to a Login page
14:46 Checking the result on the front end
------
Get JetFormBuilder Pro addons here
► bit.ly/42tuq2a
💡 You can also get JetFormBuilder Pro addons for FREE if you are an existing Crocoblock All-inclusive subscriber (just check your account).
Upgrade to Crocoblock All-inclusive here
► bit.ly/3JDkzOI
------
Join us here:
► FB Community: / crocoblockcommunity
► Facebook: / crocoblock
► Twitter: / mrcrocoblock
► Instagram: / mrcrocoblock
► Pinterest: / crocoblock
► LinkedIn: / crocoblock - Věda a technologie
Thank you, Julia. A really nice and useful tutorial indeed 👏
I loved it, congrats from Colombia!! (south america 😀)
Thank you! Greetings from Ukraine 🥰
Please add an option for email verification during registration. In this option, users will receive a verification link via email. After clicking on the link, users will be able to log in to the website. With this option, the spam will be reduce.
its there bro
@@sserunjojigonzaga9711 I haven't seen it. Where?
I vote for pin confirmation sending to confirm registrations and 2FA methods for login too.
@@sserunjojigonzaga9711 where is it bro? :)
@@sserunjojigonzaga9711 where can I find this?
Awesome! Was waiting for the Password Reset Feature, without it the the account plugin was no good...
We are happy to know you found it useful for your project 🔥
Thank you Julia this will be useful
Go Juliet! Thanks for the tutorial.
Thank u for sharing
This is great. It may be helpful to consider adding some additional details regarding if user is already logged in and possible redirections after login. I recently tried it out myself and had some difficulty logging in, as I was already logged in. I spent some time trying to figure out what was wrong.
You can try my approach. In a clean elementor template put 2 form fields. Make the conditions with JetEngine Visibility so you see each form depended on if you're logged in or not. I have my login form for users that are not logged in and a message with redirect if the user is already logged in. You just make more forms seperate each other.
Thank you for a great tutorial! What would be very helpful is to add a function that will ask the user to confirm their email address before an account is created (say via a link sent to the email supplied at registration) - this of course for a registration form, not a login form.
Thank you for your suggestion! We have such a feature request and passed it to our developers. Hopefully, this feature will be implemented in the future
pfff!! :disappointed_face: The reset buttons do not exist in version 3.0.3, the form cannot be finalized
Thanks for this! Feels a bit complicated but assuming it'll get easier with practice :) Any recommendation on how to add recaptcha?
Hi! Thank you for your feedback!
Please, check this article jetformbuilder.com/features/captcha-settings/
Great and is it possible with that to customize the login page of WordPress to go to the dashboard wp-admin? Thanks
thanks :)
with Crocoblock we don't have any tools to make it possible
you can try any 3-rd plugin solution :)
Fantastique !!! 😇
Unfortunately I got lost at the end of the video... :(
Please, contact our support team if you have any questions: crocoblock.com/help-center/
Well timed tutorial. I have a login forms but no function to recover password.
I have the same problem!
Question. How do you get rid of the Lost Pssword? button that pops op every time you enter the correct email address with the wrong password. The lost password button is going straight to the wordpress reset page instead of the one I created
It would be great if we could check your settings and test the problem on your website. Let our support team help you crocoblock.com/help-center/
Hi all, at minute 14:56 after the Login I see that menu is changing replacing Login with Logout and adding My Account. Is this done with Croco suite or done with other plugins such as Nav Menu Roles? Feedback will be appreciated
Hello! We use Auth links widget here: prnt.sc/ndNkMpJiYLG1 And this is how it works:
crocoblock.com/knowledge-base/jetblocks/jetblocks-authorization-links-widget-overview/
@@Crocoblock great thanks for your reply
There is no Reset Password Field on my Jetform Version 3.0.9, and add on User Login Action Version 1.0.2.
Could you contact our support team please so we could check your issue?
crocoblock.com/help-center/
Thanks I need this and please make taturial how to edit comments section using crocoblock
Hi! Please, check the following tutorial jetformbuilder.com/features/how-to-allow-or-disallow-comments-from-front-end-forms-in-gutenberg/
So Login & Register in one form possible?
Even If I use two different conditional block it throws an error that same field id can't be same.
If you follow this tutorial carefully, it will work correctly. Don't forget to add render states to your form :)
Hi, I did exactly how you showed but when I test it I get the message "Error: The username field is empty" but I'm of course filling it out. Any ideas?
well, the reasons can vary and to identify it we need to investigate the issue inside and out - so could you please submit a request to our support team? crocoblock.com/help-center/
but before you can try to check the conditional block, just in case you are implying it in your form
try please to enable this option prnt.sc/itni4FVurUQt to hide elements from HTML
if this option is enabled, then the field is removed from HTML markup
if it doesn't help you, then proceed please to our support team :)
How do you style the render state button separately from the submit button?
you can do it with the JetStyleManager plugin
crocoblock.com/knowledge-base/plugins/jetstylemanager/
so, there's a small issue indeed while styling them - while doing it in the form itself it will not restyle the parameters set in the widget / block
so, you don't have to style them in the block / widget :)
it should help!
hi, I need to create reset password with these blocks;
Current Password
New Password
Confirm New Password
==========
how can I create the Current password is validating to the current user password?
I need to create this post inside the profile user. so, when the user logged in, they can change their own password. but need to confirm their current password. sounds like server side callback.
thank you
You could set up the conditional block for New Password and Confirm New password fields. It the user entered the correct password, they show up in the form: prnt.sc/N45e_XvjCmZ5
How to add a Form field on login form and validated if it matches user custom meta
Please, contact our support team for clarification of your question- crocoblock.com/help-center/. We will do our best to assist you with finding a solution.
Is it possible to open the password reset form with jetpopup after you click on the email reset link? That would need another conditional function I guess.
could you please help me to understand you better?
how exactly do you perform the reset?
with the help of the JetBlocks or JetFormBuilder?
@@Crocoblock Yes, sure. I set up the form with jetformbuilder just like in the video, but i dont want to use separate login page for login/password reset. I want to use only the modal (jetpopup) for login/pwd reset.
So, I created the icon for login into the header and put jetpopup to open with click event, and it is working.. i see login inside jetpopup and everything works, but how to trigger the same popup if I click on the email password reset link and into reset.password state? Is there an option in jetpopup for multiple event triggers, just like in this case? Thanks.
your case looks like to be a kind of a complicated one, so I would recommend you to proceed to our support team crocoblock.com/help-center/
we need to dive into it :)
thanks :)
your case looks like to be a kind of a complicated one, so I would recommend you to proceed to our support team crocoblock.com/help-center/
we need to dive into it :)
thanks :)
Great tutorial! I'm having troubles customizing the frontend layout. The "Forgot your password" and the "come back to log in" buttons just can't be customized, they are big blue buttons aligned to the left and I haven't been able to fix this in Elementor. Can anybody help me on this one?
Hello! We are happy to know you like this video tutorial!
Let our support team help you to style up the buttons, please crocoblock.com/help-center/
Did you figure it out? I can't
@@jake5285 you can try to add a class name to each button (forgot your password and come back to log in) and customise them with CSS in frontend. I did it and it works fine!
좋은 가이드 고맙다. 한 가지 오류가 생겼다. 영상과 같이 설정을 마무리하였다. 리셋 패스워드를 클릭했을 때, 이메일 전송은 잘되고 있지만 기존의 페이지에서 워드프레스 관리자 로그인 페이지로 이동된다. 리셋 페이지에 그대로 머물러 있게 할 수는 없나?
Sorry, I couldn't recreate your issue. It would be great if you let our support team to check your settings and help you with this problem. crocoblock.com/help-center/
the bigest problem with custom login forms was that after incorrect password entry it's redirects to the default WP login page - how that works in case of this login form?
If the password is incorrect, the form gives an eror: prnt.sc/6b00etl2ME-b
@@Crocoblock For God's sake, I need to edit the text of this message, how do I do it? The ''lost your password'' link takes you to the native wordpress page and I don't want that. Please tell me how to remove this message or change it please!
the field "reset password" does not appear
Hi! Please, contact our support on this issue - crocoblock.com/help-center/
In my logic conditional, the render state option did not appear
Could you please let our support team check your settings and try to help you? crocoblock.com/help-center/
I don't see Reset Password Field. Please fix this.
We cannot recreate the problem on our websites. Could you please contact our support team so we could check your settings and give you a solution? crocoblock.com/help-center/
Its a great tutorial but is a little quick, not explain how to add and where to get login addon and how to create menu and which shows login and logout function.
Thank you for your feedback! The User Login addon can be purchased here: jetformbuilder.com/addons/
The link to the page with the login form can be added in Appearance - Menus. You can use the default header from your theme or you can customize the header by creating a template. You can use different theme builders. For example, JetThemeBuilder can help you with this task.
Unfortunately, the redirect no longer works what could be the reason
Could you please contact our support team so we could check your settings and give you a solution? crocoblock.com/help-center/
Ein kleiner tip hätte schon gereicht
Wie sieht es eigentlich mit der bereingung der formular daten aus? Ist das schon integriert oder muss man das mit den hooks selbst erledigen ich habe 50 formulare und es währe sehr müsam das jetzt auf alle formulare an zu wenden
We cannot recreate your issue. Redirect action should work fine. I do not see your settings and cannot know for sure what causes this problem. That's why I kindly ask you to contact our support team to provide you a solution.
How to add password visibility icon?
At the current moment, it can be done with the help of a custom code. Our support team can provide this solution to you: crocoblock.com/help-center/
Wow, not cool but very hot!