Спасибо сообщение не отображается, когда проходит форма Ajax

Я пытаюсь скрыть обычный контент и показать сообщение с благодарностью после того, как форма отправлена. Однако при отправке формы поля сбрасываются, но сообщение с благодарностью не появляется. Пожалуйста помоги. Я не так хорош с JQuery.

Я также использую фонд abide.js, не знаю, имеет ли это значение или нет.

Вот код Ajax.

$(function() {
// Get the form.
var form = $('#form');

// Get the messages div.
var formMessages = $('#thanks');

// Set up an event listener for the contact form.
$(form).submit(function(event) {
// Stop the browser from submitting the form.
event.preventDefault();

var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
}).done(function(response) {
$('#thanks').show();
$(form).hide();

// Clear the form.
$('#name').val('');
$('#email').val('');
$('#number').val('');
})
});
});

Это код для формы.

<div class="newsletter" id="contact">
<div class="row footer-top">
<div class="large-12 medium-12 columns updates" id="thanks" style="display: none;">
<h4>Thanks! We'll be in touch shortly.</h4>
</div>
<div class=" large-12 medium-12 column updates" id="normal">
<h4>Want more info? Contact us!</h4>
<p>Sign up to stay in touch with what's happening. Don't Worry, we don't spam.</p>
</div>
</div>
<form data-abide id="form" method="post" action="wp-content/themes/myles_custom/mailer.php">
<div class="row">
<div class="large-8 large-centered columns">
<label>
Name:
<input type="text" name="name" id="name" placeholder="Name" value="<?php if(isset($name)){echo htmlspecialchars($name);} ?>" required pattern="[a-zA-Z]+">
</label>
<small class="error">Name is required.</small>
</div>
</div>
<div class="row">
<div class="large-8 large-centered columns">
<label>
Email:
<input type="email" id="email" name="email" placeholder="Email" value="<?php if(isset($email)){echo htmlspecialchars($email);} ?>" required>
</label>
<small class="error">Email is required</small>
</div>
</div>
<div class="row">
<div class="large-8 large-centered columns">
<label>
Number:
<input type="tel" pattern="number" id="number" name="number" placeholder="Name" value="<?php if(isset($number)){echo htmlspecialchars($number);} ?>" required>
</label>
<small class="error">Number is required</small>
</div>
</div>
<div class="row">
<div class="large-8 large-centered columns">
<label>
Campus:
<select id="campus" name="campus">
<option>FSU</option>
<option>FAMU</option>
<option>TCC</option>
</select>
</label>
<small class="error">Campus is required</small>
</div>
</div>
<div id="sucks" style="display: none;">
<label for="address" id="adress_label" style: "display: none;">Address</label>
<input name="address" id="address" type="text" style="display: none;">
</div>
<div class="row">
<div class="large-12 columns" style="text-align: center;">
<button id="submit" type="submit" value="Send">Submit</button>
</div>
</div>
</form>
</div>