Bootstrap Login and Register Forms in One Page: 3 Free Templates

Published on: Nov 06 2015 by Anli

Bootstrap Login and Register Forms in One Page

Today’s web design resource is a package of free Bootstrap login and register forms in the same page. It contains 3 different responsive templates to integrate in your projects and use for your “sign in” and “sign up” page.

The idea of these templates came from a comment of an Azmind’s reader a few days ago, so if you have any other great idea feel free to let me know.

Some features of these form templates are: fullscreen background (with image slider also available), Font Awesome icons, simple jQuery form validation, etc. Below you’ll find the full list of features, the live preview link and the download link. Enjoy!

You might also like:

Bootstrap Login and Register Forms in One Page with Hide/Show Effect
Bootstrap Registration Forms: 3 Free Responsive Templates
Bootstrap Login Forms: 3 Free Responsive Templates
Bootstrap Contact Forms: 2 Free Responsive Templates


  • Responsive Layout (Bootstrap framework)
  • 3 Different Form Templates
  • Fullscreen Background (Images Slider also available)
  • Simple jQuery Form Validation (to prevent users from leaving empty fields)
  • Font Awesome icons
  • “Login with Facebook, Twitter, Google Plus” buttons

The 3 Form Templates

Template 1

Light forms with fullscreen background:

Bootstrap Free Login and Register Forms 1

Template 2

Dark transparent forms with fullscreen background:

Bootstrap Free Login and Register Forms 2

Template 3

Light forms and light background with subtle pattern:

Bootstrap Free Login and Register Forms 3

How To Use The Templates

Download the zip package below and extract it. You’ll see that each form template is in its own folder (named “form-1”, “form-2” and so on) with all the needed files.

Use the “index.html” file to modify the HTML code. The style can be changed from the CSS files in the “css” folder (assets/css).

In the templates I have also used some Javascript (jQuery) for the form validation and the fullscreen background. You can find this code in the “scripts.js” file (assets/js).

The images are located in the “img” folder (assets/img). The favicon and the Apple touch icons are in the “ico” folder (assets/ico).

Demo, Download and License


DOWNLOAD: Bootstrap Login and Register Forms in One Page (22275)


You can use these login and registration forms templates in personal and commercial projects, but you can’t sell or distribute them directly, “as is”. If you plan to use them, a link to this page or any form of spreading the word will be much appreciated.

Want More?

If you like the form templates above and want more layouts, color schemes and features, along with free support and free updates, you should take a look at the Marco template:

Marco: Bootstrap Multi-purpose Landing Page

Marco: Bootstrap Multi-purpose Landing Page

Filed under: Templates

18 Comments So Far

  1. Tariq says:

    You did a great job . Love You

  2. Mood says:

    oh Thanks .. 🙂

  3. Ton Paliin says:

    Please allow me to put you on those lists I will thank and link their website to my thank you page.

    But I have trouble with your form, I would like to make a subscribe form, and you teach how to add extra field, but how about, removing the Subject and Message Area, how can we do that? Should I remove them on contact php? cause I already deleted the field in index.html but I think I’m messing wrongly the Javascript. When I press subscribe, it’s not sending me message, nor saying the thank you message. Please help me, what to do….
    But I know you’re so busy…

  4. Ton Paliin says:

    I tried also that, it will post name, email, and i change the $message into a “New Subscription” And also the subject to New Subscription too.

  5. KS says:

    How to integrate jquery validator libarary with this. I have tried to do so but validate function on jquery is not working..

  6. Claesson says:

    Hi, really nice logo in “Template 1”, can you tell me what font this is, or how I can do something similiar?

    Best regards

  7. xave says:

    hello, can I ask how to change the background? I can’t seem to find it from the index.html folder and so does in every css folders,. 🙁

  8. Damian says:

    I want to great a landing page with registration form for airport shuttle transportation

  9. Rick says:

    Hey, Thank you very much

  10. fabien says:

    Hello, thanks for this beautiful landing page! Where should I put the email adress to receive the registration?

    • Anli says:

      Hi fabien,

      I’m glad you like the form templates 🙂

      However, these are only front-end, you have to implement the back-end part to handle the user registration and login, as per your needs.

      For example, you might want to receive subscribers in your email, or add them to a database, or integrate the forms in an existing system.

  11. Tom says:

    Its nice, but its not lighweight.

    Where is the forgett password button?
    Where is Remember data checkbox?

    I cannot make small button because button definitions are overwritten?

    It will be good if all things will be done but now its not complete.

  12. Marty says:

    Im kind of a newbie. May i know how exactly can i put this in my wordpress website? and do i need to have any other plugins to install it?
    Kind regards

  13. Gabriel Albors says:

    where do I add the email I want it to be sent to

    and awesome template really

Leave a Reply