Файл: version 2.0.5/demo-review.html
Строк: 121
<?php
<!DOCTYPE html>
<html>
<head>
<title>Sky Forms Pro</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/sky-forms.css">
<link rel="stylesheet" href="css/sky-forms-orange.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/sky-forms-ie8.css">
<![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.form.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<!--[if lt IE 10]>
<script src="js/jquery.placeholder.min.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/sky-forms-ie8.js"></script>
<![endif]-->
</head>
<body class="bg-orange">
<div class="body body-s">
<form action="demo-review-process.php" method="post" id="sky-form" class="sky-form">
<header>Review form</header>
<fieldset>
<section>
<label class="input">
<i class="icon-append fa fa-user"></i>
<input type="text" name="name" id="name" placeholder="Your name">
</label>
</section>
<section>
<label class="input">
<i class="icon-append fa fa-envelope-o"></i>
<input type="email" name="email" id="email" placeholder="Your e-mail">
</label>
</section>
<section>
<label class="label"></label>
<label class="textarea">
<i class="icon-append fa fa-comment"></i>
<textarea rows="3" name="review" id="review" placeholder="Text of the review"></textarea>
</label>
</section>
<section>
<div class="rating">
<input type="radio" name="quality" value="5" id="quality-5">
<label for="quality-5"><i class="fa fa-star"></i></label>
<input type="radio" name="quality" value="4" id="quality-4">
<label for="quality-4"><i class="fa fa-star"></i></label>
<input type="radio" name="quality" value="3" id="quality-3">
<label for="quality-3"><i class="fa fa-star"></i></label>
<input type="radio" name="quality" value="2" id="quality-2">
<label for="quality-2"><i class="fa fa-star"></i></label>
<input type="radio" name="quality" value="1" id="quality-1">
<label for="quality-1"><i class="fa fa-star"></i></label>
Quality of the product
</div>
<div class="rating">
<input type="radio" name="reliability" value="5" id="reliability-5">
<label for="reliability-5"><i class="fa fa-star"></i></label>
<input type="radio" name="reliability" value="4" id="reliability-4">
<label for="reliability-4"><i class="fa fa-star"></i></label>
<input type="radio" name="reliability" value="3" id="reliability-3">
<label for="reliability-3"><i class="fa fa-star"></i></label>
<input type="radio" name="reliability" value="2" id="reliability-2">
<label for="reliability-2"><i class="fa fa-star"></i></label>
<input type="radio" name="reliability" value="1" id="reliability-1">
<label for="reliability-1"><i class="fa fa-star"></i></label>
Reliability of the product
</div>
<div class="rating">
<input type="radio" name="overall" value="5" id="overall-5">
<label for="overall-5"><i class="fa fa-star"></i></label>
<input type="radio" name="overall" value="4" id="overall-4">
<label for="overall-4"><i class="fa fa-star"></i></label>
<input type="radio" name="overall" value="3" id="overall-3">
<label for="overall-3"><i class="fa fa-star"></i></label>
<input type="radio" name="overall" value="2" id="overall-2">
<label for="overall-2"><i class="fa fa-star"></i></label>
<input type="radio" name="overall" value="1" id="overall-1">
<label for="overall-1"><i class="fa fa-star"></i></label>
Overall rating
</div>
</section>
</fieldset>
<footer>
<button type="submit" class="button">Submit a review</button>
</footer>
<div class="message">
<i class="fa fa-check"></i>
<p>Your review was successfully sent!</p>
</div>
</form>
</div>
<script type="text/javascript">
$(function()
{
// Validation
$("#sky-form").validate(
{
// Rules for form validation
rules:
{
name:
{
required: true
},
email:
{
required: true,
email: true
},
review:
{
required: true,
minlength: 20
},
quality:
{
required: true
},
reliability:
{
required: true
},
overall:
{
required: true
}
},
// Messages for form validation
messages:
{
name:
{
required: 'Please enter your name'
},
email:
{
required: 'Please enter your email address',
email: 'Please enter a VALID email address'
},
review:
{
required: 'Please enter your review'
},
quality:
{
required: 'Please rate quality of the product'
},
reliability:
{
required: 'Please rate reliability of the product'
},
overall:
{
required: 'Please rate the product'
}
},
// Ajax form submition
submitHandler: function(form)
{
$(form).ajaxSubmit(
{
beforeSend: function()
{
$('#sky-form button[type="submit"]').attr('disabled', true);
},
success: function()
{
$("#sky-form").addClass('submited');
}
});
},
// Do not change code below
errorPlacement: function(error, element)
{
error.insertAfter(element.parent());
}
});
});
</script>
</body>
</html>
?>