jmahc/contact-form.html

## contact-form.html
<html>
    <head>
        <link rel="stylesheet" href="../css/style.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    </head>
    <body>
        <header></header>
        <div class="container">
            <div class="spinner-overlay">
                <i class="fa fa-cog fa-spin"></i>
            </div>
            <form id="contact-form" method="POST" action="/Forms/Contact-Us?formId=1">
                <div class="row half-row">
                    <div class="left-half">
                        <label for="FirstName">First Name</label>
                        <input type="text" id="FirstName" name="FirstName" placeholder="First Name" data-val="true" required="required" class="required" />
                    </div>
                    <div class="right-half">
                        <label for="LastName">Last Name</label>
                        <input type="text" id="LastName" name="LastName" placeholder="Last Name" data-val="true" required="required" class="required" />
                    </div>
                </div>
                <div class="row half-row">
                    <div class="left-half">
                        <label for="Email">Email</label>
                        <input type="text" id="Email" name="Email" placeholder="Email" data-val="true" required="required" class="required" />
                    </div>
                    <div class="right-half">
                        <label for="Phone">Phone Number</label>
                        <input type="text" id="Phone" name="Phone" placeholder="Phone" data-val="true" required="required" class="required" />
                    </div>
                </div>
                <div class="row">
                    <label for="Address">Address</label>
                    <input type="text" id="Address" name="Address" placeholder="Address" data-val="true" required="required" class="required" />
                </div>
                <div class="row">
                    <label for="Comment">Comments</label>
                    <input type="text" id="Comment" name="Comment" placeholder="Comment" data-val="true" required="required" class="required" />
                </div>
                <div class="row">
                    <input type="Submit" value="Submit" id="contact-submit" class="submit-button" />
                </div>
            </form>
        </div>
        <script src="../js/script.js" type="text/javascript"></script>
        <script type="text/javascript">
            FormSite.contactPage.init();
        </script>
    </body>
</html>

## exampleScript.js
//These three lines go at top of script file
var SiteName = {}; //SiteName can be an abbreviation (e.g. SN for SiteName)
SiteName.development = false;
SiteName.debug = false;

//Can have a global function
SiteName.getQueryParams = function () {
    var params = [];
    var query = window.location.search;
    query = query.slice(1, query.length);
    var nv = query.split('&');
    for (var i = 0; i < nv.length; i++) {
        var q = nv[i].split('=');
        params[q[0]] = q[1];
    }
    return params;
};


//Naming convention is to name the module based on the page
SiteName.pageName = {};

SiteName.pageName.init = function () {
    var t = this;

    t.init_variables();
    t.init_methods();
};

SiteName.pageName.init_variables = function () {
    var t = this;

    //Rule of thumb:
    //t.variableName is for variables while
    //t.$selectorName is for jQuery selectors

    //variables
    t.queryParams = SiteName.getQueryParams(); //from other gist using  'www.example.com?productName=Polo%20Shirt'
    t.parameter = t.queryParams.productName; //returns 'Polo%20Shirt'

    //selectors
    t.$shirtName = $('.shirt-name-text'); //selects the element(s) with class 'shirt-name-text'
    t.$contactForm = $('#contact-form'); //selects the contact form
    t.$fileForm = $('#image-upload-form'); //selects the image upload form
    t.$spin = $(".spinner-overlay"); //the spinner overlay that appears during form submission
};

