login signup preview
May 26, 2014 | 113 Feedbacks

Login/Signup modal window

This modal window allows users to login/signup into your website. Once opened, the user can easily switch from one form to the other, or select the reset password option.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

This resource can be particularly useful if you want to make the login/signup forms available to your users in each page of your website; users won’t be redirected to another page and will be able to continue with the task they were performing on that page.
The resource consists of a front-end coded version of the modal window.

Creating the structure

We inserted the Login/Signup links in our main menu:

For the modal window, we created two nested <div>, one ( the external one ) to cover the entire window, and the other to wrap the submission forms.

Inside the modal, we added a form switcher:

and the submission forms:

A .cd-error-message span has been added inside each form to show form error messages ( you can see them in the demo, clicking on both Login or Create account buttons).

Adding style

As default the modal window has  visibility: hidden; and opacity: 0;.
Both these properties are changed using the class .is-visible.

The .cd-close-form (form close link) has a display: none; on the laptop version. It seemed more natural on laptop to close the modal window just clicking outside the form or pressing the Esc keyboard button. On smaller screens (both tablets and mobile phones) there could be not enough space around the form, so a close link turns out helpful.

In each single form, we decided to hide the text labels and replace them with icons (using the .image-replace class). It’ not a good practice for long forms (we added placeholder, but  they should never be used as labels), but it works just fine for a simple form like ours ( the icons are as explanatory as labels so users don’t feel lost filling the form).

A last note: we set the font-size of all the input fields to be 16px. It prevents the auto zoom which happens on mobile devices when input fields are focused on.

Events handling

The only thing worth noting in the .js file is the function which allows users to hide/show the password. We decided to make the password visible as default (declaring the input as text type rather then password type). In this way we could get rid of the “repeat password” field in the sign-up form. User is free to hide the password (let’s say he/she is in a crowded place and wants to sign-in) just clicking on the .hide-password link.
When user clicks this link, the password input type is changed (from ‘password’ to ‘text’ or viceversa):

The .putCursorAtEnd() function focuses back on the input field and puts the cursor at the end of it (credit to CSS-Tricks)

Changelog

Nov 02, 2015
  • bug fixed - nav links triggering login modal
