https://vnlp.io/js/contact-form.js

1/*
2--------------------------------
3Ajax Contact Form
4--------------------------------
5+ https://github.com/mehedidb/Ajax_Contact_Form
6+ A Simple Ajax Contact Form developed in PHP with HTML5 Form validation.
7+ Has a fallback in jQuery for browsers that do not support HTML5 form validation.
8+ version 1.0.1
9+ Copyright 2016 Mehedi Hasan Nahid
10+ Licensed under the MIT license
11+ https://github.com/mehedidb/Ajax_Contact_Form
12*/
13
14(function ($, window, document, undefined) {
15    'use strict';
16
17    var $form = $('#contact-form');
18
19    $form.submit(function (e) {
20        // remove the error class
21        $('.form-group').removeClass('has-error');
22        $('.help-block').remove();
23
24        // get the form data
25        var formData = {
26            'name' : $('input[name="form-name"]').val(),
27            'email' : $('input[name="form-email"]').val(),
28            'subject' : $('input[name="form-subject"]').val(),
29            'message' : $('textarea[name="form-message"]').val()
30        };
31
32        // process the form
33        $.ajax({
34            type : 'POST',
35            url  : 'process.php',
36            data : formData,
37            dataType : 'json',
38            encode : true
39        }).done(function (data) {
40            // handle errors
41            if (!data.success) {
42                if (data.errors.name) {
43                    $('#name-field').addClass('has-error');
44                    $('#name-field').find('.col-lg-10').append('<span class="help-block">' + data.errors.name + '</span>');
45                }
46
47                if (data.errors.email) {
48                    $('#email-field').addClass('has-error');
49                    $('#email-field').find('.col-lg-10').append('<span class="help-block">' + data.errors.email + '</span>');
50                }
51
52                if (data.errors.subject) {
53                    $('#subject-field').addClass('has-error');
54                    $('#subject-field').find('.col-lg-10').append('<span class="help-block">' + data.errors.subject + '</span>');
55                }
56
57                if (data.errors.message) {
58                    $('#message-field').addClass('has-error');
59                    $('#message-field').find('.col-lg-10').append('<span class="help-block">' + data.errors.message + '</span>');
60                }
61            } else {
62                // display success message
63                $form.html('<div class="alert alert-success">' + data.message + '</div>');
64            }
65        }).fail(function (data) {
66            // for debug
67            console.log(data)
68        });
69
70        e.preventDefault();
71    });
72}(jQuery, window, document));