Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Initial commit

  • Loading branch information...
commit 5555748482df134c776e8b36c965af525181bb73 1 parent b6091d4
Robert DeSimone authored
12 README.md
View
@@ -1,4 +1,14 @@
jquery.contactForm
==================
-A self-contained jQuery contact form plug-in, written in CoffeeScript.
+A self-contained jQuery contact form plug-in, written in CoffeeScript.
+
+Features:
+ * Optionally uses [Tipsy](http://onehackoranother.com/projects/jquery/tipsy/) for validation messages (if already loaded)
+ * Fully self-contained - just .contactForm() an element and all child elements will be created.
+ * .destroy() method allows hooking for use by other plug-ins (like [fancyBox](http://fancyapps.com/fancybox/))
+ * Produces nice JSON output, has many overrides for customizing text and classes
+
+TODO:
+------------------
+ * Fix rendering bug with Android browser (have not tested other mobile browsers)
190 jquery.contactForm.coffee
View
@@ -0,0 +1,190 @@
+(($) ->
+ settings =
+ validate: true
+ debug: false
+ responseHeader: "Thank You!"
+ responseMsg: "Your contact information and message has been sent. We will get back to you soon!"
+ contactFormHeader: "Contact Us"
+ contactFormMsg: "Please use this form to contact us at your convenience."
+ preferredContactMethods: [ "Choose a contact method", "Phone", "E-mail" ]
+ postUrl: "/Home/PostContactUs"
+ maxNameLength: 100
+ dontSend: false
+
+ createInput = (parent, labelText, namePrefix, inputType = "text") ->
+ labelDiv = $("<div />",
+ class: "label"
+ )
+ label = $("<label />",
+ text: labelText
+ ).appendTo labelDiv
+
+ parent.append labelDiv
+
+ inputDiv = $("<div />",
+ class: "input"
+ )
+
+ input = ""
+
+ switch inputType
+ when "select"
+ input = $("<select />",
+ type: inputType
+ val: ""
+ name: namePrefix + "Input"
+ )
+ populateOptions($(input), settings.preferredContactMethods)
+ when "textarea"
+ input = $("<textarea />",
+ type: inputType
+ rows: 10
+ val: ""
+ name: namePrefix + "Input"
+ 'data-val-text': labelText + " is not valid"
+ )
+ when "button"
+ input = $("<input />",
+ type: "button"
+ val: "Submit"
+ name: namePrefix + "Input"
+ )
+ else
+ input = $("<input />",
+ type: inputType
+ val: ""
+ class: 'required'
+ 'data-val-text': labelText + " is not valid"
+ name: namePrefix + "Input"
+ )
+
+
+ input.appendTo inputDiv
+ parent.append inputDiv
+ return input
+
+
+ populateOptions = (parent, options) ->
+ parent.append $("<option>" + option + "</option>", value: option) for option in options
+
+ createHeading = (parent, headerText, message) ->
+ responseDiv = $("<div class='message-body-response-header' />")
+
+ header = $("<h1>" + headerText + "</h1>")
+ responseText = $("<p>" + message + "</p>")
+
+ header.appendTo responseDiv
+ responseText.appendTo responseDiv
+
+ responseDiv.appendTo parent
+
+ return responseDiv
+
+ methods =
+ init: (options) ->
+ console?.log "Preparing contactForm"
+ @each ->
+ thisRef = $(@)
+
+ form = $("<form>",
+ class: "contactForm"
+ method: "get"
+ action: ""
+ )
+ settings = $.extend settings, options
+
+ contactFormHead = createHeading(thisRef, settings.contactFormHeader, settings.contactFormMsg)
+ responseHead = createHeading(thisRef, settings.responseHeader, settings.responseMsg)
+ responseHead.hide()
+ nameInput = createInput(form, "Name", "name")
+ emailInput = createInput(form, "Email", "email")
+ phoneInput = createInput(form, "Phone", "phone")
+ preferredContactMethodInput = createInput(form, "Contact me via", "preferredContact", "select")
+ subjectInput = createInput(form, "Subject", "subject")
+ messageInput = createInput(form, "Message", "message", "textarea")
+ submitInput = createInput(form, "", "submit", "button")
+ form.appendTo $(@)
+
+ submitInput.click ->
+ # Validation method would go here
+ return unless settings.validate and formIsValid form
+ postData =
+ ContactName: nameInput.val()
+ ContactEmail: emailInput.val()
+ ContactPhone: phoneInput.val()
+ ContactVia: preferredContactMethodInput.val()
+ ContactSubject: subjectInput.val()
+ ContactMessage: messageInput.val()
+
+ console?.log JSON.stringify(postData) if options.debug
+ form.hide()
+ contactFormHead.hide()
+ responseHead.show()
+
+ if !settings.dontSend
+ $.ajax settings.postUrl,
+ type: 'POST'
+ dataType: 'json'
+ data: postData
+
+ destroy: () ->
+ console?.log "Removing"
+ @find('a').each (index, element) =>
+ $(element).tipsy "hide"
+ @empty()
+
+ formIsValid = (form) ->
+ invalid = 0
+ form.find('input, textarea').each (index, element) =>
+
+ thisInput = $(element)
+ thisInputInvalid = false
+
+ if $.fn.tipsy
+ tipsyDiv = $('body').find('div.tipsy-inner:contains("' + thisInput.attr('data-val-text') + '")')
+ if tipsyDiv
+ tipsyDiv.parent().remove()
+
+ switch thisInput.attr('name')
+ when "nameInput", "subjectInput", "messageInput"
+ if thisInput.val().length < 2 or !/[A-Za-z0-9'].*/.test(thisInput.val())
+ invalid++
+ thisInputInvalid = true
+ when "phoneInput"
+ phoneVal = thisInput.val().replace(/[\+\(\)\-x\s]/g, '')
+ if phoneVal and isNaN phoneVal
+ invalid++
+ thisInputInvalid = true
+ when "emailInput"
+ emailRe = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+ if thisInput.val().length < 6 or !emailRe.test(thisInput.val())
+ invalid++
+ thisInputInvalid = true
+
+ if thisInputInvalid
+ valElem = $("<a />",
+ title: thisInput.attr('data-val-text')
+ href: "#"
+ )
+ thisInput.after(valElem)
+ if $.fn.tipsy
+ valElem.tipsy
+ trigger: 'manual'
+ gravity: 'w'
+ fade: true
+ valElem.tipsy "show"
+
+
+
+ if invalid > 0 then return false else return true
+
+ $.fn.contactForm = (method) ->
+ if methods[method]
+ methods[method].apply this, Array.prototype.slice.call arguments, 1
+ else if typeof method is 'object' or !method
+ methods.init.apply this, arguments
+ else
+ $.error "jQuery.pluginName: Method #{ method } does not exist on jQuery.pluginName"
+ return
+)(jQuery)
+
230 jquery.contactForm.js
View
@@ -0,0 +1,230 @@
+// Generated by CoffeeScript 1.4.0
+(function() {
+
+ (function($) {
+ var createHeading, createInput, formIsValid, methods, populateOptions, settings;
+ settings = {
+ validate: true,
+ debug: false,
+ responseHeader: "Thank You!",
+ responseMsg: "Your contact information and message has been sent. We will get back to you soon!",
+ contactFormHeader: "Contact Us",
+ contactFormMsg: "Please use this form to contact us at your convenience.",
+ preferredContactMethods: ["Choose a contact method", "Phone", "E-mail"],
+ postUrl: "/Home/PostContactUs",
+ maxNameLength: 100,
+ dontSend: false
+ };
+ createInput = function(parent, labelText, namePrefix, inputType) {
+ var input, inputDiv, label, labelDiv;
+ if (inputType == null) {
+ inputType = "text";
+ }
+ labelDiv = $("<div />", {
+ "class": "label"
+ });
+ label = $("<label />", {
+ text: labelText
+ }).appendTo(labelDiv);
+ parent.append(labelDiv);
+ inputDiv = $("<div />", {
+ "class": "input"
+ });
+ input = "";
+ switch (inputType) {
+ case "select":
+ input = $("<select />", {
+ type: inputType,
+ val: "",
+ name: namePrefix + "Input"
+ });
+ populateOptions($(input), settings.preferredContactMethods);
+ break;
+ case "textarea":
+ input = $("<textarea />", {
+ type: inputType,
+ rows: 10,
+ val: "",
+ name: namePrefix + "Input",
+ 'data-val-text': labelText + " is not valid"
+ });
+ break;
+ case "button":
+ input = $("<input />", {
+ type: "button",
+ val: "Submit",
+ name: namePrefix + "Input"
+ });
+ break;
+ default:
+ input = $("<input />", {
+ type: inputType,
+ val: "",
+ "class": 'required',
+ 'data-val-text': labelText + " is not valid",
+ name: namePrefix + "Input"
+ });
+ }
+ input.appendTo(inputDiv);
+ parent.append(inputDiv);
+ return input;
+ };
+ populateOptions = function(parent, options) {
+ var option, _i, _len, _results;
+ _results = [];
+ for (_i = 0, _len = options.length; _i < _len; _i++) {
+ option = options[_i];
+ _results.push(parent.append($("<option>" + option + "</option>", {
+ value: option
+ })));
+ }
+ return _results;
+ };
+ createHeading = function(parent, headerText, message) {
+ var header, responseDiv, responseText;
+ responseDiv = $("<div class='message-body-response-header' />");
+ header = $("<h1>" + headerText + "</h1>");
+ responseText = $("<p>" + message + "</p>");
+ header.appendTo(responseDiv);
+ responseText.appendTo(responseDiv);
+ responseDiv.appendTo(parent);
+ return responseDiv;
+ };
+ methods = {
+ init: function(options) {
+ if (typeof console !== "undefined" && console !== null) {
+ console.log("Preparing contactForm");
+ }
+ return this.each(function() {
+ var contactFormHead, emailInput, form, messageInput, nameInput, phoneInput, preferredContactMethodInput, responseHead, subjectInput, submitInput, thisRef;
+ thisRef = $(this);
+ form = $("<form>", {
+ "class": "contactForm",
+ method: "get",
+ action: ""
+ });
+ settings = $.extend(settings, options);
+ contactFormHead = createHeading(thisRef, settings.contactFormHeader, settings.contactFormMsg);
+ responseHead = createHeading(thisRef, settings.responseHeader, settings.responseMsg);
+ responseHead.hide();
+ nameInput = createInput(form, "Name", "name");
+ emailInput = createInput(form, "Email", "email");
+ phoneInput = createInput(form, "Phone", "phone");
+ preferredContactMethodInput = createInput(form, "Contact me via", "preferredContact", "select");
+ subjectInput = createInput(form, "Subject", "subject");
+ messageInput = createInput(form, "Message", "message", "textarea");
+ submitInput = createInput(form, "", "submit", "button");
+ form.appendTo($(this));
+ return submitInput.click(function() {
+ var postData;
+ if (!(settings.validate && formIsValid(form))) {
+ return;
+ }
+ postData = {
+ ContactName: nameInput.val(),
+ ContactEmail: emailInput.val(),
+ ContactPhone: phoneInput.val(),
+ ContactVia: preferredContactMethodInput.val(),
+ ContactSubject: subjectInput.val(),
+ ContactMessage: messageInput.val()
+ };
+ if (options.debug) {
+ if (typeof console !== "undefined" && console !== null) {
+ console.log(JSON.stringify(postData));
+ }
+ }
+ form.hide();
+ contactFormHead.hide();
+ responseHead.show();
+ if (!settings.dontSend) {
+ return $.ajax(settings.postUrl, {
+ type: 'POST',
+ dataType: 'json',
+ data: postData
+ });
+ }
+ });
+ });
+ },
+ destroy: function() {
+ var _this = this;
+ if (typeof console !== "undefined" && console !== null) {
+ console.log("Removing");
+ }
+ this.find('a').each(function(index, element) {
+ return $(element).tipsy("hide");
+ });
+ return this.empty();
+ }
+ };
+ formIsValid = function(form) {
+ var invalid,
+ _this = this;
+ invalid = 0;
+ form.find('input, textarea').each(function(index, element) {
+ var emailRe, phoneVal, thisInput, thisInputInvalid, tipsyDiv, valElem;
+ thisInput = $(element);
+ thisInputInvalid = false;
+ if ($.fn.tipsy) {
+ tipsyDiv = $('body').find('div.tipsy-inner:contains("' + thisInput.attr('data-val-text') + '")');
+ if (tipsyDiv) {
+ tipsyDiv.parent().remove();
+ }
+ }
+ switch (thisInput.attr('name')) {
+ case "nameInput":
+ case "subjectInput":
+ case "messageInput":
+ if (thisInput.val().length < 2 || !/[A-Za-z0-9'].*/.test(thisInput.val())) {
+ invalid++;
+ thisInputInvalid = true;
+ }
+ break;
+ case "phoneInput":
+ phoneVal = thisInput.val().replace(/[\+\(\)\-x\s]/g, '');
+ if (phoneVal && isNaN(phoneVal)) {
+ invalid++;
+ thisInputInvalid = true;
+ }
+ break;
+ case "emailInput":
+ emailRe = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+ if (thisInput.val().length < 6 || !emailRe.test(thisInput.val())) {
+ invalid++;
+ thisInputInvalid = true;
+ }
+ }
+ if (thisInputInvalid) {
+ valElem = $("<a />", {
+ title: thisInput.attr('data-val-text'),
+ href: "#"
+ });
+ thisInput.after(valElem);
+ if ($.fn.tipsy) {
+ valElem.tipsy({
+ trigger: 'manual',
+ gravity: 'w',
+ fade: true
+ });
+ return valElem.tipsy("show");
+ }
+ }
+ });
+ if (invalid > 0) {
+ return false;
+ } else {
+ return true;
+ }
+ };
+ $.fn.contactForm = function(method) {
+ if (methods[method]) {
+ return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+ } else if (typeof method === 'object' || !method) {
+ return methods.init.apply(this, arguments);
+ } else {
+ return $.error("jQuery.pluginName: Method " + method + " does not exist on jQuery.pluginName");
+ }
+ };
+ })(jQuery);
+
+}).call(this);
1  jquery.contactForm.min.js
View
@@ -0,0 +1 @@
+(function(){(function($){var createHeading,createInput,formIsValid,methods,populateOptions,settings;settings={validate:true,debug:false,responseHeader:"Thank You!",responseMsg:"Your contact information and message has been sent. We will get back to you soon!",contactFormHeader:"Contact Us",contactFormMsg:"Please use this form to contact us at your convenience.",preferredContactMethods:["Choose a contact method","Phone","E-mail"],postUrl:"/Home/PostContactUs",maxNameLength:100,dontSend:false};createInput=function(parent,labelText,namePrefix,inputType){var input,inputDiv,label,labelDiv;if(inputType==null){inputType="text"}labelDiv=$("<div />",{"class":"label"});label=$("<label />",{text:labelText}).appendTo(labelDiv);parent.append(labelDiv);inputDiv=$("<div />",{"class":"input"});input="";switch(inputType){case"select":input=$("<select />",{type:inputType,val:"",name:namePrefix+"Input"});populateOptions($(input),settings.preferredContactMethods);break;case"textarea":input=$("<textarea />",{type:inputType,rows:10,val:"",name:namePrefix+"Input","data-val-text":labelText+" is not valid"});break;case"button":input=$("<input />",{type:"button",val:"Submit",name:namePrefix+"Input"});break;default:input=$("<input />",{type:inputType,val:"","class":"required","data-val-text":labelText+" is not valid",name:namePrefix+"Input"})}input.appendTo(inputDiv);parent.append(inputDiv);return input};populateOptions=function(parent,options){var option,_i,_len,_results;_results=[];for(_i=0,_len=options.length;_i<_len;_i++){option=options[_i];_results.push(parent.append($("<option>"+option+"</option>",{value:option})))}return _results};createHeading=function(parent,headerText,message){var header,responseDiv,responseText;responseDiv=$("<div class='message-body-response-header' />");header=$("<h1>"+headerText+"</h1>");responseText=$("<p>"+message+"</p>");header.appendTo(responseDiv);responseText.appendTo(responseDiv);responseDiv.appendTo(parent);return responseDiv};methods={init:function(options){if(typeof console!=="undefined"&&console!==null){console.log("Preparing contactForm")}return this.each(function(){var contactFormHead,emailInput,form,messageInput,nameInput,phoneInput,preferredContactMethodInput,responseHead,subjectInput,submitInput,thisRef;thisRef=$(this);form=$("<form>",{"class":"contactForm",method:"get",action:""});settings=$.extend(settings,options);contactFormHead=createHeading(thisRef,settings.contactFormHeader,settings.contactFormMsg);responseHead=createHeading(thisRef,settings.responseHeader,settings.responseMsg);responseHead.hide();nameInput=createInput(form,"Name","name");emailInput=createInput(form,"Email","email");phoneInput=createInput(form,"Phone","phone");preferredContactMethodInput=createInput(form,"Contact me via","preferredContact","select");subjectInput=createInput(form,"Subject","subject");messageInput=createInput(form,"Message","message","textarea");submitInput=createInput(form,"","submit","button");form.appendTo($(this));return submitInput.click(function(){var postData;if(!(settings.validate&&formIsValid(form))){return}postData={ContactName:nameInput.val(),ContactEmail:emailInput.val(),ContactPhone:phoneInput.val(),ContactVia:preferredContactMethodInput.val(),ContactSubject:subjectInput.val(),ContactMessage:messageInput.val()};if(options.debug){if(typeof console!=="undefined"&&console!==null){console.log(JSON.stringify(postData))}}form.hide();contactFormHead.hide();responseHead.show();if(!settings.dontSend){return $.ajax(settings.postUrl,{type:"POST",dataType:"json",data:postData})}})})},destroy:function(){var _this=this;if(typeof console!=="undefined"&&console!==null){console.log("Removing")}this.find("a").each(function(index,element){return $(element).tipsy("hide")});return this.empty()}};formIsValid=function(form){var invalid,_this=this;invalid=0;form.find("input, textarea").each(function(index,element){var emailRe,phoneVal,thisInput,thisInputInvalid,tipsyDiv,valElem;thisInput=$(element);thisInputInvalid=false;if($.fn.tipsy){tipsyDiv=$("body").find('div.tipsy-inner:contains("'+thisInput.attr("data-val-text")+'")');if(tipsyDiv){tipsyDiv.parent().remove()}}switch(thisInput.attr("name")){case"nameInput":case"subjectInput":case"messageInput":if(thisInput.val().length<2||!/[A-Za-z0-9'].*/.test(thisInput.val())){invalid++;thisInputInvalid=true}break;case"phoneInput":phoneVal=thisInput.val().replace(/[\+\(\)\-x\s]/g,"");if(phoneVal&&isNaN(phoneVal)){invalid++;thisInputInvalid=true}break;case"emailInput":emailRe=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;if(thisInput.val().length<6||!emailRe.test(thisInput.val())){invalid++;thisInputInvalid=true}}if(thisInputInvalid){valElem=$("<a />",{title:thisInput.attr("data-val-text"),href:"#"});thisInput.after(valElem);if($.fn.tipsy){valElem.tipsy({trigger:"manual",gravity:"w",fade:true});return valElem.tipsy("show")}}});if(invalid>0){return false}else{return true}};$.fn.contactForm=function(method){if(methods[method]){return methods[method].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof method==="object"||!method){return methods.init.apply(this,arguments)}else{return $.error("jQuery.pluginName: Method "+method+" does not exist on jQuery.pluginName")}}}})(jQuery)}).call(this);
Please sign in to comment.
Something went wrong with that request. Please try again.