WordPress Admin-like Login Form with CSS3 and jQuery

I was a bit amazed in the WordPress Admin Login Form that shake if the inputted login information is wrong or if the user is not registered, so I decided to create one with the same functionality and I will share you how easy to make this with CSS3 and jQuery.

We know that the Admin Login in WordPress is coded with Ajax to send inputted data to the server without refreshing page but in this tutorial I only use a very simple way to validate inputted data using PHP and shake the login box using jQuery shake effect.

Okay let’s start.

Demo

To view the demo page click Here

Javascript

Add this code in the header of index.php file.

Note
Use both script for the shake effect to work

index.php

This file contains our HTML form and PHP script to accept and validate submitted data.

PHP

This php script read if the form is being submitted and add jQuery code to shake the login form if one of the fields is not filled in or user is not registered.

CSS

To look our login form like in WordPress Admin lets add CSS code.

If you want to send inputted data using Ajax, visit PHP and MySql Comment Form without Refreshing Page with jQuery, which might help you.

Hope you like this tutorial.

by Ryan Sutana

  • Hello There.

    I found your blog using msn. This is an extremely well written article. I will be sure to bookmark it and return to read more of WordPress Admin like Login Form with CSS3 and jQuery | SutanaRyan.com . Thanks for the post. I will definitely return.

  • Your blog has lots associated with useful goods on! Thanks for informing everybody!

  • WordPress Admin like Login Form with CSS3 and jQuery | SutanaRyan.com I was recommended this website by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my difficulty. You’re incredible! Thanks! your article about WordPress Admin like Login Form with CSS3 and jQuery | SutanaRyan.comBest Regards Rolf

  • I came across this web page relating to car accident, astoundingly, that is a wonderful blog. The web site user has been doing a fantastic job, the information this is seriously enlightening. You just simply established who you are a guarenteed audience.

  • Respect to the very good writing. Now i am lucky We’ve applied any time to master this specific.

  • Nice post at WordPress Admin like Login Form with CSS3 and jQuery | SutanaRyan.com. I was checking constantly this blog and I’m impressed! Very helpful info specially the last part 🙂 I care for such info much. I was looking for this certain information for a long time. Thank you and best of luck.

  • An interesting discussion is definitely worth comment. I believe that you ought to write more on this subject matter, it may not be a taboo subject but generally folks don’t talk about such topics. To the next! Kind regards!!

  • WordPress Admin like Login Form with CSS3 and jQuery | SutanaRyan.com Pretty nice post. I just stumbled upon your weblog and wished to say that I’ve truly enjoyed browsing your blog posts. In any case I will be subscribing to your feed and I hope you write again soon!

  • Nice post at WordPress Admin like Login Form with CSS3 and jQuery | SutanaRyan.com. I was checking continuously this blog and I’m impressed! Extremely helpful information particularly the last part 🙂 I care for such information a lot. I was looking for this certain info for a very long time. Thank you and good luck.

  • Nice post at WordPress Admin like Login Form with CSS3 and jQuery | SutanaRyan.com. I was checking constantly this blog and I am impressed! Extremely useful information specially the last part 🙂 I care for such info much. I was looking for this certain information for a very long time. Thank you and best of luck.

  • Great post at WordPress Admin like Login Form with CSS3 and jQuery | SutanaRyan.com. I was checking constantly this blog and I’m impressed! Extremely helpful information specifically the last part 🙂 I care for such info a lot. I was looking for this certain information for a very long time. Thank you and good luck.

  • WordPress Admin like Login Form with CSS3 and jQuery | SutanaRyan.com Pretty nice post. I just stumbled upon your weblog and wished to say that I’ve truly enjoyed browsing your blog posts. After all I’ll be subscribing to your feed and I hope you write again soon!

  • WordPress Admin like Login Form with CSS3 and jQuery | SutanaRyan.com Pretty nice post. I just stumbled upon your blog and wished to say that I’ve really enjoyed surfing around your blog posts. After all I will be subscribing to your rss feed and I hope you write again very soon!

  • WordPress Admin like Login Form with CSS3 and jQuery | SutanaRyan.com Pretty nice post. I just stumbled upon your blog and wished to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your rss feed and I hope you write again soon!

  • Your blog turned up further up with my investigation, now i’m throughout shock with the you will have written and published within this idea. We are right now extending my best investigating thus can not lead farther, notwithstanding, We’ve saved to fav your web website and will likely be time for maintain almost any messages. Purely like it and be grateful for enduring my favorite opinion.

  • mooo

    Hi Ryan
    Where do I have to put the second php script?
    Is it meant to be seperate? or included in index.php?
    When i insert it in index.php right after opening body tag
    the shaking of the form works but i can’t login with “demo”
    thanks in advance for helping
    mooo

    • Hi Mooo,

      Try this setup

      PHP Code +
      HTML Code and of course the Javascript should go in header area.

      Ryan S

  • it’s great bro… thank’s for your sharing. And Also I ask your permition to try this script ;).

    • yup np, you can try the script 😉

      Ryan S

  • Same 🙂 Just some fast.

  • seoaja

    Thats GreatS!!
    Jasa Buat Website Murah