https://mtatradeoftheday.com/wp-content/themes/mtatradeoftheday/jquery.agora-contact-form.js

1/**
2 * Agora Contact Form v0.0.1
3 *
4 * This script makes it easy to add a customizable contact form to
5 * your website that sends customer questions and comments to
6 * Customer Service in a structured, easy-to-manage format.
7 *
8 * You can see an example of how to use it in the example.html file.
9 *
10 * It depends on jQuery for DOM manipulation, but you could probably
11 * get by with something lighter like Zepto or Angular's Jqlite.
12 * 
13 * 
14 * Legal Stuffs
15 * ------------
16 * 
17 * This is free and open source, and comes with absolutely no warranty
18 * whatsoever. Use at your own risk.
19 * 
20 * @author    Derek Conjar <[email protected]>
21 * @copyright The Oxford Club 2014
22 * @license   http://opensource.org/licenses/MIT
23 *
24 * @todo  Add client-side form validation
25 * @todo  Maybe provide feedback when options are missing?
26 */
27
28;(function (window) {
29
30  var $ = window.jQuery;
31
32  /**
33   * Construct the contact form
34   * @param {object} options
35   */
36  var AgoraContactForm = function (opts) {
37    this.redirect     = opts.redirect;     // Redirect here onsubmit 
38    this.website      = opts.email;        // i.e. "oxfordclub"
39    this.requestTypes = opts.requestTypes; // see example.html
40    this.service      = opts.service;      // see example.html
41    this.includeService  = opts.includeService;  // include name fields?
42    this.includeName  = opts.includeName;  // include name fields?
43    this.includePhone = opts.includePhone; // include phone fields?
44    this.selector     = opts.selector;     // jQuery selector for form
45    this.action       = opts.action;       // form action URI
46
47    // Now let's add the contact form to the page based on the values
48    // provided in the opts object.
49
50    this.addFormAction();
51    this.addFormMethod();
52    
53    this.addEmailField();
54    this.addSeparator();
55
56    if (this.includeName === true) {
57      this.addNameFields();
58      this.addSeparator();
59    }
60
61    if (this.includePhone === true) {
62      this.addPhoneField();
63      this.addSeparator();
64    }
65
66    this.addRequestTypes();
67    // this.addSeparator();
68
69    if (this.includeService === true) {
70      this.addServices();
71      // this.addSeparator();
72    }
73
74    this.addMessageField();
75    // this.addSeparator();
76
77    this.addHiddenField('website',      this.website);
78    this.addHiddenField('redirect_url', this.redirect);
79
80    this.addSubmitButton();
81  }
82
83
84  //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
85  //
86  // These "impure methods" take no params and return nothing.
87  // 
88  // They are responsible for taking form info provided via the
89  // "opts" object, and constructing the form via DOM manipulation.
90  //
91  //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
92
93  /**
94   * Add the form action based on the provided "action" option
95   */
96  AgoraContactForm.prototype.addFormAction = function () {
97    $(this.selector).attr('action', this.action);
98  }
99
100  /**
101   * Add the form method
102   */
103  AgoraContactForm.prototype.addFormMethod = function () {
104    $(this.selector).attr('method', 'post');
105  }
106
107  /**
108   * Create the email address field and append it to the form.
109   */
110  AgoraContactForm.prototype.addEmailField = function () {
111    var email = this.textField('email', 'Email Address');
112    
113    this.add(email);
114    email.attr('placeholder', 'Email');
115    email.attr('class', 'form-control form-control-lg');
116  }
117
118  /**
119   * Create the firstname and lastname fields (including labels)
120   * Append them to the form.
121   */
122  AgoraContactForm.prototype.addNameFields = function () {
123    var first_name = this.textField('first_name');
124    //var last_name = this.textField('last_name');
125
126    this.add(first_name);
127    first_name.attr('placeholder', 'First Name and Last Name');
128    first_name.attr('class', 'form-control form-control-lg');
129
130    //this.add(last_name);
131    //last_name.attr('placeholder', 'Last Name');
132  }
133
134  /**
135   * Creates a phone number field and appends it to the form
136   */
137  AgoraContactForm.prototype.addPhoneField = function () {
138    var phoneField = this.textField('phone');
139
140    this.add(phoneField);
141    phoneField.attr('placeholder', 'Phone Number');
142    phoneField.attr('class', 'form-control form-control-lg');
143  }
144
145  /**
146   * Create the questions/comments textbox and add it to the form.
147   */
148  AgoraContactForm.prototype.addMessageField = function () {
149    var textarea = $('<textarea></textarea>');
150    var label    = this.label('message', 'Questions/Comments');
151
152    textarea.attr('name', 'message');
153    textarea.attr('placeholder', 'Questions/Comments');
154    textarea.attr('class', 'form-control form-control-lg');
155    textarea.attr('rows', '4');
156    textarea.attr('cols', '50');
157
158    this.add(label);
159    this.add(textarea);
160  }
161
162  /**
163   * Create the "Reason for Contacting" select and add it to the form.
164   */
165  AgoraContactForm.prototype.addRequestTypes = function () {
166    var select = $('<select></select>');
167    var label  = this.label('request_type', 'Reason for Contacting');
168    var option;
169
170    select.attr('name', 'request_type');
171    select.attr('class', 'form-control form-control-lg');
172
173    for (requestType in this.requestTypes) {
174      option = $('<option></option>');
175
176      option.attr('value', this.requestTypes[requestType]);
177      option.html(requestType);
178
179      select.append(option);
180    }
181
182    this.add(label);
183    this.add(select);
184  }
185
186   /**
187   * Create the "Service" select and add it to the form.
188   */
189  AgoraContactForm.prototype.addServices = function () {
190    var select = $('<select></select>');
191    var label  = this.label('service', 'Service');
192    var option;
193
194    select.attr('name', 'service');
195
196    for (service in this.service) {
197      option = $('<option></option>');
198
199      option.attr('value', this.service[service]);
200      option.html(service);
201
202      select.append(option);
203    }
204
205    this.add(label);
206    this.add(select);
207  }
208
209  /**
210   * Add a textfield and label paired together to the form.
211   * @param  {str} fieldName => "name" attr of form field
212   * @param  {str} labelName => what the label should say
213   */
214  AgoraContactForm.prototype.addField = function (fieldName, labelName) {
215    var label = this.label(fieldName, labelName);
216    var field = this.textField(fieldName);
217 
218    this.add(label);
219    this.add(field);
220  }
221
222  /**
223   * Add custom hidden fields to the form.
224   * @param {str} fieldName => the "name" attr
225   * @param {str} value     => the "value" attr
226   */
227  AgoraContactForm.prototype.addHiddenField = function (fieldName, value) {
228    var field = this.hiddenField(fieldName, value);
229
230    this.add(field);
231  }
232
233  /**
234   * Add the submit button to the form.
235   */
236  AgoraContactForm.prototype.addSubmitButton = function () {
237    var button = $('<button></button>');
238
239    button.attr('type', 'submit');
240    button.attr('class', 'btn navy-button');
241    button.html('Send Now');
242
243    this.add(button);
244  }
245
246  /**
247   * Append a horizontal rule to the form
248   */
249  AgoraContactForm.prototype.addSeparator = function () {
250    var separator = $('');
251
252    this.add(separator);
253  }
254
255
256  //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
257  //
258  // These helper methods are used by the methods above. They 
259  // provide abstractions for creating new fields and manipulating
260  // the DOM.
261  //
262  //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
263
264  /**
265   * Construct a new text input field based on the "name" attr
266   * @param  {str} name
267   * @return {obj} => the input field's jQuery object
268   */
269  AgoraContactForm.prototype.textField = function (fieldName) {
270    var field = $('<input>');
271
272    field.attr('type', 'text');
273    field.attr('name', fieldName);
274    field.attr('class', fieldName);
275
276    return field;
277  }
278
279  /**
280   * Construct a new hidden field based on the "name" and "value" attrs
281   * @param  {fieldName} => "name"  HTML attr
282   * @param  {value}     => "value" HTML attr
283   * @return {obj}       => the jQuery object
284   */
285  AgoraContactForm.prototype.hiddenField = function (fieldName, value) {
286    var field = $('<input>');
287
288    field.attr('type', 'hidden');
289    field.attr('name', fieldName);
290    field.attr('value', value);
291
292    return field;
293  }
294
295  /**
296   * Construct a new form label based on the "name" attr
297   * @param  {str} fieldName => "name" attr of form field 
298   * @param  {str} labelName => what the label should say
299   * @return {obj} => the label's jQuery object
300   */
301  AgoraContactForm.prototype.label = function (fieldName, labelName) {
302    var label = $('');
303
304    label.attr('for', fieldName);
305    label.html(labelName)
306
307    return label;
308  }
309
310  /**
311   * Adds an element to the end of the form
312   * @param  {obj} element => the jQuery object
313   */
314  AgoraContactForm.prototype.add = function (element) {
315    $(this.selector).append(element);
316  }
317
318  window.AgoraContactForm = AgoraContactForm;
319
320})(window);