HTML:
<form class="form-horizontal" enctype="multipart/form-data" id="regfrmemail" name="regfrmemail">
<fieldset class="margin-b">
<!-- Form Name -->
<legend><center><h2><b>Registration Form</b></h2></center></legend><br>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="first_name">First Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" id="first_name" placeholder="First Name" class="form-control" type="text" value="" required autofocus >
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="last_name" >Last Name</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="last_name" id="last_name" placeholder="Last Name" class="form-control" value="" required autofocus >
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="address" >Address</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-map-marker"></i></span>
<input name="address" id="address" placeholder="Address" class="form-control" value="" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="address2">Address2</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-map-marker"></i></span>
<input name="address2" id="address2" placeholder="Address2" class="form-control" value="" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="City">City</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-map-marker"></i></span>
<input name="City" id="City" placeholder="City" class="form-control" value="" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="State">State</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-map-marker"></i></span>
<input name="State" id="State" placeholder="State" class="form-control" value="" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="Zip">Zip</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-map-marker"></i></span>
<input name="Zip" id="Zip" placeholder="Zip" class="form-control" value="" type="number">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="hphone">Home Phone</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="hphone" id="hphone" placeholder="(+91)" class="form-control" value="" type="number">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="contact_no">Mobile No</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="contact_no" id="contact_no" placeholder="(639)" class="form-control" value="" type="number">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="form_email">E-Mail</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="email" class="form-control" name="form_email" id="form_email" placeholder="E-Mail Address"value="" required autofocus>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="reqJob">Regarding Job (required)</label>
<div class="col-md-4 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<input name="reqJob" id="reqJob" placeholder="position you applied for" class="form-control" value="" type="text" required autofocus>
</div>
</div>
</div>
<!-- Select Basic -->
<!-- Button -->
<div class="form-group" style="text-align:center">
<input type="submit" class="btn btn-warning glyphicon glyphicon-send" name="submit" id="submit" value="Submit">
</div>
<!-- Success message -->
<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Success!.</div>
</fieldset>
</form>
JS:
$("#regfrmemail").submit(function(event){
event.preventDefault();
$.ajax({
type: "POST",
url: "registration_form.php",
data: $("#regfrmemail").serialize(),
success: function(){
$('.alert-success').removeAttr("success_message");
alert("submitted successfully!!");
document.regfrmemail.reset();
}
});
});
PHP:registration_form.php
<?php
if($_POST){
$fname = $_POST['first_name'];
$lname = $_POST['last_name'];
$address = $_POST['address'];
$address2 = $_POST['address2'];
$city = $_POST['City'];
$state = $_POST['State'];
$zip = $_POST['Zip'];
$hphone = $_POST['hphone'];
$contactno = $_POST['contact_no'];
$email1 = $_POST['form_email'];
$reqJob = $_POST['reqJob'];
$header = "From:".$email1."\r\n";
$header.= "MIME-Version: 1.0\r\n";
$header.= "Content-Type: text/plain; charset=utf-8\r\n";
$header.= "X-Priority: 1\r\n";
$mail = "\n\nName: ".$fname." ".$lname."\n\nAddesss: ".$address."\n".$address2."\n ".$city."\n".$state."\n".$zip."\n\nHome phone: ".$hphone."\n\nMobile phone: ".$contactno."\n\nEmail: ".$email1."\n\nRequired Job: ".$reqJob."\n\n This query submitted from : http://abcindia.com";
//send email
mail("info@abcdef.com", " ".$fname, $mail, $headers);
}
?>
No comments:
Post a Comment