Crestmont Application Form

crestmontApplication.html

<!-- Copy this entire code block-->
<div id="application-form"></div>
<div class="qsstandalone-footnote" id="enquiry-footer">Form powered by <a href="http://www.quickschools.com" target="_blank">QuickSchools.com - Student Information System</a></div>
<style>
.qsform {
    color: #545454;;
    background: #F6FFF5;
    font-family: Arial, Verdana, Sans-Serif;
}

.qsform .qslabel {
    width: 300px;
}

.qsform .qsdropdown {
    padding: 0;
    overflow: visible;
}

.qsform table {
    color: #545454;
}

/* PayPal area */
.qsform .qspaypal .qssectionbreak {
    float: left;
    width: 50%;
}

.qsform .qspaypal form {
    width: auto;
    float: right;
}

.qsform .qspaypal input {
    border: none;
}


/* fieldset groups */
.qsform fieldset {
    margin-bottom: 20px;
    border: 1px solid #999;
    padding: 20px;
}

.qsform legend {
    font-size: 1.5em;
    font-weight: bold;
}

.qsform fieldset:first-child legend {
    font-size: 2em;
}


/* school table */
.qsschooltable .qsinput {
    min-width: 200px;
}

.qsschooltable .qslabel {
    width: 200px;
}

/* parent table - to put <small> on own line */
.qsparenttable .qslabel {
    width: 100%;
}


/* Additional Information textareas */
.qsform textarea {
    width: 97%;
    height: 10em;
    font-family: inherit;
    font-size: 1em;
    border: 1px solid gray;
    padding: 5px 0px 5px 5px;
    border-radius: 4px;
}
 
.qsform input[type="text"]:focus,
	.contact textarea:focus {
	padding: 5px 10px;
}

