I have a contact form that I submit via jQuery. It works perfectly on HTML/PHP/JS template, but when I use it on a WordPress it doesn't work fine.
The form is submited, but the jquery code inside the submit function is like doesn't exit. It doesn't retrieve any error but the loader doesn`t appear and jquery validation doesn't occurs:
<form method="post" action="<?php echo get_template_directory_uri() . '/templates/contact.php' ?>" name="contactform" id="contactform">
<div class="col-sm-6">
<fieldset>
<input name="name" type="text" id="name" size="30" value="" placeholder="Name" />
<br />
<input name="email" type="text" id="email" size="30" value="" placeholder="Email" />
<br />
<input name="phone" type="text" id="phone" size="30" value="" placeholder="Phone" />
<br />
</fieldset>
</div>
<div class="col-sm-6">
<fieldset>
<textarea name="comments" cols="40" rows="8" id="comments" placeholder="Message"></textarea>
<button type="submit" class="btn btn-green-border btn-lg" id="submit" value="submit">Send Message</button>
</fieldset>
</div>
</form>
This is the jQuery:
// Send email
jQuery('#contactform').submit(function ($) {
var action = $(this).attr('action');
$("#message").slideUp(750, function () {
$('#message').hide();
$('#submit')
.after('<img src="images/loader.gif" class="loader" />')
.attr('disabled', 'disabled');
$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
phone: $('#phone').val(),
comments: $('#comments').val(),
verify: $('#verify').val()
},
function (data) {
document.getElementById('message').innerHTML = data;
$('#message').slideDown('slow');
$('#contactform img.loader').fadeOut('slow', function () {
$(this).remove()
});
$('#submit').removeAttr('disabled');
if (data.match('success') != null) $('#contactform').slideUp('slow');
}
);
});
return false;
});
What can be the problem?