SiteName.pageName.init_methods = function () {
    var t = this;

    t.fromURL = function () {
        var parsedName = decodeURIComponent(t.parameter.replace(/\+/g, ' ')); //parses 'Polo%20Shirt' to 'Polo Shirt'
        t.$shirtName.val(parsedName); //sets the value of the element with the parsed value, 'Polo Shirt'
    }

    window.onload = t.fromURL; //when page finishes loading, calls the function 'fromUrl'

    $.validator.setDefaults({ //part of the jQuery validator plugin that allows for hidden elements
        ignore: "" //Note: plugin author says 'ignore: []' should be used
    });

    //basic form (e.g. Contact form: Name, Email, Phone, Address, Comment)
    t.$contactForm.submit(function (e) {
        e.preventDefault();
        if ($(this).valid()) { //checks to see if form is valid
            t.$spin.fadeIn(); //if so, spinner fades in while AJAX is 'working'
            $.ajax({
                type: "POST",
                url: $(this).attr("action"),
                data: $(this).serialize(), //serializes form data
                success: function (data) {
                    var $this = t.$contactForm;
                    t.$spin.fadeOut(); //spinner fades away
                    $this.fadeOut(function () {
                        $this.html(data).fadeIn() //returned data (e.g. 'Thank you!') replaces existing form
                    });
                }
                error: function (error) {
                    var $this = t.$fileForm;
                    t.$spin.fadeOut(); //spinner disappears
                    $this.fadeOut(function () {
                        $this.html(error.responseText).fadeIn() //form fades out and the returned error replaces it
                    });
                }
            })
        }
        return false;
    });

    //AJAX for submitting a form with a file upload
    t.$fileForm.on('submit', function (e) {
        e.preventDefault();
        var formData = new FormData(this);
        if ($(this).valid()) { //checks to see if form is valid
            t.$spin.fadeIn(); //spinner loads in while AJAX attempts to POST
            $.ajax({
                type: "POST",
                url: $(this).attr("action"),
                data: formData, //defined above, this form data is not serialized
                cache: false, // necessary for AJAX post with image/file uploads
                contentType: false, //same as above
                processData: false, //same as above
                success: function (data) {
                    var $this = t.$fileForm;
                    t.$spin.fadeOut(); //spinner disappears
                    $this.fadeOut(function () { //the form will fade out and the returned data replaces it
                        $this.html(data).fadeIn()
                    });
                },
                error: function (error) {
                    var $this = t.$fileForm;
                    t.$spin.fadeOut(); //spinner disappears
                    $this.fadeOut(function () {
                        $this.html(error.responseText).fadeIn() //form fades out and the returned error replaces it
                    });
                }
            })
        }
        return false;
    });
};

//to initialize the functions site-wide, in same script file, add:
SiteName.pageName.init();


//otherwise, on a specific page, add:
<script type="text/javascript">
    SiteName.pageName.init();
</script>

## script.js
//These three lines go at top of script file
var FormSite = {};
FormSite.development = false;
FormSite.debug = false;

FormSite.contactPage = {};

FormSite.contactPage.init = function () {
    var t = this;

    t.init_variables();
    t.init_methods();
};

FormSite.contactPage.init_variables = function () {
    var t = this;

    t.$contactForm = $('#contact-form');
    t.$spin = $(".spinner-overlay");
};

FormSite.contactPage.init_methods = function () {
    var t = this;

    $.validator.setDefaults({
        ignore: ""
    });

    t.$contactForm.submit(function (e) {
        e.preventDefault();
        if ($(this).valid()) {
            t.$spin.fadeIn();
            $.ajax({
                type: "POST",
                url: $(this).attr("action"),
                data: $(this).serialize(),
                success: function (data) {
                    var $this = t.$contactForm;
                    t.$spin.fadeOut();
                    $this.fadeOut(function () {
                        $this.html(data).fadeIn()
                    });
                }
                error: function (error) {
                    var $this = t.$fileForm;
                    t.$spin.fadeOut();
                    $this.fadeOut(function () {
                        $this.html(error.responseText).fadeIn()
                    });
                }
            })
        }
        return false;
    });
};


FormSite.imageUploadPage = {};

FormSite.imageUploadPage.init = function () {
    var t = this;

    t.init_variables();
    t.init_methods();
};

FormSite.imageUploadPage.init_variables = function () {
    var t = this;

    t.$fileForm = $('#image-upload-form');
    t.$spin = $(".spinner-overlay");
};

