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.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

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.

<h2 class="title">Wordpress Admin like Login Form with CSS3 and jQuery</h2>

<div class="login">
	<?php
	//add a condition if stat variable is already set
	if(isset($_SESSION['stat']) == 1) : ?>
		<form method="post" action="logout.php"><fieldset>
			<p><?php echo 'Welcome <strong>' . $_SESSION['username'] .''; ?></p>
			<input type="submit" class="submit-button" value="Logout" />
			<input type="hidden" name="task" value="logout" />
		</fieldset></form>
	<?php else : ?>
		<div class="message">
			//this display error and success message
			<?php if($errs != "") { echo '<p class="error">'.$errs.''; } ?>
			<?php if($success != "") { echo '<p class="success">'.$success.''; } ?>
			//this get the query log variable if is set or not.
			<?php if(isset($_GET['log']) != "") { echo '<p class="success">You are now logged out.'; } ?>
		</div>

		<form method="post" action="index.php">
			<p>
				<label for="username">Username<br />
				<input type="text" id="username" name="username" class="input" value="<?php echo (isset($_POST['username']) ? $_POST['username'] : '') ?/>" size="20" tabindex="10" /></label>
			</p>
			<p>
				<label for="password">Password<br />
				<input type="password" id="password" name="password" class="input" value="<?php echo (isset($_POST['password']) ? $_POST['password'] : '') ?/>" size="20" tabindex="20" /></label>
			</p>
			<p class="submit">
				<input type="submit" name="submit" id="submit" class="submit-button" value="Log In" tabindex="100" />
				<input type="hidden" name="task" value="login" />
			</p>
		</form>
	<?php endif; ?>
</div>

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.

<?php
	$errs = '';
	$success = '';

	if(isset($_POST['task']) && $_POST['task']=='login')
	{
		$username = mysql_real_escape_string($_POST['username']);
		$password = mysql_real_escape_string($_POST['password']);

		if( $username == "" || $password == "") {
			$errs = 'Fields are required.';

			//add jquery effect to shake our login form ?>
			<script type="text/javascript">
				$(document).ready(function() {
					$(".login form").effect("shake", { times: 3 }, 64);
				});
			</script>
			<?php
		} else {
			if( $username == "demo" && $password == "demo" ) {
				$_SESSION['username'] = "Demo";
				$_SESSION['password'] = "demo";
				$_SESSION['stat'] = 1; //set status to 1
				$success = 'You\re successfully login.';
			} else {
				$errs = 'Invalid Username or Password.';

				//add jquery effect to shake our login form ?>
				<script type="text/javascript">
					$(document).ready(function() {
						$(".login form").effect("shake", { times: 3 }, 64);
					});
				</script>
				<?php
			}

		}
	}
?>

CSS

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

.login * {
	margin: 0;
	padding: 0;
}
.title{
	font: italic 26px Georgia;
	margin-bottom: 20px;
        margin: auto;
}

.login{
	width: 320px;
	padding: 20px 0 0;
	margin: auto;
}
.login label {
	color: #777;
	font-size: 14px;
	cursor: pointer;
}

.login form {
	margin-left: 8px;
	padding: 24px 20px 46px;
	font-weight: normal;
	background: white;
	border: 1px solid #E5E5E5;

	/* add login box shadow  */
	-moz-box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px;  /*for Mozilla*/
	-webkit-box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px; /*for Chrome and Safari*/
	box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px;
}

.login form .input {
	font-weight: 200;
	font-size: 24px;
	line-height: 1;
	width: 100%;
	padding: 3px;
	margin-top: 2px;
	margin-right: 6px;
	margin-bottom: 16px;
	border: 1px solid #E5E5E5;
	background: #FBFBFB;
	outline: none;

	/* add input box a inset shadow  */
	-moz-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2); /*for Mozilla*/
	-webkit-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2); /*for Chrome and Safari*/
	box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
}

input.submit-button {
	float: right;
	border: 1px solid #298CBA;
	font-weight: bold;
	color: white;
	background: #21759B;
	text-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0;
	padding: 3px 10px;
	cursor: pointer;

	/* add submit button a rounded corner */
	-o-border-radius: 10em;  /*for opera*/
	-khtml-border-radius: 10em;
	-webkit-border-radius: 10em;
	border-radius: 10em;


	/* add background gradient effet */
	/*for Chrome and Safari*/
	background: -webkit-gradient(linear, left top, left bottom, from(#298CBA), to(#217096));

	/*for Mozilla*/
	background: -moz-linear-gradient(top,  #298CBA,  #217096);

	/*for IE*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#298CBA', endColorstr='#217096');

}

input.submit-button:hover { border: 1px solid #000; }

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.