The document contains CSS styles and JavaScript functions for formatting and validating a web form. It defines styles for elements like tables, text fields, labels, and error messages. It also includes JavaScript functions for submitting the form, validating required fields and dates, and showing/hiding error messages. The form is for collecting prospect inquiry requests with fields for contact details, address, education history, interests, and other demographic information.

1. <apex:page Controller="RFIForm" showHeader="false">
<apex:includeScript value="{!$Resource.StNorbertCollege_logo}"/>
<style>
table
{
border-color:#000000;
border-style:none;
font-weight:normal;
font-size:12px;
}
td
{
text-align:left;
vertical-align:top;
padding: 2px 0;
}
th
{
text-align:left;
background-color:#7D7D7D;
font-size:14px;
font-style:normal;
color: #FFFFFF;
vertical-align:top;
}
.small
{
color:#4F4F4F;
font-size:10px;
font-weight:normal;
font-style:italic;
}
.req
{
font-weight:normal;
color:red;
backgroundimage:url('https://cwispssb.snc.edu/wtlgifs/web_required_cascade.png');
background-repeat: no-repeat;
font-size: 90%;
padding: 5px;
display: inline-block;
}
.header
{
font-weight:bold;
font-size:12px;
color:#A24C1D;
}
label.error
{
color:red;
font-size: 10px;
line-height: 20px;
padding: 0 5px;
}
input.error
{
border: 1px dotted red;
}

2. .checkrow {vertical-align:bottom; overflow: hidden; display: block; padding:
0; margin:0; }
.Column { width: 300px; }
.fielderror{ border-color: red; }
.errorBox {
background-color: pink;
border: 2px solid red;
border-radius: 10px 10px 10px 10px;
color: #CC0000;
font-size: 14px;
margin: 5px;
padding: 5px;
text-align: center;
}
.errorBtn input { margin: 5px; padding: 4px 10px; }
.errorText { margin: 5px; }
.cell { width: 300px }
#filedErrorBox { display: none; }
form{
margin: 10px;
background-color: #FFFFFF;
background-repeat: no-repeat;
color: black;
font-family: Verdana,Arial Narrow,helvetica,sans-serif;
font-style: normal;
}
input, select, textarea{
font-family: Verdana,Arial Narrow,helvetica,sans-serif;
}
.requiredmsgtext {
font-family: Verdana,Arial Narrow,helvetica,sans-serif;
}
.label {
font-weight: bold;
font-family: Verdana,Arial Narrow,helvetica,sans-serif;
}
.tableHeader {
text-decoration: underline;
font-family: Verdana,Arial Narrow,helvetica,sans-serif;
font-weight: bold;
}
.headerUnderline { background-color: #A62900; width: 100%; padding: 2px; }
.contentText { margin-bottom: 20px; display: block; }
#banner { background-image:
url("https://cwispssb.snc.edu/sncgifs/knightline_banner60.png"); backgroundrepeat: no-repeat; padding: 30px; }
h1{ width: 100%; font-size: 20px; margin: 10px 0; display: block; }
</style>
<script>
function submitForm()
{
var errorFound = false;
$('#filedErrorBox').hide();
$('.inputRequired').each(function() {
if($(this).val()=='' || $(this).val()==null)
{
$(this).addClass("fielderror");
errorFound=true;

3. $('#filedErrorBox').show();
}
else
{
});
$(this).removeClass("fielderror");
}
$('.inputRequiredIfUS').each(function() {
if($('select[id$=mailingCountry]').val()=='US' && ($(this).val()==''
|| $(this).val()==null))
{
$(this).addClass("fielderror");
errorFound=true;
$('#filedErrorBox').show();
}
else
{
$(this).removeClass("fielderror");
}
});
$('.validDate').each(function() {
if(validateDate($(this).val())==false)
{
$(this).addClass("fielderror");
errorFound=true;
$('#filedErrorBox').show();
}
});
$('.inputRequired input.fielderror, .inputRequired
select.fielderror').each(function(){$
('#'+this.id.replace('_lkid','').replace(/:/g,':')).addClass('fielderror')});
if(errorFound==false){ save(); }
else{ alert('Please Fix the Highlighted Errors'); }
}
function validateDate(testdate) {
var date_regex = /^(0[1-9]|1[0-2])/(0[1-9]|1d|2d|3[01])/(19|20)d{2}$/ ;
return date_regex.test(testdate);
}
</script>
<apex:pageMessages ></apex:pageMessages>
<apex:form Id="form">
<div id="banner"></div>
<h1>Prospect Inquiry Request</h1>
<div class="headerUnderline"></div>
<span class="contentText">Please enter your information in the fields below.
When completed click on the <b>Submit</b> button at the bottom of page. Please
allow 3 to 5 business days for processing your request for information.</span>
<span class="req"></span><apex:outputLabel styleClass="requiredmsgtext"> indicates a required field.</apex:outputLabel>
<apex:actionFunction action="{!save}" name="save" />
<apex:panelGrid columns="2" columnClasses="Column">
<apex:outputText styleclass="tableHeader" value="Name and Personal Data"
/><apex:outputText styleclass="tableHeader" value="" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Student
Type"/><apex:outputText styleclass="req" value=""/>
</apex:panelGroup>

