I recently bought a template which has an included contact form with ajax and validation. I tried to apply my own script to it, but that won't work. It's probably something on the server side (my script). Does anybody see what I am doing wrong?
This is the form on the contact page:
<form class="contact-form" id="contact-form" method="post" action="contact_form/contact_form.php">
<div class="row">
<fieldset class="column column-1-2">
<input class="text-input" name="name" type="text" placeholder="Naam *">
<input class="text-input" name="email" type="text" placeholder="Email *">
<input class="text-input" name="phone" type="text" placeholder="Telefoonnummer">
<input class="text-input" name="subject" type="text" placeholder="Onderwerp">
</fieldset>
<fieldset class="column column-1-2">
<textarea name="message" placeholder="Bericht *"></textarea>
</fieldset>
</div>
<div class="row margin-top-30">
<div class="column column-1-2">
<p>We nemen zo snel mogelijk contact met je op.</p>
</div>
<div class="column column-1-2 align-right">
<input type="hidden" name="action" value="contact_form" />
<div class="row margin-top-20 padding-bottom-20">
<a class="more submit-contact-form" href="#" title="SEND MESSAGE"><span>VERSTUUR</span></a>
</div>
</div>
</div>
</form>
This is the ajax part:
//contact form
if($(".contact-form").length)
{
$(".contact-form").each(function(){
$(this)[0].reset();
});
$(".submit-contact-form").on("click", function(event){
event.preventDefault();
$("#contact-form").submit();
});
}
$(".contact-form").submit(function(event){
event.preventDefault();
var data = $(this).serializeArray();
var self = $(this);
//if($(this).find(".total-cost").length)
// data.push({name: 'total-cost', value: $(this).find(".total-cost").val()});
self.find(".block").block({
message: false,
overlayCSS: {
opacity:'0.3',
"backgroundColor": "#FFF"
}
});
$.ajax({
url: self.attr("action"),
data: data,
type: "post",
dataType: "json",
success: function(json){
self.find(".submit-contact-form, [name='submit'], [name='name'], [name='email'], [name='message']").qtip('destroy');
if(typeof(json.isOk)!="undefined" && json.isOk)
{
if(typeof(json.submit_message)!="undefined" && json.submit_message!="")
{
self.find(".submit-contact-form").qtip(
{
style: {
classes: 'ui-tooltip-success'
},
content: {
text: json.submit_message
},
position: {
my: "right center",
at: "left center"
}
}).qtip('show');
self[0].reset();
self.find(".cost-slider-input").trigger("change");
self.find(".cost-dropdown").selectmenu("refresh");
self.find("input[type='text'], textarea").trigger("focus").trigger("blur");
}
}
else
{
if(typeof(json.submit_message)!="undefined" && json.submit_message!="")
{
self.find(".submit-contact-form").qtip(
{
style: {
classes: 'ui-tooltip-error'
},
content: {
text: json.submit_message
},
position: {
my: "right center",
at: "left center"
}
}).qtip('show');
}
if(typeof(json.error_name)!="undefined" && json.error_name!="")
{
self.find("[name='name']").qtip(
{
style: {
classes: 'ui-tooltip-error'
},
content: {
text: json.error_name
},
position: {
my: "bottom center",
at: "top center"
}
}).qtip('show');
}
if(typeof(json.error_email)!="undefined" && json.error_email!="")
{
self.find("[name='email']").qtip(
{
style: {
classes: 'ui-tooltip-error'
},
content: {
text: json.error_email
},
position: {
my: "bottom center",
at: "top center"
}
}).qtip('show');
}
if(typeof(json.error_message)!="undefined" && json.error_message!="")
{
self.find("[name='message']").qtip(
{
style: {
classes: 'ui-tooltip-error'
},
content: {
text: json.error_message
},
position: {
my: "bottom center",
at: "top center"
}
}).qtip('show');
}
}
self.find(".block").unblock();
}
});
});
The mail script:
<?PHP
require '../PHPMailer/PHPMailerAutoload.php';
$isValid = true;
if(isset($_POST['name']) && isset($_POST['subject']) && isset($_POST['email']) && isset($_POST['message']))
{
$name = $_POST['name'];
$subject = 'Er is een contact aanvraag op website: '.$_POST['subject'];
$email = $_POST['email'];
$message = $_POST['message'];
$phone = $_POST['phone'];
$mail = new PHPMailer;
$mail->From = $email;
$mail->FromName = $name;
$mail->addAddress("info@website.nl"); // Add a recipient
$mail->isHTML(true); // Set email format to HTML
$mail->Subject = $subject;
$texts = 'Er is een aanvraag op de website van website<br /> <br />
<b>Naam:</b> '.$name.'<br />
<b>E-mail adres:</b> '.$email.'<br />
<b>Onderwerp:</b> '.$subject.'<br />
<b>Vragen / Opmerkingen:</b> '.$message.'<br /><br /><br />
';
$handtekening = '
<table border="0" width="100%" cellspacing="0" cellpadding="0" style="font-family:calibri;color: #5C5C5C; font-size:10pt;line-height:22px;">
<tr>
<td width="160" valign="top" style="font-family:calibri;padding-left:10px;padding-top:20px;">
[contents]
</td>
</tr>
<tr>
<td width="160" valign="top" style="font-family:calibri;padding-left:10px;padding-top:20px;">
<br><br>Met vriendelijke groet,<br><br>
Helpdesk<br>
<b>Website</b><br>
<p></p>
</td>
</tr>
</table>
<table height="120" border="0" width="100%" cellspacing="0" cellpadding="0" style="font-family:calibri;color: #5C5C5C; font-size:10pt;line-height:22px;">
<tr>
<td width="250" valign="top" style="font-family:calibri;padding-left:10px;padding-top:20px;border-top: 1px #000000 dotted; border-bottom: 1px #000000 dotted;">
E:
<a href="mailto:info@website.nl" style="font-family:calibri;color: #5C5C5C; text-decoration: none; border-bottom: 1px #5C5C5C dotted;">info@website.nl</a><br>
T:
<a href="tel:0181851859" style="font-family:calibri;color: #5C5C5C; text-decoration: none; border-bottom: 1px #5C5C5C dotted;">(0181) 851 859</a><br>
W:
<a href="http://website.nl" style="font-family:calibri;color: #5C5C5C; text-decoration: none; border-bottom: 1px #5C5C5C dotted;" target="_blank">www.website.nl</a><br>
</td>
<td align="right" style="font-family:calibri;padding-right:10px;padding-top:5px;border-top: 1px #000000 dotted; border-bottom: 1px #000000 dotted;">
<a href="http://website.nl/" target="_blank" title="Ga naar website">
<img src="http://www.website.nl" alt="Ga naar website" style="font-family:calibri;text-align:right;margin:0px;padding:10px 0 10px 0;" border="0" width="232">
</a>
</td>
</tr>
<tr>
<td colspan="2" style="font-family:calibri;color:#a3a3a3;font-size:11px;margin-top:6px;line-height:14px;">
<br>Dit e-mailbericht is uitsluitend bestemd voor de geadresseerde. Als dit bericht niet voor u bestemd is, wordt u vriendelijk verzocht dit aan de afzender te melden. website staat door de elektronische verzending van dit bericht niet in voor de juiste en volledige overbrenging van de inhoud, noch voor tijdige ontvangst daarvan. Voor informatie over website raadpleegt u <a href="http://website.nl" style="font-family:calibri;color: #5C5C5C; text-decoration: none; border-bottom: 1px #5C5C5C dotted;" target="_BLANK">website</a>.<br><br>
</td>
</tr>
</table>';
$contents = preg_replace('/\[contents]/',$texts, $handtekening);
$mail->msgHTML($contents);
$mail->AltBody = $texts;
if(!$mail->send())
{
$isValid = false;
}
$mail = new PHPMailer;
$mail->From = 'info@website.nl';
$mail->FromName = 'website';
$mail->addAddress($email); // Add a recipient
$mail->isHTML(true); // Set email format to HTML
$mail->Subject = 'Bedankt voor uw aanvraag bij website';
$texts = 'Geachte heer/mevrouw '.$naam.',<br /><br />
Hartelijk dank voor uw aanvraag bij website<br />
Wij reageren zo spoedig mogelijk op uw aanvraag.<br /><br />
Uw gegevens worden nooit aan derden ter hand gesteld.
';
$contents = preg_replace('/\[contents]/',$texts, $handtekening);
$mail->msgHTML($contents);
$mail->AltBody = $texts;
if(!$mail->send()) {
$isValid = false;
}
}else
{
$isValid = false;
}
$array = array(
'isValid' => $isValid
);
echo json_encode($array);
The script needs to send two mails. One to the sender as confirmation, and one for the receiver.
The validation is not working. I think the send script has some missing info.
you submit the form with ID contact-form
$("#contact-form").submit();
But handle the submit with
$(".contact-form").submit(function(event){}
Try changing this to
$("#contact-form").submit(function(event){}