Toggle Login and Registration form in HTML CSS and JavaScript

Last Updated: 2024-02-24 11:48:54

Toggling between login and registration forms is now a common feature. It is also a user-friendly design of the login registration template as a user can easily switch between two forms. Previously we created a login page template with Particle JS animation, now in this post, we will create a login registration form with toggling features. We will also provide you with the complete source code. Hence you can download this login registration template for free. So let's start.

 

Please note that this post is only for the design purpose, for form validation, you can check our login form validation and registration from the validation post.

 

 

👉 Five Login Registration Form Example 👈👈

1. Login Registration Template With Google And Facebook Buttons
2. Login Registration Template With Password Show Hide Feature
3. Toggle Login And Registration Form In HTML CSS And JavaScript
4. Login Page Template Design With Particle JS Animation
5. HTML CSS Login Page Template With Animated Label And Submit Button

 

 

Steps we need to follow to make a login registration form with toggling functionality.

 

1. Create and design login and registration forms separately.
2. Take a button on each form to switch to another form.
3. Design your login and registration form using CSS.
4. Apply JavaScript to switch between login and registration forms.

Design Login and Registration forms

Before going to toggle the login and registration forms we should create those forms separately. We should also take two buttons so that we can switch between the login and registration forms.

 

< form action="#" class="login-form">
    < h2>Login< /h2>
    
    < !-- Add input field -->
    < !-- Or download complete source code -->
    
     
    < p class="message">Don't have an account? < a href="#">Register now< /a>< /p>
< /form>

< form action="#" class="registration-form">
    < h2>New Registration< /h2>
        
    < !-- Add input field -->
    < !-- Or download complete source code -->


    < !-- button for toggle -->
    < p class="message">Already have account? < a href="#">Sign in< /a>< /p>
< /form>

 

Please note that this is just an example, you can download the complete source code for here.

 

 

 

 

Toggle the login registration form in JavaScript

After creating the login and registration forms separately, now we can switch between the login and registration forms by clicking the Sign in and Register Now buttons.

 

$(document).ready(function(){
    $('.message a').click(function(){
      $('form').animate({height:"toggle", opacity:"toggle"}, "slow")
    })
});

1. The code includes two < form> elements, each with a different class: "login-form" and "registration-form". These classes are used for styling and targeting the forms in JavaScript.
2. Inside each form, there is an < h2> heading that displays the form title, either "Login" or "New Registration".
3. There is a < p> element with the class "message" that serves as a toggle button between the login and registration forms. It displays a message like "Don't have an account? Register now" or "Already have an account? Sign in". The < a> tag within this element is used as a link for toggling between the forms.
4. The JavaScript code enclosed within $(document).ready(function(){}) ensures that the code is executed once the document (HTML) has finished loading.
5. Within the JavaScript code, $('.message a') targets the anchor < a> tag within the element with the class "message". This selects the toggle link.
6. The .click(function(){}) function is attached to the toggle link. It specifies the action to be taken when the toggle link is clicked.
7. Inside the click event function, $('form') selects all the < form> elements on the page.
8. The .animate() function is called on the selected forms. It animates the forms' height and opacity to toggle their visibility. The "toggle" value passed to the animate function makes the form expand or collapse vertically, and the "slow" value specifies the speed of the animation

When the toggle link within the "message" element is clicked, the JavaScript code is triggered. It selects the forms and animates their height and opacity, effectively toggling their visibility. This provides a simple and smooth transition between the login and registration forms on the page.

 

Please note that this is just an example, you can download the complete source code for here.

 

 

 

The "Toggle Login and Registration Form" feature improves the usability of a website by allowing users to seamlessly switch between the login and registration views without requiring a page refresh. It involves HTML for form structure, CSS for styling, and JavaScript for handling the toggle functionality. By implementing this feature, websites can provide a user-friendly and intuitive experience for visitors who need to either log in or create a new account.