Allereerst dank voor diegene die mij op weg wil helpen. Ik ben bezig met een website en een formulier. Dit formulier roept (correct me if i'm wrong) een JS aan waarin de post staat naar een .php file. Nu had ik al een send.php file en deze aangepast maar krijg 'm niet goed. Of mail geeft geen afzender, of het bericht is niet compleet etc.
HTML
<div <!-- Appointment Form -->
<div class="modal fade" id="appointmentForm">
<div class="modal-dialog container">
<div class="modal-content">
<div class="modal-header"><a href="#" class="appointment" data-toggle="modal" data-target="#appointmentForm"><i class="icon-shape icon"></i><span>Afspraak</span></a>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="icon-close-cross"></i></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<h2>Plan <span class="color">onderhoud of reparatie</span></h2>
<p>Om een afpraak te plannen bij * of vul onderstaand formulier. Wij nemen dan contact met uw op om uw afspraak te bevestigen. </p>
<div class="divider"></div>
<form id="appointment-form" class="contact-form form-horizontal" name="contactform" method="post">
<div id="successAppointment" class="successform">
<p>Uw bericht is succesvol verzonden</p>
</div>
<div id="errorAppointment" class="errorform">
<p>Something went wrong, try refreshing and submitting the form again.</p>
</div>
<h5>Contact information</h5>
<div class="form-inline">
<div>
<input type="text" name="name" class="form-control input-custom" value="" placeholder="First name">
</div>
<div>
<input type="text" name="lastname" class="form-control input-custom" value="" placeholder="Last name">
</div>
</div>
<div class="form-inline">
<div>
<input type="text" name="phone" class="form-control input-custom" value="" placeholder="Phone number">
</div>
<div>
<input type="text" name="email" class="form-control input-custom" value="" placeholder="Your E-mail">
</div>
</div>
<div class="divider"></div>
<h5>Appointment details</h5>
<div class="form-inline">
<div class="datetimepicker-wrap">
<input type="text" name="date" class="form-control input-custom datetimepicker" placeholder="">
</div>
<div class="timepicker-wrap">
<input type="text" name="time" class="form-control input-custom timepicker" placeholder="">
</div>
</div>
<div class="form-inline">
<div>
<input name="autoinfo" type="text" class="form-control input-custom" value="" placeholder="Vehicle Year, Make and Model">
</div>
<div class="form-inline">
<div class="select-wrapper">
<select name="select1" class="input-custom">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
</div>
<div>
<input name="kilometers" type="text" class="form-control input-custom" value="" placeholder="Current Kilometers">
</div>
</div>
</div>
<div class="form-inline">
<textarea name="message" class="form-control textarea-custom" placeholder="Service Required"></textarea>
</div>
<div class="divider"></div>
<div class="row">
<div class="col-sm-4 col-md-3 bootstrap-datetimepicker-widget">
<button type="submit" id="submit" class="btn btn-lg"><span>SUBMIT</span></button>
</div>
<div class="divider visible-xs"></div>
<div class="col-sm-8 col-md-9">
<p><i>Please note that the date and time you requested may not be available. We will contact you to confirm your actual appointment details.</i></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
JS
// appointment form
if (forms.appointmentForm.length) {
var $appointmentForm = forms.appointmentForm;
$appointmentForm.validate({
rules: {
name: {
required: true,
minlength: 2
},
phone: {
required: true,
minlength: 10
},
message: {
required: true,
minlength: 20
},
email: {
required: true,
email: true
}
},
messages: {
name: {
required: "Please enter your name",
minlength: "Your name must consist of at least 2 characters"
},
phone: {
required: "Please enter your number",
minlength: "Your name must have 10 characters"
},
message: {
required: "Please enter message",
minlength: "Your message must consist of at least 20 characters"
},
email: {
required: "Please enter your email"
}
},
submitHandler: function (form) {
$(form).ajaxSubmit({
type: "POST",
data: $(form).serialize(),
url: "process-appointment1.php",
success: function () {
$('#successAppointment').fadeIn();
$('#appointment-form').each(function () {
this.reset();
});
},
error: function () {
$('#appointment-form').fadeTo("slow", 0, function () {
$('#errorAppointment').fadeIn();
});
}
});
}
});
}
PHP
<?php
if($_POST){
$to = '[email protected]';/*Put Your Email Adress Here*/
$subject = $_POST['subject'];
$from_name = $_POST['name'];
$from_email = $_POST['email'];
$phone = $_POST['phone'];
$date = $_POST['date'];
$autoinfo = $_POST['autoinfo'];
$select1 = $_POST['select1'];
$kilometers = $_POST['kilometers'];
$message = $_POST['message'];
$header = "From: $from_name <$from_email>";
mail($to, $subject, $message, $header);
}
?>
