Form builder alone works fine for quickly generating forms that contain the subset of required fields listed in the "Fields" section above (First Name, Last Name, Email, Phone, Zip, Relationship, and Comments). What if you need a field other than these; or if you need to make one not required; or if you need to customize the form in any other way? Developers can easily extend cclead.js forms using the method described in this section. This section describes how to customize cclead forms by demonstrating a how to implement gradcontact. A live example of a gradcontact form can be found here:
http://www.champlain.edu/admissions/graduate-admissions/financing
Once the form is built and just before validation rules are applied, cclead.js checks for existence of global object CCLEAD_EXT and an array of callback functions CCLEAD_EXT.customizations. If exits, these functions are called after the form is rendered on the page. For example, graduatecert forms require an optional phone field and a required select dropdown of programs. Here's how to implement the graduatecert form using CCLEAD_EXT.customize:
// Lead Form
var CCLEAD_EXT = CCLEAD_EXT || {};
CCLEAD_EXT.customizations = CCLEAD_EXT.customizations || [];
(function() {
CCLEAD_EXT.customizations.push(function($form, options) {
// Add optional Phone field after Email
var $emailField = $form.find('p.ccLeadEmail');
$(' <p class="ccLeadField">' +
' <input type="text" class="ccInputText" name="Phone" placeholder="Phone">' +
' </p>').insertAfter($emailField);
// Add required program select dropdown
// Program values must match ESM column of this Google Spreadsheet:
// http://bit.ly/1qzXQXs
var $zipField = $form.find('p.ccLeadZip');
$('<p>' +
'<select name="Program" class="ccInputSelect">' +
'<option value="">Certificate of Interest *</option>' +
'<option value="Grad Cert in Advanced Management" selected>Advanced Management</option>' +
'<option value="Grad Cert in Management Studies">Management Studies</option>' +
'<option value="Grad CERT Supply Chain Management">Supply Chain Management</option>' +
'<option value="Grad Cert Positive Organizational Development">Positive Organizational Development</option>' +
'</select>' +
'</p>').insertAfter($zipField);
return options;
});
}());