· 6 years ago · Apr 13, 2020, 04:02 PM
1@model Ingeniux.Runtime.ICMSElement
2@using Ingeniux.Runtime
3@using System.Xml.Linq;
4@{
5 String formColor = Model.GetElementValue("FormColor");
6 String formTitle = Model.GetElementValue("FormTitle");
7 String formType = Model.GetElementValue("FormType");
8 var leftWYSIWYG = Model.GetElementValue("LeftWYSIWYG");
9 var rightWYSIWYG = Model.GetElementValue("RightWYSIWYG");
10
11 <div class="grid-form-container"
12 data-color="@formColor">
13
14 <p class="h1 gf-title">@formTitle</p>
15
16 <div class="gf-content desktop-flex">
17
18 <div class="gf-left gf-wysiwyg">
19 @Html.Raw(leftWYSIWYG)
20 </div>
21
22 <div class="gf-separate"></div>
23
24 <div class="gf-right">
25
26 <div class="gf-wysiwyg">
27 @Html.Raw(rightWYSIWYG)
28 </div>
29
30 <form action=""
31 class="cc-grid-form-theme"
32 id="grid_form"
33 method="post"
34 name="grid_form">
35
36 <div class="desktop-flex">
37
38 <div class="form-group">
39
40 <label class="form-control-label bold"
41 for="First Name">First Name*</label>
42
43 <input autocomplete="given-name"
44 class="textbox caps form-control"
45 id="First Name"
46 name="First Name"
47 type="text"
48 value="" />
49
50 </div>
51
52 <div class="form-group">
53
54 <label class="form-control-label bold"
55 for="Last Name">Last Name*</label>
56
57 <input autocomplete="family-name"
58 class="textbox caps form-control"
59 id="Last Name"
60 name="Last Name"
61 type="text"
62 value="" />
63
64 </div>
65
66 </div>
67
68 <div class="form-group">
69
70 <label class="form-control-label bold"
71 for="Email">Email*</label>
72
73 <input autocomplete="email"
74 class="textbox empty form-control"
75 id="Email"
76 name="Email"
77 type="text"
78 value="" />
79
80 <div class="field-validation-error-text"></div>
81
82 </div>
83
84 <div class="form-group">
85
86 <label class="form-control-label bold"
87 for="Street1">Street Address*</label>
88
89 <div class="bottom-buffer">
90
91 <input autocomplete="address-line1"
92 class="textbox form-control required"
93 id="Street1"
94 name="Street1"
95 type="text"
96 value="" />
97
98 </div>
99 </div>
100
101 <div class="form-group">
102
103 <label class="form-control-label bold"
104 for="ZipCode">Postal Code*</label>
105
106 <input autocomplete="postal-code"
107 class="textbox form-control required"
108 id="ZipCode"
109 name="ZipCode"
110 type="text"
111 value="" />
112
113 </div>
114
115 <div class="form-group">
116
117 <label class="form-control-label bold"
118 for="major">Intended Major*</label>
119
120 <div class="select-div">
121
122 <select class="form-control chosen-select required"
123 id="major"
124 name="Major">
125
126 <option value="">Select your major</option>
127
128 </select>
129 </div>
130 </div>
131
132 <div class="form-group">
133
134 <label class="form-control-label bold" for="EntryTerm">Entry Term*</label>
135
136 <div class="select-div">
137
138 <select class="form-control chosen-select required"
139 id="EntryTerm"
140 name="EntryTerm">
141
142 <option value="">Select your term</option>
143
144 </select>
145 </div>
146 </div>
147
148 <div class="form-group checkbox-single">
149
150 <div class="checkbox">
151
152 <label class="form-control-label"
153 for="confirm">
154
155 <input id="confirm"
156 name="OptIn"
157 type="checkbox"
158 value="true" /> Yes, send me helpful text updates and reminders</label>
159
160 </div>
161 </div>
162
163 <div class="formnav clearfix">
164
165 <input class="btn"
166 type="submit"
167 value="Submit" />
168
169 </div>
170 </form>
171 </div>
172 </div>
173 </div>
174
175 <script>
176 var CCLEAD = CCLEAD || {};
177 CCLEAD.forms = CCLEAD.forms || {};
178 CCLEAD.customizations = CCLEAD.customizations || {};
179
180 CCLEAD.forms["grid_form"] = {
181 postingUrl: "https://forms.champlain.edu/salesforce/lead",
182 cssUrl: "https://forms.champlain.edu/secure/cclead/cclead-undergrad-generic-theme.css",
183 formType: "@formType",
184 existingForm:true
185 };
186 </script>
187 <script src="https://forms.champlain.edu/secure/cclead/cclead3.js"></script>
188 <script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
189 <script src="https://4207a4034b66fcac6710-e3309a66dbe1bbd0a933cac4265f90e8.ssl.cf2.rackcdn.com/lib:jquery.validate.1.11.1.min.js"></script>
190 <script type="text/javascript" src="https://4207a4034b66fcac6710-e3309a66dbe1bbd0a933cac4265f90e8.ssl.cf2.rackcdn.com/chosen/cc-chosen.jquery.js?v=1"></script>
191 <script type="text/javascript">
192
193 (function($){
194
195 $(document).ready(function() {
196
197 // go out and get our program data
198 fetch_programs();
199
200 /**
201 * Grab our undergrad programs and use them in place of the
202 * hardcoded list. First look in local storage for the
203 * program finder information, we can pull from that.
204 *
205 */
206 function fetch_programs() {
207 // Ensure we've got modernizr
208 if(window.Modernizr) {
209 // Now see if we have local storage
210 // Check localStorage for programfinder data before attempting to load from server
211 if (Modernizr.localstorage && localStorage.getItem('programfinder') !== null) {
212
213 var storedData = $.parseJSON(localStorage.getItem('programfinder'));
214
215 // Make sure data is not expired
216 var oneDay = 1000 * 60 * 60 * 1, // one day in milliseconds
217 now = new Date().getTime();
218
219 if (storedData.date && now - storedData.date < oneDay) {
220 data = storedData.records;
221 handle_programs(data);
222 }
223 }
224
225 // Grab data from programfinder API if failed to get from localStorage
226 if (!data) {
227
228 var xhr = $.ajax({
229 url: 'https://forms.champlain.edu/googlespreadsheet/find/type/programfinder',
230 jsonp: 'callback',
231 dataType: 'jsonp',
232 data: {
233 format: 'json'
234 }
235 });
236
237 xhr.done(function(serverData, textStatus, jqXHR) {
238
239 if (serverData.status !== 'SUCCESS' || !serverData.message) {
240 console.log('failed due to application level error.');
241 return;
242 }
243
244 var storedData = {
245 records: serverData.message,
246 date: new Date().getTime()
247 };
248
249 if (Modernizr.localstorage && JSON && JSON.stringify) {
250 localStorage.setItem('programfinder', JSON.stringify(storedData));
251 }
252
253 data = storedData.records;
254
255 handle_programs(data);
256
257 });
258
259 xhr.fail(function(jqXHR, textStatus, errorThrown) {
260 console.log('failed due to server level error.');
261 console.log(textStatus);
262 console.log(errorThrown);
263 });
264 }
265 }
266 }
267
268 /**
269 * Handle the programs list we have, update our select list.
270 *
271 *
272 */
273 function handle_programs(programs) {
274 // Set up our program filters, we don't want everything coming through
275 var program_regex = /(?:\(minor\))|(?:double major)|(?:combined)/i,
276 filtered_programs = [],
277 valid_programs = [],
278 processed_programs = [], // Needed because programs show up multiple times in our listings
279 desired_audience = 'Undergraduate Programs (on-campus)',
280 min_program_count = 10,
281 program_select_id = 'major',
282 $major_select = $('#'+program_select_id);
283
284 filtered_programs.push('Computer & Digital Forensics (Combined BS/MS)');
285
286 try {
287 $.each(programs, function (key, val) {
288 // Ensure it's actually program finder data
289 if(val.type === 'programfinder') {
290 // Ensure we havent processed this program already
291 if(processed_programs.indexOf(val.admissions_career_goal) === -1) {
292 // Ensure it's audience is actually undergrad
293 if(val.audience == desired_audience) {
294 // Ensure it's not a filtered program
295 if(filtered_programs.indexOf(val.program) === -1) {
296 // Now check our regex
297 if(!program_regex.test(val.program)) {
298 // This is a valid undergrad program
299 valid_programs.push({
300 name: val.program,
301 weight:val.weight,
302 datatel_id: val.admissions_career_goal
303 });
304 processed_programs.push(val.admissions_career_goal);
305 }
306 }
307 }
308 }
309 }
310 });
311
312 // If we have enough valid programs
313 if(valid_programs.length > min_program_count) {
314 // Sort by weight
315 valid_programs.sort(function(a,b) {
316 if(a.name > b.name) {
317 return 1;
318 }
319 if(a.name < b.name) {
320 return -1;
321 }
322 return 0;
323 });
324
325 // Now prep to replace our program dropdown
326 var program_html = '<option value="">Select your major</option>';
327
328 $.each(valid_programs, function(k,v){
329 program_html += '<option value="' + v.datatel_id + '">' + v.name + '</option>';
330 });
331
332 // Now add static undecided options
333 program_html += get_undecided_programs();
334
335 // Now empty out our static program list and add this one
336 $major_select.empty().append(program_html);
337
338 // Enable chosen
339 $major_select.trigger('chosen:updated').trigger('chosen:buildresultslist');
340
341 }
342 }
343 catch(e) {
344 console.log(e);
345 }
346 }
347
348
349 function get_enrollment_periods() {
350 var enrollmentPeriods = [];
351
352 // Spring period
353 enrollmentPeriods.push({
354 label: 'Spring',
355 datatel_label: 'SP',
356 //cut_off: 'January 4th'
357 cut_off: '01/04',
358 month: 'January'
359 });
360
361 // Fall period
362 enrollmentPeriods.push({
363 label: 'Fall',
364 datatel_label: 'FA',
365 // cut_off: 'August 24th'
366 cut_off: '08/24',
367 month: 'August'
368 });
369
370 return enrollmentPeriods;
371 }
372
373 /**
374 * Function to dynamically build out entry terms so we don't need to update them
375 * every year. It uses datatel compatible field values to ease the import process
376 *
377 */
378 function build_semesters() {
379 var yearsToBuild = 5,
380 enrollmentPeriods = get_enrollment_periods(),
381 semesterHtml = '',
382 semeseterSelectId = 'EntryTerm';
383
384 // set our dates up
385 var currentDate = new Date(),
386 lastDate = new Date(),
387 now = new Date();
388
389 // Set the last year we will build to
390 lastDate.setFullYear(lastDate.getFullYear() + yearsToBuild);
391
392 // Now start building out our years
393 do {
394 var currentYear = currentDate.getFullYear();
395
396 var haveOneOption = false;
397 var optionsHtml = '';
398 // Loop through our enrollment periods
399 for(var i = 0; i<enrollmentPeriods.length;i++) {
400 // Ensure the enrollment period for this year hasn't passed
401 var cutOffDate = new Date(currentYear + '/' + enrollmentPeriods[i].cut_off);
402 // If the cutoff date is in the future, add this option to our list
403 if(now < cutOffDate) {
404 haveOneOption = true;
405 optionsHtml += '<option value="' + currentYear + enrollmentPeriods[i].datatel_label + '">' + enrollmentPeriods[i].label + ' ' + currentYear + ' (' + enrollmentPeriods[i].month + ')</option>';
406 }
407 }
408 if(haveOneOption) {
409 semesterHtml += '<optgroup label="' + currentYear + '">';
410 semesterHtml += optionsHtml;
411 semesterHtml += '</optgroup>';
412 }
413
414 currentDate.setFullYear(currentDate.getFullYear() + 1);
415 } while(currentDate<lastDate);
416
417 // Now that we have our semesters, add it to the form
418 $('#' + semeseterSelectId).append(semesterHtml);
419 try {
420 $('#' + semeseterSelectId).trigger('chosen:updated');
421 } catch(e){
422 console.log(e);
423 }
424 }
425
426 build_semesters();
427
428 /**
429 * Helper to hold static undecided programs for listing
430 *
431 */
432 function get_undecided_programs() {
433 return '<option value="BCCM">Undeclared: Communication & Creative Media</option><option value="BEHS">Undeclared: Education & Human Studies</option><option value="BITS">Undeclared: Information Technology & Sciences</option><option value="BBUS">Undeclared: Robert P. Stiller School of Business</option>';
434 }
435 var chosenOptions = {};
436
437 // Look for Chosen
438 if ($.fn.chosen) {
439 chosenOptions = {
440 search_contains: true
441 },
442 chosenActive = true,
443 chosen_fields_selector = 'select.state';
444
445 if (/iP(od|hone)/i.test(window.navigator.userAgent)) {
446 chosenActive = false;
447 }
448 if (/Android/i.test(window.navigator.userAgent)) {
449 if (/Mobile/i.test(window.navigator.userAgent)) {
450 chosenActive = false;
451 }
452 }
453
454 try{
455 // Add chosen to all visible select lists
456 $('.chosen-select:visible:not(.cascades)').chosen(chosenOptions).trigger('chosen:buildresultslist');
457 // Trigger the buildout of our options (if using custom chosen...)
458 } catch(e) {
459 console.log(e);
460 }
461 }
462 });
463 })(jQuery);
464
465 CCLEAD.customizations["grid_form"] = CCLEAD.customizations["grid_form"] || [];
466 CCLEAD.customizations["grid_form"].push(function($form,options) {
467
468 // Add zip validator
469 $.validator.addMethod("zip", function( value, element ) {
470 return this.optional(element) || /^\d{5}$/.test( value );
471 }, "Please use a 5 digit Zip code.");
472
473 var chosenActive = false;
474
475 $('.datepicker').datepicker({
476 changeMonth: true,
477 changeYear: true,
478 yearRange: "-90:+0"
479 });
480
481 // Tell validator to validate hidden select lists (chosen)
482 var ignoreRules = ":hidden";
483 if ($.fn.chosen) {
484 //update default validation routine to not ignore chosen selects
485 ignoreRules = ':hidden:not(.chosen-select)';
486 }
487
488 // client side form validation
489 var $cbb_form = $('#grid_form'),
490 hasSubmitted = false;
491
492 // Validation rules
493 options.rules = {
494 "First Name": 'required',
495 "Last Name": 'required',
496 "Email": {
497 email: true,
498 required: true
499 },
500 "Status": "required",
501 "EntryTerm": "required",
502 "Major": "required"
503 };
504 options.ignore = ignoreRules;
505
506 options.messages = {
507 "First Name": "Please enter your First Name",
508 "Last Name": "Please enter your Last Name",
509 "Email": "Please enter a valid Email",
510 "Status": "Please enter your Status",
511 "EntryTerm": "Please select your Entry Term",
512 "Major" : "Please let us know what Major you may be interested in"
513 };
514
515 var parentSubmitHandler = options.submitHandler;
516 options.submitHandler = function() {
517
518 // Added by Matt Huwiler
519 // Aug 17, 2013
520 // Prevent multiple submits
521 if (hasSubmitted) return;
522 hasSubmitted = true;
523 var $xhr = parentSubmitHandler();
524
525 $xhr.done(function() {
526 //fade the form out, show thank you message instead.
527 var thanks = "<h2>Thank You!</h2><p>Thanks for requesting more information, someone will be in touch shortly.</p>";
528 $cbb_form.fadeOut(function(){
529 $cbb_form.html(thanks).fadeIn();
530 //call event tracking
531 if(typeof cbbAnalytics == 'object'){
532 cbbAnalytics.trackExistingForms.track('Success','Undergraduate Preview Info Form');
533 }
534
535 })
536 })
537 .fail(function(){
538 //call event tracking
539 if(typeof cbbAnalytics == 'object'){
540 cbbAnalytics.trackExistingForms.track('Fail','Undergraduate Preview Info Form');
541 }
542 alert('Sorry about that, we had a problem submitting your form. Please reload the page and try again.');
543 });
544 };
545
546 return options;
547 });
548
549 </script>
550}