4. <apex:selectList value="{!studentType}" multiselect="false" size="1"
styleClass="inputRequired">
<apex:selectOptions value="{!studentTypeOptions}"/>
<apex:actionSupport event="onchange" rerender="studType"/>
</apex:selectList>
<apex:panelGroup >
<apex:outputText styleclass="label" value="Domestic or
International"/><apex:outputText styleclass="req" value=""/>
</apex:panelGroup>
<apex:selectList value="{!admitType}" multiselect="false" size="1"
styleClass="inputRequired">
<apex:selectOptions value="{!admitTypeOptions}"/>
<apex:actionSupport event="onchange" rerender="InternationalOnly"/>
</apex:selectList>
<apex:panelGroup >
<apex:outputText styleclass="label" value="Student Legal First
Name"/><apex:outputText styleclass="req" value=""/>
</apex:panelGroup>
<apex:inputText value="{!con.firstName}" id="firstName"
styleClass="inputRequired" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Student Middle Name"/>
</apex:panelGroup>
<apex:inputText value="{!con.Middle_Name__c}" id="middleName"/>
<apex:panelGroup >
<apex:outputText styleclass="label" value="Student Last
Name"/><apex:outputText styleclass="req" value=""/>
</apex:panelGroup>
<apex:inputText value="{!con.lastName}" id="lastName"
styleClass="inputRequired" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Suffix"/>
</apex:panelGroup>
<apex:inputText value="{!con.Suffix__c}" id="Suffix"/>
<apex:panelGroup >
<apex:outputText styleclass="label" value="Nickname"/>
</apex:panelGroup>
<apex:inputText value="{!con.Nickname__c}" id="Nickname"/>
<apex:panelGroup >
<apex:outputText styleclass="label" value="Date of Birth
(MM/DD/YYYY)"/><apex:outputText styleclass="req" value=""/>
</apex:panelGroup>
<apex:inputText value="{!con.BirthDate}" id="BirthDate"
styleClass="inputRequired validDate" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Gender"/><apex:outputText
styleclass="req" value=""/>
</apex:panelGroup>
<apex:inputField value="{!con.Gender__c}" styleClass="inputRequired"/>
<apex:panelGroup >
<apex:outputText styleclass="label" value="Home Phone"/>
</apex:panelGroup>
<apex:inputField value="{!con.Phone}" />