FormSite.imageUploadPage.init_methods = function () {
    var t = this;

    $.validator.setDefaults({
        ignore: ""
    });

    t.$fileForm.on('submit', function (e) {
        e.preventDefault();
        var formData = new FormData(this);
        if ($(this).valid()) { //checks to see if form is valid
            t.$spin.fadeIn(); //spinner loads in while AJAX attempts to POST
            $.ajax({
                type: "POST",
                url: $(this).attr("action"),
                data: formData, //defined above, this form data is not serialized
                cache: false, // necessary for AJAX post with image/file uploads
                contentType: false, //same as above
                processData: false, //same as above
                success: function (data) {
                    var $this = t.$fileForm;
                    t.$spin.fadeOut(); //spinner disappears
                    $this.fadeOut(function () { //the form will fade out and the returned data replaces it
                        $this.html(data).fadeIn()
                    });
                },
                error: function (error) {
                    var $this = t.$fileForm;
                    t.$spin.fadeOut(); //spinner disappears
                    $this.fadeOut(function () {
                        $this.html(error.responseText).fadeIn() //form fades out and the returned error replaces it
                    });
                }
            })
        }
        return false;
    });
};

## upload-form.html
<html>
    <head>
        <link rel="stylesheet" href="../css/style.css">
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    </head>
    <body>
        <header></header>
        <div class="container">
            <div class="spinner-overlay">
                <i class="fa fa-cog fa-spin"></i>
            </div>
            <form id="image-upload-form" method="POST" action="/Forms/Contact-Us?formId=2">
                <div class="row half-row">
                    <div class="left-half">
                        <label for="FirstName">First Name</label>
                        <input type="text" id="FirstName" name="FirstName" placeholder="First Name" data-val="true" required="required" class="required" />
                    </div>
                    <div class="right-half">
                        <label for="LastName">Last Name</label>
                        <input type="text" id="LastName" name="LastName" placeholder="Last Name" data-val="true" required="required" class="required" />
                    </div>
                </div>
                <div class="row half-row">
                    <div class="left-half">
                        <label for="Email">Email</label>
                        <input type="text" id="Email" name="Email" placeholder="Email" data-val="true" required="required" class="required" />
                    </div>
                    <div class="right-half">
                        <label for="Phone">Phone Number</label>
                        <input type="text" id="Phone" name="Phone" placeholder="Phone" data-val="true" required="required" class="required" />
                    </div>
                </div>
                <div class="row">
                    <label for="Address">Address</label>
                    <input type="text" id="Address" name="Address" placeholder="Address" data-val="true" required="required" class="required" />
                </div>
                <div class="row">
                    <label for="Comment">Comments</label>
                    <input type="text" id="Comment" name="Comment" placeholder="Comment" data-val="true" required="required" class="required" />
                </div>
                <div class="row">
                    <input id="image-upload" type="file" name="Filepath" required="required" class="upload-button required">
                </div>
                <div class="row">
                    <input type="Submit" value="Submit" id="contact-submit" class="submit-button" />
                </div>
            </form>
        </div>
        <script src="../js/script.js" type="text/javascript"></script>
        <script type="text/javascript">
            FormSite.imageUploadPage.init();
        </script>
    </body>
