File: /home/vsga7hg9xjp3/public_html/wp-content/themes/audi/spare-parts.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Iframe</title>
<!-- CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="box cover" style="background-image: url(img/bg.jpg)">
<div class="container">
<div class="col-xs-12">
<div class="title">
<h1>Spare parts inquiry</h1>
</div>
</div>
<!-- <div class="col-xs-12">
<div class="subTitle">
<p>Thanks to a new language of design and an almost completly new body, the sporty character of the Audi A4 sedan comes into play more than ever: it appears dynamic and powerful whilr attractive and aesthetic at tha same time. Reserve yours below.</p>
</div>
</div> -->
<div class="col-xs-12">
<div class="form">
<form class="customValid">
<div class="row">
<div class="col-sm-12 col-xs-12 col">
<div class="col-title">
<h3>Your contact data</h3>
</div>
</div>
<div class="clearfix"></div>
<div class="col-select col-xs-12 col">
<lable class="fly-label">Title</lable>
<select name="title" class="select" required>
<option value="" disabled selected>Title</option>
<option value="mr" >Mr</option>
<option value="mrs" >Mrs</option>
<option value="miss" >Miss</option>
</select>
</div>
<div class="clearfix"></div>
<div class="col-input col-sm-6 col-xs-12 col">
<lable class="fly-label">First name</lable>
<input class="input" type="text" name="firstname" required>
</div>
<div class="col-input col-sm-6 col-xs-12 col">
<lable class="fly-label">Last name</lable>
<input class="input" type="text" name="lastname" required>
</div>
<div class="clearfix"></div>
<div class="col-input col-sm-6 col-xs-12 col">
<lable class="fly-label">Email address</lable>
<input class="input" type="text" name="email" required>
</div>
<div class="col-input col-sm-6 col-xs-12 col">
<lable class="fly-label">Phone</lable>
<input class="input" type="text" name="phone" required>
</div>
<div class="clearfix"></div>
<div class="col-select col-sm-12 col-xs-12 col">
<lable class="fly-label">Choose service center</lable>
<select name="department" class="select" required>
<option value="" disabled selected>Choose service center</option>
<option value="option1">Audi center Cairo</option>
<option value="option2">Abu Rawash service center</option>
<option value="option3">Alexandria service center</option>
</select>
</div>
<div class="clearfix"></div>
<div class="col-input col-sm-6 col-xs-12 col">
<lable class="fly-label">Chassis number</lable>
<input class="input" type="text" name="chassisNumber" required>
</div>
<div class="col-input col-sm-6 col-xs-12 col">
<lable class="fly-label">Spare parts reference number</lable>
<input class="input" type="text" name="referenceNumber" required>
</div>
<div class="clearfix"></div>
<div class="col-input col-sm-12 col-xs-12 col">
<lable class="fly-label">Your message</lable>
<textarea class="input" rows="3" type="text" name="message" required></textarea>
</div>
<div class="col-xs-12">
<div class="submitWarp">
<button type="submit" class="btnSubmit">Send</button>
</div>
</div>
<div class="col-xs-12">
<div class="thankyou">
<p>Your email has been sent successfully.</p>
</div>
</div>
<div class="col-xs-12">
<div class="footerContent">
<p>Any data provided by you and/or collected and stored in relation to on this website will be used in order to provide requested services, offer customer support, conduct customer surveys and tailor customer information and offers based on your individual needs. For these purposes, the information provided by you may be stored, processed and shared with group companies of the Volkswagen Group. Audi Volkswagen Middle East FZE will treat all information provided by the user on a confidential basis and in accordance with applicable law. By providing such data you agree to the foregoing provisions. Contact: rsvp@audi.avme.ae</p>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- JavaScript plugins -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
$('.form .select').each(function(){
var select = $(this);
if (select.val()) {
select.closest('.col').removeClass('down').addClass('up');
} else{
select.closest('.col').removeClass('up').addClass('down');
}
select.on('change', function() {
if (select.val()) {
select.closest('.col').removeClass('down').addClass('up');
} else{
select.closest('.col').removeClass('up').addClass('down');
}
});
});
$('.form .input').each(function(){
var input = $(this);
if (input.val()) {
input.closest('.col').removeClass('down').addClass('up');
} else{
input.closest('.col').removeClass('up').addClass('down');
}
input.on('change paste keyup', function() {
if (input.val()) {
input.closest('.col').removeClass('down').addClass('up');
} else{
input.closest('.col').removeClass('up').addClass('down');
}
});
});
//Form validation
//Custom role email
if ($('form.customValid').length>0){
jQuery.validator.addMethod("customemail",
function(value, element) {
return /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);
},
"This email address is not valid. Please use a valid email address format such as name@domain.com"
);
}
$("form.customValid").validate({
rules: {
email:{
required: {
depends:function(){
$(this).val($.trim($(this).val()));
return true;
}
},
customemail: true
},
phone:{
//required:true,
number: true,
minlength: 11,
},
},
messages: {
titleOptions: "This field is required. ",
firstname: " Please enter your first name. ",
lastname: " Please enter your last name. ",
email: " Please enter your email address. ",
},
submitHandler: function(form,e) {
//For normal submit
e.preventDefault();
//form.submit();
$("form.customValid .btnSubmit").text('Sending...');
//on sent show this
setTimeout(function(){
$("form.customValid .btnSubmit").text('Sent');
$("form.customValid")[0].reset();
$("form.customValid .thankyou").fadeIn();
}, 4000);
//or put ajax code here
}
});
</script>
</body>
</html>