5. <apex:panelGroup >
<apex:outputText styleclass="label" value="International Access
Code"/>
</apex:panelGroup>
<apex:inputText value="{!intAccessCode}" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Cell Phone"/>
</apex:panelGroup>
<apex:inputField value="{!con.MobilePhone}" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Email
Address"/><apex:outputText styleclass="req" value=""/>
</apex:panelGroup>
<apex:inputField value="{!con.Email}" styleClass="inputRequired"/>
<apex:panelGroup >
<apex:outputText styleclass="label"
value="Citizenship"/><apex:outputText styleclass="req" value=""/>
</apex:panelGroup>
<apex:inputField value="{!con.Citizenship__c}"
styleClass="inputRequired"/>
<apex:outputText styleclass="tableHeader" value="Home Address"
/><apex:outputText styleclass="tableHeader" value="" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Street
Address"/><apex:outputText styleclass="req" value=""/>
</apex:panelGroup>
<apex:inputField value="{!con.MailingStreet}"
styleClass="inputRequired"/>
<apex:panelGroup >
<apex:outputText styleclass="label" value="City"/><apex:outputText
styleclass="req" value=""/>
</apex:panelGroup>
<apex:inputText value="{!con.MailingCity}" styleClass="inputRequired"/>
<apex:panelGroup >
<apex:outputText styleclass="label"
value="State/Province"/><apex:outputText styleclass="req" value=""/>
</apex:panelGroup>
<apex:selectList value="{!con.MailingState}" multiselect="false"
size="1" styleClass="inputRequired">
<apex:selectOptions value="{!StateOptions}"/>
</apex:selectList>
<apex:panelGroup >
<apex:outputText styleclass="label"
value="Country"/><apex:outputText styleclass="req" value=""/>
</apex:panelGroup>
<apex:selectList id="mailingCountry" value="{!con.MailingCountry}"
multiselect="false" size="1" styleClass="inputRequired">
<apex:selectOptions value="{!CountryOptions}"/>
<apex:actionsupport event="onchange" rerender="zipCodeLable,
countyLable" />
</apex:selectList>
<apex:panelGroup id="zipCodeLable">
<apex:outputText styleclass="label" value="Zip

6. Code"/><apex:outputText styleclass="req" value="" rendered="{!
con.MailingCountry=='US'}" />
</apex:panelGroup>
<apex:inputField value="{!con.MailingPostalCode}"
styleClass="inputRequiredIfUS"/>
<apex:panelGroup id="countyLable">
<apex:outputText styleclass="label" value="County"/><apex:outputText
styleclass="req" value="" rendered="{!con.MailingCountry=='US'}" />
</apex:panelGroup>
<apex:inputField value="{!con.Current_County_Code__c}"
styleClass="inputRequiredIfUS"/>
<apex:outputText styleclass="tableHeader" value="Planning to Apply
for" /><apex:outputText styleclass="tableHeader" value="" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Desired entry
Term"/><apex:outputText styleclass="req" value=""/>
</apex:panelGroup>
<apex:selectList value="{!interest.Desired_Entry_Term__c}"
multiselect="false" size="1" styleClass="inputRequired" >
<apex:selectOptions value="{!desiredEntryTermOptions}"/>
</apex:selectList>
<apex:panelGroup >
<apex:outputText styleclass="label" value="Desired Major"/>
</apex:panelGroup>
<apex:inputField value="{!interest.Desired_Major__c}" />
<apex:outputText styleclass="tableHeader" value="Interests"
/><apex:outputText styleclass="tableHeader" value="" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Athletic Interests"/>
<br/>
<div class="small">Hold ctrl to select multiple<br/>Specific sport
refers to Varsity level at SNC</div>
</apex:panelGroup>
<apex:selectList value="{!interest.Athletic_Interests__c}"
multiselect="true" size="5" >
<apex:selectOptions value="{!athleticInterestsOptions}"/>
</apex:selectList>
<apex:panelGroup >
<apex:outputText styleclass="label" value="Other Interests"/>
<br/>
<div class="small">Hold ctrl to select multiple</div>
</apex:panelGroup>
<apex:selectList value="{!interest.Other_Interests__c}"
multiselect="true" size="5" >
<apex:selectOptions value="{!otherInterestsOptions}"/>
</apex:selectList>
</apex:panelGrid>
<apex:outputPanel id="studType">
<apex:outputText styleclass="tableHeader" value="High School
Information" rendered="{!studentType=='Freshman'}" />
<apex:outputText styleclass="tableHeader" value="" rendered="{!
studentType=='Freshman'}" />

