Champlain Lead Form Builder v2

Developer Documentation: (Hopefully Useful) Code Examples

Customization: Altering a Form's Look and Feel

The easiest way to alter a form's look and feel is to edit the template generated with Form Builder. This approach does not work when the element(s) you add include dynamic content. For example, if you want to load a subset of programs from the Programs API into an options box and want to make sure the options remain current. To do this, you'd want to use the customizations API. Here's an example of adding a dropdown using thie API:

// Example 1: Adding a field
var CCLEAD = CCLEAD || {};
CCLEAD.customizations = {

    // Customizations are key => function pairs where the key corresponds to a form's ID
    // and the function is executed once right after the form is added to the page.  The
    // function is given two arguments: $form, which is a jQuery wrapped reference to the
    // lead form, and options, which are passed into jQuery Validate immediately after
    // your function(s) are executed.  Customization functions must return the options
    // argument.
    'cclead-5015498077': [

        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.  You can load programs dynamically
            // from the following API:
            // https://forms.champlain.edu/googlespreadsheet/find/type/programs
            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;

        } //, <- More functions can be added here.

    ]

};
    

Here's another more practical example: Adding functionality for when a form is submitted.

// Example 2:
var CCLEAD = CCLEAD || {};
CCLEAD.customizations = CCLEAD.customizations || {};
CCLEAD.customizations['cclead-5015498077'] = CCLEAD.customizations['cclead-5015498077'] || [];
CCLEAD.customizations['cclead-5015498077'].push(function($form, options) {

    // backup old submit handler
    var parentSubmitHandler = options.submitHandler;

    options.submitHandler = function() {
        var xhr = parentSubmitHandler();
        xhr.always(function() {
            // you're logic here.  You have a direct reference to the form via $form to work with
        });
    };

    // Always remember to return options
    return options;

});
    

Using cclead3.js with Existing Forms

In the past you required a separate script script in order to integrate existing forms (forms not built w/ Form Builder). This is no longer the case. You can point cclead3.js to existing forms by their ID. The following example demonstrates how to integrate an existing form with Forms:

    <form id="myFormId">
        <input type="text" name="First Name">
        <input type="submit" value="Submit">
    </form>

    <script>

        // Use customizations API to define additional submit functionality for this form
        var CCLEAD = CCLEAD || {};
        CCLEAD.customizations = CCLEAD.customizations || {};
        CCLEAD.customizations['myFormId'] = CCLEAD.customizations['myFormId'] || [];
        CCLEAD.customizations['myFormId'].push(function($form, options) {

            // Add validate rules and messages; these can also be defined in markup
            options.rules = {
                "First Name": { required: true }
            };
            options.messages = {
                "First Name": { required: 'Please enter your first name' }
            };

            // override submit handler to add a thank you message
            var parentSubmitHandler = options.submitHandler;
            options.submitHandler = function() {
                var xhr = parentSubmitHandler();
                xhr.always(function() {
                    $form.html("<h3>Thank you!</h3>");
                });
            }

            return options;

        });

        // Define configuration options for this existing form.
        CCLEAD.forms = CCLEAD.forms || {};
        CCLEAD.forms['myFormId'] = {
            existingForm: true,
            postingUrl: "https://forms.champlain.edu/salesforce/lead",
            formType: "test"
        };

    </script>

Live Examples

• Simple Form Builder & Existing Form Demo
• Live Example of External Form (Lead Builder)