https://dlhtml.netlify.app/assets/js/contact.js

1/*
2*
3* Contact JS
4* @DynamicLayers
5*/
6$(function() {
7    // Get the form.
8    var form = $('#ajax_contact');
9
10    // Get the messages div.
11    var formMessages = $('#form-messages');
12
13    // Set up an event listener for the contact form.
14	$(form).submit(function(event) {
15		// Stop the browser from submitting the form.
16		event.preventDefault();
17
18		// Serialize the form data.
19		var formData = $(form).serialize();
20		// Submit the form using AJAX.
21		$.ajax({
22			type: 'POST',
23			url: $(form).attr('action'),
24			data: formData
25		})
26		.done(function(response) {
27			// Make sure that the formMessages div has the 'success' class.
28			$(formMessages).removeClass('alert-danger');
29			$(formMessages).addClass('alert-success');
30
31			// Set the message text.
32			$(formMessages).text(response);
33
34			// Clear the form.
35			$('#firstname').val('');
36			$('#lastname').val('');
37			$('#email').val('');
38			$('#phone').val('');
39			$('#message').val('');
40		})
41		.fail(function(data) {
42			// Make sure that the formMessages div has the 'error' class.
43			$(formMessages).removeClass('alert-success');
44			$(formMessages).addClass('alert-danger');
45
46			// Set the message text.
47			if (data.responseText !== '') {
48				$(formMessages).text(data.responseText);
49			} else {
50				$(formMessages).text('Oops! An error occured and your message could not be sent.');
51			}
52		});
53
54	});
55
56});