7. <apex:panelGrid columns="2" columnClasses="Column" rendered="{!
studentType=='Freshman'}">
<apex:panelGroup >
<apex:outputText styleclass="label" value="Home Schooled"/>
</apex:panelGroup>
<apex:inputField value="{!interest.Home_Schooled__c}" >
<apex:actionSupport event="onchange" rerender="highSchoolPanel"/>
</apex:inputField>
<apex:outputPanel id="highSchoolPanel">
<apex:panelGrid columns="2" rendered="{!
interest.Home_Schooled__c==false}">
<apex:panelGroup >
<apex:outputText styleclass="label" value="High School Country"/>
</apex:panelGroup>
<apex:inputField value="{!interest.High_School_Country__c}">
<apex:actionSupport event="onchange"
rerender="highSchoolNamePanel"/>
</apex:inputField>
<apex:panelGroup >
<apex:outputText styleclass="label" value="High School
State/Province"/>
</apex:panelGroup>
<apex:inputField value="{!interest.High_School_State__c}">
<apex:actionSupport event="onchange"
rerender="highSchoolNamePanel"/>
</apex:inputField>
<apex:panelGroup >
<apex:outputText styleclass="label" value="High School
Name"/><apex:outputText styleclass="req" value=""/>
</apex:panelGroup>
<apex:outputPanel id="highSchoolNamePanel">
<apex:selectList value="{!con.High_School__c}" multiselect="false"
size="1" styleClass="inputRequired">
<apex:selectOptions value="{!HighSchoolOptions}"/>
<apex:actionsupport event="onchange"
rerender="highSchoolOtherLabel, highSchoolOtherField" />
</apex:selectList>
</apex:outputPanel>
<apex:outputPanel id="highSchoolOtherLabel"><apex:panelGroup
rendered="{!con.High_School__c==otherHighschoolId}">
<apex:outputText styleclass="label" value="High School Other"/>
</apex:panelGroup></apex:outputPanel>
<apex:outputPanel id="highSchoolOtherField"><apex:inputField value="{!
con.High_School_Other__c}" rendered="{!
con.High_School__c==otherHighschoolId}" /></apex:outputPanel>
<apex:panelGroup >
<apex:outputText styleclass="label" value="High School Address"/>
</apex:panelGroup>
<apex:inputField value="{!interest.High_School_Address__c}" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="High School City"/>
</apex:panelGroup>
<apex:inputField value="{!interest.High_School_City__c}" />

8. <apex:panelGroup >
<apex:outputText styleclass="label" value="High School Zip Code"/>
</apex:panelGroup>
<apex:inputField value="{!interest.High_School_Zip_Code__c}" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="High School GPA"/>
</apex:panelGroup>
<apex:inputField value="{!interest.High_School_GPA__c}" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="ACT score"/>
</apex:panelGroup>
<apex:inputField value="{!interest.ACT_Score__c}" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="HS Graduation Date"
/><apex:outputText styleclass="req" value=""/>
<br/>
<div class="small">Approximate date graduating from High
School</div>
</apex:panelGroup>
<apex:inputField value="{!interest.High_School_Grad_Date__c}"
styleClass="inputRequired" />
</apex:panelGrid>
</apex:outputPanel>
</apex:panelGrid>
<apex:outputText styleclass="tableHeader" value="Prior College
Information" rendered="{!studentType=='Transfer'}" />
<apex:outputText styleclass="tableHeader" value="" rendered="{!
studentType=='Transfer'}" />
<apex:panelGrid columns="2" columnClasses="Column" rendered="{!
studentType=='Transfer'}">
<apex:panelGroup >
<apex:outputText styleclass="label" value="Prior College Code"/>
</apex:panelGroup>
<apex:inputField value="{!interest.Prior_College_Code__c}" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Prior College Name"/>
</apex:panelGroup>
<apex:inputField value="{!interest.Prior_College_Name__c}" />
Address"/>
<apex:panelGroup >
<apex:outputText styleclass="label" value="Prior College
</apex:panelGroup>
<apex:inputField value="{!interest.Prior_College_Address__c}" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Prior College City"/>
</apex:panelGroup>
<apex:inputField value="{!interest.Prior_College_City__c}" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Prior College
State/Province"/>
</apex:panelGroup>
<apex:inputField value="{!interest.Prior_College_State_Province__c}"