May 26, 2014
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • tonym

    Thank you! :)

  • Alex Martinez

    Amazing! Thanks for the code, and congrats for Codyhouse.

  • http://blog.coffeedesign.net/ Ahsan Idrisi

    are you using bootstrap or we can use it without it

    • Claudia Romano

      No, we haven’t used bootrstrap. So you don’t need to include it.

      • ProperLabs

        Bootstrap it!

  • http://www.neogrey.com/ Ivan Filipov

    just so you know, tested it with standard Android 4.1.2 browser and when I submit empty fields at SIGN UP, it doesn’ t return any errors…

    • Claudia Romano

      Hey Ivan, actually the resource is a front-end version of a login/signup form. We have not implemented input validation (just added the style for error messages).

  • Owen Andrews

    Doesn’t seem to work anymore? Safari

    • Claudia Romano

      Hi Owen, could you please provide more info? I’m testing it on Safari (7.0.5) and it works just fine. Thanks!

      • Owen Andrews

        Ha well its working today so who knows what happened yesterday!

  • ProperLabs

    Excellent job on this! Works beautifully. I really love what you guys are doing on this site. I would love to see some extra steps on how to integrate these types of tools. Maybe just a possible connection to email services such as mailchimp or cm would be a nice basic extra step.

  • Chaitanya

    Can someone assist me with linking this with a database using mysquli. For some reason my form isn’t accepting responses. Could the js cause any issue for the same?

    • http://codyhouse.co Claudia Romano

      Hi, did you delete, in the .js file, the code from line 95 to 102? These lines have been added only to show the success/error messages. Hope this helps!

  • Cindy Morrice

    Hi Claudia,

    I just need to know if I can use this SignUp/Login form on my blogspost blog. Please do let me know.

    P.S. Thanks for this awesome post.

    Cheers!

  • Pingback: Адаптивные модальные формы входа и регистрации | Dobrovoimaster()

  • alex cruz

    Beautiful!, great work, thanks for share ;)

  • Pingback: استایل فرم ورود و ثبت نام()

  • http://www.sfpcoder.com/ sina

    hi claudia,
    tanx for your helpful works.
    I just want to know is it possible to prevent user from clicking outside container in order to close popup, instead we have a close button to close popup?
    cheers :)

    • http://codyhouse.co Claudia Romano

      Hi Sina, yes we created a close button (.cd-close-form) which is hidden if screenwidth > 1170px. So you need to remove this from the css.

  • Deuce

    How do you modify the jQuery to make the password hide by default instead of getting it to show?

  • Shashi Kant

    Hi,
    Its looking very good, but before use this I want to know this is tested on Ipad, Iphone, mac and also full proof for IE9 and also give fallback for IE8 you can take help from this url http://uxmovement.com/forms/best-practices-for-modal-windows/ . I would also suggest to you please add input field of Date-of-Birth with calendar with no future date select.
    your work is appreciative.

  • Pingback: Site Templates - Ferado - Fashion eCommerce HTML5 Template Download - RİP | Theme Nulled()

  • Pingback: Ferado – Fashion eCommerce HTML5 Template (Fashion) | CharmPixel()

  • Pingback: Ferado – Trend eCommerce HTML5 Template (Trend) 2015 | Quality Wordpress Themes 2015()

  • Pingback: Ferado – Fashion eCommerce HTML5 Template (Fashion) | themeFORK()

  • Pingback: Ferado – Fashion eCommerce HTML5 Template (Fashion) | Digital Products Market Place for designers, developers, photographers, illustrators & producers()

  • Joseph

    U’re awesome Claudia ;) Thanks for share..

  • http://axpheykhan.wordpress.com Axphey

    I need use this to log in with other social networks as well.Like on after logged in through this how would i log on social networks.

  • WeOggy

    Nice code, congratulations.

  • Daniel Franco Vergara

    how use?, not function span error message

    • http://codyhouse.co Claudia Romano

      Hi Daniel, this is a front-end only login/signup modal (you’ll still need to implement the backend code).

  • Pingback: Blue Coaster33()

  • Oskar Roos

    Hi, I’ve been using your script on my school-project site, and it has been working fine so far. However, when using your modal window together with another scripts called ‘SlideBars’, I ran into some bugs. I’ve posted the issue to stackoverflow, and I’d greatly appreciate it if you’d be willing to have a quick look.

    If there is anything you need or wonder, feel free to ask.
    Thank you!

    http://stackoverflow.com/questions/30195580/two-scripts-colliding-but-only-on-mobile-login-window-slidebar

  • Rs13373

    please help me
    i want to add this window to
    http://html5up.net/landed
    please help me asap
    i shall be very greatful

  • Joseph Chua

    How would I go about not allowing it to close when submit button is pressed?

  • Pingback: parking()

  • Pingback: paypal loans()

  • Pingback: pay day loans()

  • Pingback: parking()

  • Pingback: that site()

  • Pingback: login facebook()

  • Pingback: electricians qualifications()

  • Pingback: l & c locksmiths()

  • Pingback: locksmith jefferson city mo()

  • Pingback: zakład szklarski piotrków trybunalski()

  • Pingback: house blue()

  • Pingback: electrician career salary()

  • Pingback: a replacement()

  • Pingback: ionizer loans()

  • Pingback: payment plan()

  • Venkataramana Pai K

    hello, i have designed a webpage having login and register buttons. on clicking those buttons i have to get these modals. i have attached your modal codes in my html code.. but its not working. Can you please help me in doing this.?

  • http://umgsfrontier.com Marjonh Davin

    another awesome plugin . thank you guys . :)) BTW , I implemented this into our school project . and works fine , but when i put a php login code . i cannot login ? . its been a week now but i cannot identify what is seems to be the problem ? please anyone there can help me out . much appreciated .

  • Emmanuel Mdoma

    Hello,
    Kindly help. I understand this is NOT a WordPress Plugin, so how then can I use it on a WordPress Project I am working on?

  • http://umgsfrontier.com Marjonh Davin

    hello people . disregard my previous comment . this my new question , could i use this on Codeigniter Framework ? if yes , suggestions ? much appreciated . thanks

  • Pingback: water ionizer()

  • Pingback: alkaline water brands()

  • http://umgsfrontier.com Marjonh Davin

    disregard again my previous question . coz i already done it . so my new question is can i change the svg icons in every label into font icons only ? coz i want to change the color of the svg icons . thanks

    • http://codyhouse.co Claudia Romano

      Hi, you can try using inline svg so that you can style them. Or sure, you can replace the background image with a font icon!

  • Pingback: ppl electric()

  • Pingback: water ionizer payment plan()

  • Pingback: alkaline water()

  • Nilabja Ray

    I am pretty new to jquery, so forgive me if my question is very silly. I have integrated this plugin with my web project as my site homepage. but when i try to signup, it always show an error at the email input and never actually submits the form. What modifications do i need to do to make the form actually work?

    P.S. i just love the plugin and am really upset that i can’t make it work. So, please help me.

    • http://codyhouse.co Claudia Romano

      Hi Nilabja, this is a front-end version only, so you still need to implement the backend code to make it work properly.

      • Nilabja Ray

        i understand that. I have rendered the code using django back-end. From my knowledge of html, I know that when i submit a form, the data is sent to the back-end. but here that is not happening.

        This is just a novice guess, but i think here, when I am submitting the form, the data is being sent to some javascript function that is validating that data, and then the datashould be submitted. And that function for submitting the data is not there.

        • Elaine Lu

          @nilabjaray:disqus
          Can you tell me how did you solve this problem? I have the same problem as you

      • Nilabja Ray

        Don’t bother, I have solved the issue. sorry for all the trouble caused.

  • Pingback: alkaline water()

  • Pingback: read more()

  • Nick Loat

    I’m integrating the login form into Perch CMS and was wondering if its possible to not hide the modal on clicking the password reset button? What’s happening is the password is being reset but the user is not seeing the message telling them that an email with a new password has been sent to them, because the modal closes (if you then re click the login link you see the message.) Any thoughts much appreciated

  • Pingback: http://makemoney.camkingz.com/()

  • Pingback: http://webkingz.camkingz.com/()

  • Pingback: learn more()

  • Pingback: great post to read()

  • Dss Test

    Hi Claudia

    Good Day!

    How to add additional Tab? I wan’t to add Newsletters Subscription tab.

    I Tried to modify the jquery but not successful… hehehe

    Thanks in advance!

    Mark Claudio

  • Nam Le Nguyen

    how do you check database to mysql?
    From missing “method=”? Action= ?
    check password?
    check email ?

  • Aleks Petrov

    BUG: If you hit ‘esc’ before open modal, cursor is hiding =) / Mac, all browsers /

  • bharat saraswat

    Hi, this is a good post. I want to use it for few links in a navigation bar, my navigation bar contains four links home, about us, contact us, login, signup. It is working fine for login and signup but also opening the modal for other links. I am new to jquery please tell me how I can do it so it opens for only those two links.
    Thanks.

    • Deron Sizemore

      Same for me. I’d love to know how to get this to ONLY work on the login and signup links and not all links in my nav bar.

      • http://codyhouse.co Claudia Romano

        I just uploaded a new version which should solve the problem! @bharat_saraswat:disqus

  • German Astakhoff

    Hi, this is cool post. Is possible add validation to the fields? Or please post snippets for this issue. Thank you!

  • Elliott Mangham

    Is it possible to make it so the user cannot scroll in the page background when the dialog is open? (ONLY when it’s open). Please help! Thanks

    • Chad Wilken

      Just set the body overflow-y to hidden and change when the form closes.

  • Johnathan Gonzalez

    how would you implement this in a wordpress site ?

  • Ley Lani

    HI Claudia, thank you very much for the tutorial , I hope you can help me with this question , I tried to change the cd- logo.svg but to make the change in Illustrator, not seen. There is a trick to this?

  • Alejandro

    I have a tip to prevent showing the link “web.domain/#0″.
    Change ” href=”#0″ ” to ” href=”http://a b” “. The space will disable it.
    Ex: You can also put ” href=”http://no link” “.

  • Krishna Jha

    I want to integrate this into my website which is on wordpress so how can i do it?

  • Alejandro

    You can disable the href=”#0″ removing it and adding style=”cursor: pointer;”
    It seems a click button, without any href

  • Rozalia Ramzi

    When u don’t type anything in sign up form and when u click on create account it shows the error msg for the email not the username (I think ot should start from there not from the email ! ) how i can fix this please answer

  • IgorG92

    Hi Claudia,

    How to open modal on center of page without set margin-top?

    @media only screen and (min-width: 600px) {
    .cd-user-modal-container {
    margin: 4em auto; /*without 4em*/
    }
    }

    Thanks for the magic login screen! >:)

    • http://codyhouse.co Claudia Romano

      Hi there, you could try setting top: 50% and transform: translateY(-50%). Hope this helps!

      • IgorG92

        Hi again Claudia,

        The result was NOT expected …

        I believe we have held not been in the middle of the screen!

        I wonder what I did wrong?

        Thanks in advance!

  • IgorG92

    Hi again Claudia,

    The result was NOT expected … I wonder what I did wrong?

    Thanks

  • Michael Occhipinti

    I’ve been trying to edit the demo code and I can’t understand why it’s giving me an invalid password. I can’t even see where the validation code is?

    • http://codyhouse.co Claudia Romano

      Hi Michael, there’s no validation code; we added an error message just to show its style.

  • brutyke

    Hello Cody people,
    Great script this.
    But I have a lazy user, is there a quick way to put focus (cursor) on the username field without having to click or tab to it first ?
    I tried the html5 autofocus, but that didn’t have any effect, so I guess it would have to be done in the javascript ?
    Thanks in advance.

    • http://codyhouse.co Claudia Romano

      Hi there, you should try using the jQuery focus() method. Hope this helps!

      • brutyke

        Thanks, I’m not really sure where to add that.
        I’ve tried it like this below line 15 (main.js)
        mainNav.on(‘click’, function(event){
        $(event.target).is(mainNav) && mainNav.children(‘ul’).toggleClass(‘is-visible’);
        $(‘#signin_username’).focus();
        });
        but that doesn’t work.
        Can you give me some more direction please ?

        • brutyke

          I promise to buy your ‘Learn JavaScript & jQuery with CodyHouse’ course if you help me get past this problem ;-))

          • Fabian Pontén Söderlind

            Hi @brutyke:disqus ! If you have a look at the code on line 19 you’ll see that at the end of the statement there is a function callback to the function named “signup_selected”.

            So what you want to do is to add the code to the end of that function and you’ll have the desired result!

            First what you need to do is select the that you want to be focused in the HTML using jQuery, in this case I’ve chosen the field with an ID of #signup-username (I believe that is the one that you wanted). Add then add the .focus() jQuery method like @claudiarrromano:disqus suggested above.

            It jQuery it looks like this:

            $(‘#signup-username’).focus();

            In this case we need to handle both when a user clicks the link in the “nav.main-menu” as well as when the user switches tabs. What we also need to take into account is that we need to add the “.focus()” method after the .is-visible CSS transition has finished.

            So if you look at line 77 you see the formModal.addClass(‘is-visible’); statement.

            What we want to do, as mentioned above, is adding the code after the “.is-visible” CSS transition has finished, it looks something like this:

            formModal.addClass(‘is-visible’).on(‘transitionend’, function() {
            $(‘#signup-username’).focus();
            });

            This handles the focus() method when a user clicks on the “#cd-signup” link in the “nav.main-nav.”

            Then to handle the switching of the tabs you can simply add this single line of code at the bottom of the “signup_selected()” function:

            $(‘#signup-username’).focus();

            The complete function will look like this:

            function signup_selected(){
            mainNav.children(‘ul’).removeClass(‘is-visible’);

            // Adds .focus() after transition has finished
            formModal.addClass(‘is-visible’).on(‘transitionend’, function() {
            $(‘#signup-username’).focus();
            });

            formLogin.removeClass(‘is-selected’);
            formSignup.addClass(‘is-selected’);
            formForgotPassword.removeClass(‘is-selected’);
            tabLogin.removeClass(‘selected’);
            tabSignup.addClass(‘selected’);

            // Handles the focus on Tab Switch
            $(‘#signup-username’).focus();
            }

            If you just replace the whole function on line 75 with the code above everything should work just fine!

            Hope this helps and just leave a reply if anything is unclear to you :)

            Cheers and have a great day!

            Kind regards,
            Fabian

          • brutyke

            Many thanks Fabian.
            That has worked for the demo code.
            I also added it to the Login tab and reset password link – changing field ids of course – which has also worked.
            But on my live system, nothing happens, no console error – the actual login still works, just no auto focus – so I guess I’ve made a typo or something.
            Thanks again.

          • Fabian Pontén Söderlind

            No worries @brutyke:disqus!

            Have you made other changes in the code perhaps that could be causing the issue?

          • brutyke

            Hi Fabian,
            In the JS I’ve only changed line 11 to match my class name :
            mainNav = $(‘.top-bar’); (Foundation 5 top nav bar)
            In the HTML. I’ve commented out the ‘Sign-up’ tab as it’s not currently used
            Everything works – even my own validation code – except the focussing on the first field, which I think should be standard on all forms.
            I had a request yesterday for a ‘change password’ form, so I’ll probably try adapting the ‘Sign up’ tab for that.
            Thanks.

          • Fabian Pontén Söderlind

            Ok that’s strange! Are you saying you have commented out the ‘Sign-up’ tab in the HTML or in the JavaScript?

            If you still have the JS code that is used for handling interaction with the ‘Sign-up’ tab, but have removed the HTML that it should interact with, there could perhaps be a minor conflict there that prevents the code from running successfully?

          • brutyke

            Yes,I have commented out the ‘Sign-up’ tab in the HTML.
            I’ll uncomment it and try again over the w/end.
            Thanks Fabian

          • Fabian Pontén Söderlind

            Give it a try and see if it works :)

            No worries @brutyke:disqus, have a good one!

  • Erik Bietz

    Hi Claudia,
    is it also possible to auto-hide the password?
    Thx :D

    • Tony Whitehouse

      Hi Erik – I managed to do it by changing the HTML from “Hide” to “Show” so that the link changes and changing the input type for the password from “text” to “password”. This is what the javascript does.
      Good luck
      Tony

  • Nick

    What reasons could having an ID attribute on the nav tag break the form being shown on click?

    • Fabian Pontén Söderlind

      Just adding an ID attribute to the tag shouldn’t do anything unless you have some CSS or JavaScript assigned to it, so check if the ID that you’re using is used elsewhere in the code already or if you’ve added your own custom CSS/JS that could be causing the code to break.

      Hope this helps :)

      Kind regards,
      Fabian

  • Pingback: Google()

  • dani

    Hi, this is awesome!
    how can i do to check data when login without hide the modal? and show the error without reload the page? i’m working with asp.net, sorry, the english is not my first language xD

  • Shan Reyes

    hi ma’am claudia why i can’t run my form handling in this demo any help ? thank you