</html>
	<html>
	<head>
	<link rel="stylesheet" href="../css/style.css">
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	</head>
	<body>
	<header></header>
	<div class="container">
	<div class="spinner-overlay">
	<i class="fa fa-cog fa-spin"></i>
	</div>
	<form id="contact-form" method="POST" action="/Forms/Contact-Us?formId=1">
	<div class="row half-row">
	<div class="left-half">
	<label for="FirstName">First Name</label>
	<input type="text" id="FirstName" name="FirstName" placeholder="First Name" data-val="true" required="required" class="required" />
	</div>
	<div class="right-half">
	<label for="LastName">Last Name</label>
	<input type="text" id="LastName" name="LastName" placeholder="Last Name" data-val="true" required="required" class="required" />
	</div>
	</div>
	<div class="row half-row">
	<div class="left-half">
	<label for="Email">Email</label>
	<input type="text" id="Email" name="Email" placeholder="Email" data-val="true" required="required" class="required" />
	</div>
	<div class="right-half">
	<label for="Phone">Phone Number</label>
	<input type="text" id="Phone" name="Phone" placeholder="Phone" data-val="true" required="required" class="required" />
	</div>
	</div>
	<div class="row">
	<label for="Address">Address</label>
	<input type="text" id="Address" name="Address" placeholder="Address" data-val="true" required="required" class="required" />
	</div>
	<div class="row">
	<label for="Comment">Comments</label>
	<input type="text" id="Comment" name="Comment" placeholder="Comment" data-val="true" required="required" class="required" />
	</div>
	<div class="row">
	<input type="Submit" value="Submit" id="contact-submit" class="submit-button" />
	</div>
	</form>
	</div>
	<script src="../js/script.js" type="text/javascript"></script>
	<script type="text/javascript">
	FormSite.contactPage.init();
	</script>
	</body>
	</html>
	//These three lines go at top of script file
	var SiteName = {}; //SiteName can be an abbreviation (e.g. SN for SiteName)
	SiteName.development = false;
	SiteName.debug = false;

	//Can have a global function
	SiteName.getQueryParams = function () {
	var params = [];
	var query = window.location.search;
	query = query.slice(1, query.length);
	var nv = query.split('&');
	for (var i = 0; i < nv.length; i++) {
	var q = nv[i].split('=');
	params[q[0]] = q[1];
	}
	return params;
	};


	//Naming convention is to name the module based on the page
	SiteName.pageName = {};

	SiteName.pageName.init = function () {
	var t = this;

	t.init_variables();
	t.init_methods();
	};

	SiteName.pageName.init_variables = function () {
	var t = this;

	//Rule of thumb:
	//t.variableName is for variables while
	//t.$selectorName is for jQuery selectors

	//variables
	t.queryParams = SiteName.getQueryParams(); //from other gist using 'www.example.com?productName=Polo%20Shirt'
	t.parameter = t.queryParams.productName; //returns 'Polo%20Shirt'

	//selectors
	t.$shirtName = $('.shirt-name-text'); //selects the element(s) with class 'shirt-name-text'
	t.$contactForm = $('#contact-form'); //selects the contact form
	t.$fileForm = $('#image-upload-form'); //selects the image upload form
	t.$spin = $(".spinner-overlay"); //the spinner overlay that appears during form submission
	};

	SiteName.pageName.init_methods = function () {
	var t = this;

	t.fromURL = function () {
	var parsedName = decodeURIComponent(t.parameter.replace(/\+/g, ' ')); //parses 'Polo%20Shirt' to 'Polo Shirt'
	t.$shirtName.val(parsedName); //sets the value of the element with the parsed value, 'Polo Shirt'
	}

	window.onload = t.fromURL; //when page finishes loading, calls the function 'fromUrl'

	$.validator.setDefaults({ //part of the jQuery validator plugin that allows for hidden elements
	ignore: "" //Note: plugin author says 'ignore: []' should be used
	});

	//basic form (e.g. Contact form: Name, Email, Phone, Address, Comment)
	t.$contactForm.submit(function (e) {
	e.preventDefault();
	if ($(this).valid()) { //checks to see if form is valid
	t.$spin.fadeIn(); //if so, spinner fades in while AJAX is 'working'
	$.ajax({
	type: "POST",
	url: $(this).attr("action"),
	data: $(this).serialize(), //serializes form data
	success: function (data) {
	var $this = t.$contactForm;
	t.$spin.fadeOut(); //spinner fades away
	$this.fadeOut(function () {
	$this.html(data).fadeIn() //returned data (e.g. 'Thank you!') replaces existing form
	});
	}
	error: function (error) {
	var $this = t.$fileForm;
	t.$spin.fadeOut(); //spinner disappears
	$this.fadeOut(function () {
	$this.html(error.responseText).fadeIn() //form fades out and the returned error replaces it
	});
	}
	})
	}
	return false;
	});

	//AJAX for submitting a form with a file upload
	t.$fileForm.on('submit', function (e) {
	e.preventDefault();
	var formData = new FormData(this);
	if ($(this).valid()) { //checks to see if form is valid
	t.$spin.fadeIn(); //spinner loads in while AJAX attempts to POST
	$.ajax({
	type: "POST",
	url: $(this).attr("action"),
	data: formData, //defined above, this form data is not serialized
	cache: false, // necessary for AJAX post with image/file uploads
	contentType: false, //same as above
	processData: false, //same as above
	success: function (data) {
	var $this = t.$fileForm;
	t.$spin.fadeOut(); //spinner disappears
	$this.fadeOut(function () { //the form will fade out and the returned data replaces it
	$this.html(data).fadeIn()
	});
	},
	error: function (error) {
	var $this = t.$fileForm;
	t.$spin.fadeOut(); //spinner disappears
	$this.fadeOut(function () {
	$this.html(error.responseText).fadeIn() //form fades out and the returned error replaces it
	});
	}
	})
	}
	return false;
	});
	};

	//to initialize the functions site-wide, in same script file, add:
	SiteName.pageName.init();


	//otherwise, on a specific page, add:
	<script type="text/javascript">
	SiteName.pageName.init();
	</script>
	//These three lines go at top of script file
	var FormSite = {};
	FormSite.development = false;
	FormSite.debug = false;

	FormSite.contactPage = {};

	FormSite.contactPage.init = function () {
	var t = this;

	t.init_variables();
	t.init_methods();
	};

	FormSite.contactPage.init_variables = function () {
	var t = this;

	t.$contactForm = $('#contact-form');
	t.$spin = $(".spinner-overlay");
	};

	FormSite.contactPage.init_methods = function () {
	var t = this;

	$.validator.setDefaults({
	ignore: ""
	});

	t.$contactForm.submit(function (e) {
	e.preventDefault();
	if ($(this).valid()) {
	t.$spin.fadeIn();
	$.ajax({
	type: "POST",
	url: $(this).attr("action"),
	data: $(this).serialize(),
	success: function (data) {
	var $this = t.$contactForm;
	t.$spin.fadeOut();
	$this.fadeOut(function () {
	$this.html(data).fadeIn()
	});
	}
	error: function (error) {
	var $this = t.$fileForm;
	t.$spin.fadeOut();
	$this.fadeOut(function () {
	$this.html(error.responseText).fadeIn()
	});
	}
	})
	}
	return false;
	});
	};


	FormSite.imageUploadPage = {};

	FormSite.imageUploadPage.init = function () {
	var t = this;

	t.init_variables();
	t.init_methods();
	};

	FormSite.imageUploadPage.init_variables = function () {
	var t = this;

	t.$fileForm = $('#image-upload-form');
	t.$spin = $(".spinner-overlay");
	};

	FormSite.imageUploadPage.init_methods = function () {
	var t = this;

	$.validator.setDefaults({
	ignore: ""
	});

	t.$fileForm.on('submit', function (e) {
	e.preventDefault();
	var formData = new FormData(this);
	if ($(this).valid()) { //checks to see if form is valid
	t.$spin.fadeIn(); //spinner loads in while AJAX attempts to POST
	$.ajax({
	type: "POST",
	url: $(this).attr("action"),
	data: formData, //defined above, this form data is not serialized
	cache: false, // necessary for AJAX post with image/file uploads
	contentType: false, //same as above
	processData: false, //same as above
	success: function (data) {
	var $this = t.$fileForm;
	t.$spin.fadeOut(); //spinner disappears
	$this.fadeOut(function () { //the form will fade out and the returned data replaces it
	$this.html(data).fadeIn()
	});
	},
	error: function (error) {
	var $this = t.$fileForm;
	t.$spin.fadeOut(); //spinner disappears
	$this.fadeOut(function () {
	$this.html(error.responseText).fadeIn() //form fades out and the returned error replaces it
	});
	}
	})
	}
	return false;
	});
	};