9. />
Code"/>
<apex:panelGroup >
<apex:outputText styleclass="label" value="Prior College Zip
</apex:panelGroup>
<apex:inputField value="{!interest.Prior_College_Zip_Code__c}" />
Country"/>
<apex:panelGroup >
<apex:outputText styleclass="label" value="Prior College
</apex:panelGroup>
<apex:inputField value="{!interest.Prior_College_Country__c}" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Date Attended From"/>
</apex:panelGroup>
<apex:inputField value="{!
interest.Prior_College_Date_Attended_From__c}" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Date Attended To"/>
</apex:panelGroup>
<apex:inputField value="{!
interest.Prior_College_Date_Attended_To__c}" />
Degree"/>
<apex:panelGroup >
<apex:outputText styleclass="label" value="Prior College
</apex:panelGroup>
<apex:inputField value="{!interest.Prior_College_Degree__c}" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Prior College GPA"/>
</apex:panelGroup>
<apex:inputField value="{!interest.Prior_College_GPA__c}" />
</apex:panelGrid>
</apex:outputPanel>
<apex:outputPanel id="InternationalOnly">
<apex:outputText styleclass="tableHeader" value="International
Information" rendered="{!admitType=='International'}" /><apex:outputText
styleclass="tableHeader" value="" rendered="{!admitType=='International'}" />
<apex:panelGrid columns="2" columnClasses="Column" rendered="{!
admitType=='International'}">
<apex:panelGroup >
<apex:outputText styleclass="label" value="Native Language"/>
</apex:panelGroup>
<apex:inputField value="{!con.First_Language__c}" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Nation of
Citizenship"/>
</apex:panelGroup>
<apex:inputField value="{!con.Citizenship_Country__c}" />
<apex:panelGroup >
<apex:outputText styleclass="label" value="Nation of Birth"/>
</apex:panelGroup>
<apex:inputField value="{!con.Birth_Country__c}" />
</apex:panelGrid>
</apex:outputPanel>

10. <div class="bottombuttons">
<apex:commandbutton value="Submit" onclick="submitForm(); return false;"
/>
</div>
</apex:form>
</apex:page>
<apex:outputPanel id="studType">
<apex:outputText styleclass="tableHeader" value="High School Information"
rendered="{!studentType=='Freshman'}" />
<apex:outputText styleclass="tableHeader" value="" rendered="{!
studentType=='Freshman'}" />
<!-- two column table specified -->
<apex:panelGrid columns="2" columnClasses="Column" rendered="{!
studentType=='Freshman'}">
<!-- row 1 cell 1 -->
<apex:panelGroup >
<apex:outputText styleclass="label" value="Home Schooled"/>
</apex:panelGroup>
<!-- row 1 cell 2 -->
<apex:inputField value="{!interest.Home_Schooled__c}" >
<apex:actionSupport event="onchange" rerender="highSchoolPanel"/>
</apex:inputField>
<!-- row 2 cell 1 -->
<apex:outputPanel id="highSchoolPanel">
<!-- nested table within the first cell in the second row -->
<apex:panelGrid columns="2" rendered="{!
interest.Home_Schooled__c==false}">
<apex:panelGroup >
<apex:outputText styleclass="label" value="High School Country"/>
</apex:panelGroup>
<apex:inputField value="{!interest.High_School_Country__c}">
<apex:actionSupport event="onchange"
rerender="highSchoolNamePanel"/>
</apex:inputField>
<apex:panelGroup >
<apex:outputText styleclass="label" value="High School
State/Province"/>
</apex:panelGroup>
[snip]
</apex:panelGrid>
</apex:outputPanel>
</apex:panelGrid>