WordPress Admin-like Login Form with CSS3 and jQuery

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

  • http://droidgameapk.blogspot.com/p/pocket-god.html pocket god apk

    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.

  • http://www.drebeatsheadphones.org Dre Beats Cheap

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

  • http://afriendshipquotes.blogspot.com/p/poem-for-best-friends.html Friendship Quotes

    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

  • http://www.beatsmonstersale.net Monster Beats Cheap

    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.

  • http://www.beatsmonstersale.net Monster Beats Cheap

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

  • http://downloadfreeandroidgames.blogspot.com/p/draw-something.html draw something apk

    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.

  • http://languagelearneronline.com/free-online-spanish-lessons-for-beginners/ free online spanish lessons for beginners

    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!!

  • http://kgkgfk.me meong

    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!

  • http://sjapwakl.edu jgaiowa

    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.

  • http://ugikkik.edu untue

    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.

  • http://kas2al.me kasor

    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.

  • http://s2akwa.edu dududukkkkkkk

    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!

  • http://bssssa.edu gfjakwai

    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!

  • http://ssm533a.edu dududukkkkkkk

    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!

  • http://www.truereligionoutletuk.com True Religion Outlet UK

    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

    • http://www.sutanaryan.com/ Ryan S

      Hi Mooo,

      Try this setup

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

      Ryan S

  • http://www.smp1genteng.sch.id larjas

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

    • http://www.sutanaryan.com/ Ryan S

      yup np, you can try the script ;)

      Ryan S

  • http://mintik.com/ mintik

    Same :) Just some fast.

  • seoaja