/* for paragraph in top instruction area */
.qssectionbreak {
    white-space: pre-line;
}
</style>
<script>
function qsOnLoad($) {
    // ==================
    // = Function calls =
    // ==================
    groupSectionsByTitle();
    groupSchoolsIntoColumns();
    groupParentsIntoColumns();
    
    moveUploadButton();
    makeTextAreas();
    makeSmall("* - required");
    
    appendAsterisks();
    boldLabels();
    addPhoneSubtexts();
    italicizeTexts();
    
    injectPayPal(); // has to be last
    
    // =============
    // = Functions =
    // =============
    function groupSectionsByTitle() {
        $(".qsheader").each(function() {
            var holder = $("<fieldset/>", {"class": "qsgroup"});
            holder.insertBefore($(this));
        
            var legend = $("<legend/>", {text: $(this).text()});
            holder.append(legend);
        
            var group = $(this).nextUntil(".qsheader");
            holder.append(group);
        
            $(this).remove();
        });
    }
    
    function injectPayPal() {
        var paypalHTML = '<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">';
        paypalHTML += '<input type="hidden" name="cmd" value="_s-xclick">';
        paypalHTML += '<input type="hidden" name="hosted_button_id" value="A5XDZUDESXQGE">';
        paypalHTML += '<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">';
        paypalHTML += '<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">';
        paypalHTML += '</form>';
    
        var paypalGroup = $(".qsgroup:contains(Application Fee)");
        paypalGroup.addClass("qspaypal");
        paypalGroup.find(".qsspace").remove();
        paypalGroup.append($(paypalHTML));
    }

    function groupSchoolsIntoColumns() {
        var schoolGroup = $(".qsgroup:contains(Previous Schools)");
    
        function findSchool(text) {
            return schoolGroup.find(":contains(" + text + ")")
                .next()
                .addBack();
        }
        var schoolOne = findSchool("Previous School #1");
        var schoolTwo = findSchool("Previous School #2");
        var schoolThree = findSchool("Previous School #3");
    
        var schoolTable = $("<table class='qsschooltable qstable' />")
            .appendTo(schoolGroup);
        
        function appendToRow(school, newRow) {
            var newCell = $("<td/>").appendTo(newRow);
        
            newCell.append(school.eq(i * 2));
            newCell.append(school.eq(i * 2 + 1));
        } 
    
        // move schools into columns
        for(var i = 0; i < 3; i++) {
            var newRow = $("<tr/>").appendTo(schoolTable);

            appendToRow(schoolOne, newRow);
            appendToRow(schoolTwo, newRow);
            appendToRow(schoolThree, newRow);
        }
    
        // delete all but last .qsspace before tabl
        schoolGroup.children(".qsinput:last")
            .nextUntil("table", ".qsspace:not(:last)")
            .remove();
    }

    function groupParentsIntoColumns() {
        var parentGroup = $(".qsgroup:contains(Parent Information)");
    
        function findParent(text) {
            return parentGroup.find(":contains(" + text + ")")
                .next()
                .addBack();
        }
    
        var parentOne = findParent("Parent #1");
        var parentTwo = findParent("Parent #2");
    
        var schoolTable = $("<table class='qsparenttable qstable' />")
            .appendTo(parentGroup);
    
        function appendToRow(parent, newRow) {
            var newCell = $("<td/>").appendTo(newRow);
        
            newCell.append(parent.eq(i * 2));
            newCell.append(parent.eq(i * 2 + 1));
        }
        
        for(var i = 0; i < parentOne.length / 2; i++) {
            var newRow = $("<tr/>").appendTo(schoolTable);

            appendToRow(parentOne, newRow);
            appendToRow(parentTwo, newRow);
        }
    
        var headerRow = $("<tr/>").prependTo(schoolTable);
        parentGroup.find(".qssectionbreak").each(function() {
            $("<td/>").appendTo(headerRow).append($(this));
        });
    
        parentGroup.find(".qsspace").remove();
    }

    function moveUploadButton() {
        var aboutYourChild = $(".qsgroup:contains(About Your Child)");
        var uploadFiles = $(".qsgroup:contains(Upload Files)");
    
        uploadFiles.children("div").appendTo(aboutYourChild);
        uploadFiles.remove();
    }

    function makeTextAreas() {
        $(".qsgroup:contains(Additional Information) input").each(function() {
            var textArea = $("<textarea></textarea>");
            textarea.attr("class", $(this).attr("class"));
            textarea.attr("type", $(this).attr("type"));
            textarea.attr("name", $(this).attr("name"));

            $(this).after(textarea);

            $(this).remove();
        });
    }
    
    function appendAsterisks() {
        var toAppendAsterisk = ["Child's First Name", "Child's Last Name",
            "Birthdate", "Gender", "Grade applying for", "Year applying for",
            "Parent #1 First Name", "Parent #1 Last Name", "Parent #1 Email",
            "Parent #1 Address Line 1", "Parent #1 Zip Code",
            "Please describe your child’s strengths.",
            "Please describe your child’s challenges.",
            "Please describe any special needs",
            "What kind of education are you seeking for your child?",
            "How do you see yourself participating in our parent co-op?",
            "How did you hear about Crestmont?",
            "Please upload a profile image of your child (JPG format)",
            "Parent #1 City", "Parent #1 State",
            "Are there any circumstances"
        ];
        for(var i = 0; i < toAppendAsterisk.length; i++) {
            appendAsterisk(toAppendAsterisk[i]);
        }
    }
    
    function boldLabels() {
        var toBold = ["Crestmont Application Form",
            "Before you fill out this application", "About Your Child",
            "Child's First Name", "Child's Last Name", "Birthdate", "Gender",
            "Ethnic Background", "Grade applying for", "Year applying for",
            "Please upload a profile image of your child (JPG format):", 
            "Parent Information", "Parent #1 First Name", "Parent #2 First Name", 
            "Parent #1 Last Name", "Parent #2 Last Name", "Parent #1 Email", 
            "Parent #2 Email", "Parent #1 Phone (best)", 
            "(phone format must be 555-123-4567)", "Parent #2 Phone (best)", 
            "(phone format must be 555-123-4567)", "Parent #1 Phone (other)", 
            "Parent #2 Phone (other)", "Parent #1 Address Line 1", 
            "Parent #2 Address Line 1", "Parent #1 Address Line 2", 
            "Parent #2 Address Line 2", "Parent #1 City", "Parent #2 City", 
            "Parent #1 State", 
            "Parent #2 State", "Parent #1 Zip Code", 
            "Parent #2 Zip Code", "Previous Schools", "Current School Name", 
            "Current School Address", "Current School Phone Number", 
            "Current Grade", "Current Teacher", "Previous School #1",
            "Previous School #2", "Previous School #3", "Previous School #1 Phone",
            "Previous School #2 Phone", "Previous School #3 Phone", 
            "Previous School #1 Dates", "Previous School #2 Dates", 
            "Previous School #3 Dates", "Additional Information"
        ];
        for(i = 0; i < toBold.length; i++) {
            boldLabel(toBold[i]);
        }
    }
    
    function addPhoneSubtexts() {
        var toAddPhoneSubtext = ["Parent #1 Phone (best)",
            "Parent #2 Phone (best)"
        ];
        for(i = 0; i < toAddPhoneSubtext.length; i++) {
            addPhoneSubtext(toAddPhoneSubtext[i]);
        }
    }
    
    function italicizeTexts() {
        var toItalicize = [
            "Your application will not be considered until this fee is received."
        ];
        for(var i = 0; i < toItalicize.length; i++) {
            italicizeText(toItalicize[i]);
        }
    }
    
    function appendAsterisk(label) {
        var labelElem = $(".qslabel:contains(" + label + ")");
        labelElem.html(labelElem.html() + "<b>*</b>");
    }
    
    function boldLabel(textSnippet) {
        $(".qsform form div:contains(" + textSnippet + "):first").each(function() {
            var originalHTML = $(this).html();
            var toSubstitute = "<b>" + textSnippet + "</b>";
            $(this).html(originalHTML.replace(textSnippet, toSubstitute));
        });
    }
    
    function addPhoneSubtext(label) {
        var labelElem =$(".qslabel:contains(" + label + ")");
        $("<small>(phone format must be 555-123-4567)</small>").
            insertAfter(labelElem);
    }
    
    function italicizeText(textSnippet) {
        $(".qsform form div:contains(" + textSnippet + ")").each(function() {
            var originalHTML = $(this).html();
            var toSubstitute = "<i>" + textSnippet + "</i>";
            $(this).html(originalHTML.replace(textSnippet, toSubstitute));
        });
    }
    
    function makeSmall(text) {
        $(".qslabel:contains(" + text + ")").each(function() {
            var original = $(this).html();
            var replaced = original.replace(text, "<small>" + text + "</small>")
            $(this).html(replaced);
        });
    }
}
</script>
<script src="https://crestmont.quickschools.com/sms/es/application?divId=application-form" async></script>

Note - per request added "Parent #1 Phone (best)" to the array of things to append stars to