<link href="_files/css/responsive-form-standard.css" media="screen" rel="stylesheet"
type="text/css"/>
<form accept-charset="UTF-8" action="https://www.geneva.edu/cgi-bin/formmail.pl"
method="post" >
<input name="recipient" type="hidden" 
value="put the EMAIL OF RECIPIENTS for the form here" />
<input name="Subject" type="hidden" 
value="put the NAME for the form HERE (only the RECIPIENTS will see this NAME)" />
<input name="redirect" type="hidden" value="http://www.geneva.edu/sent/thankyou" />

Skeleton Form styling changes the <h3> tag, as seen immediately below:

Use the <h3> tag to head sections of forms written with skeleton styling.

Race & Ethnicity (Optional):

<div>
<h3>Race & Ethnicity (Optional):</h3>
</div>

<div><label>Do you identify yourself as a person of Hispanic/Latino origin?</label>
<div><input name="Hispanic/Latino origin?" type="radio" value="yes" /> Yes 
<input name="Hispanic/Latino origin?" type="radio" value="no" /> No</div>
</div>

<div><label">Please indicate your race. Check all that apply.</label>
<div><input name="Please indicate your race." type="checkbox" 
value="American Indian or Alaska Native" /> American Indian or Alaska Native<br />
<input name="Please indicate your race." type="checkbox" value="Asian" /> Asian<br />
<input name="Please indicate your race." type="checkbox" value="White" /> White<br />
</div>

<div>
<h3>Personal Information and Term Selection:</h3>
</div>

<div><label>First Name:</label>
<div><input name="First Name" size="40" type="text" /></div>
</div>

<div><label>GPA:</label>
<div><input name="GPA is" type="radio" value="Actual" /> My actual GPA is: <input name="Actual GPA" size="5" type="text" /><br />
<input name="GPA is" type="radio" value="Approximate" /> My approximate GPA is:  <input name="Approximate GPA" size="5" type="text" /></div>
</div>

<div><label>Marital Status:</label>
<div><input name=" Single" type="checkbox" value="value" /> Single
<input name="divorced" type="checkbox" value="value" /> divorced/Separated</div>
</div>

<div><label>Term:</label>
<div><select name="Enrollment Term" required="" size="1">
<option selected="selected" value="">--Select a Desired Term--</option>
<option value="FALL: July">FALL: July</option>
</select></div>   

Skeleton Styling also changes the <hr /> tag as seen below, shown as a grey line with a healthy margin set both above and below it.

Use the <hr /> tag to separate sub sections in forms, increasing readability

In application, this section with out use of the <hr /> tag would be both hard to read and unpleasing to the eye.

Essay Field:

<div>
<h3>Text Area Questions:</h3>
</div>

<div><label>How did you ...</label>
<div><textarea cols="40" name="Referred By"></textarea></div>
</div><hr />

<div><label>If there are ...</label>
<div><textarea cols="60" name="Reason for Gaps" rows="10"></textarea></div>
</div><hr />

<div><p>If you have ...</i></p>
<textarea cols="49" name="Graduate Institution(s)  " rows="3" style="height: 52px;"></textarea>
</div><hr />

<label><i>(optional)</i><br />If there is ...</label>
<div><textarea cols="60" name="Other Information" rows="3" style="height: 52px;" wrap="virtual"></textarea>
</div><hr />

<p>Essay Field:</p>
<textarea name="Essay" rows="10" style="width: 90%;"></textarea>

<div>
<h3>Previous Education</h3>
</div>
<div>
<p>List all colleges/universities previously attended (include Geneva if you attended in the past)</p>
<table border="0" cellpadding="2" class="table" style="width: 100%;" width="100%">
<tbody>
<tr>
<td>
<p> </p>
</td>
<td>
<p>First School</p>
</td>
<td>
<p>Second School</p>
</td>
<td>
<p>Third School</p>
</td>
</tr>
<tr>
<td>
<p>Name of college</p>
</td>
<td>
<p><input name="Name of College 1" type="text" /></p>
</td>
<td>
<p><input name="Name of College  2" type="text" /></p>
</td>
<td>
<p><input name="Name of College 3" type="text" /></p>
</td>
</tr>
<tr>
<td>
<p>Dates Attended</p>
</td>
<td>
<p><input name="Dates attended 1" type="text" /></p>
</td>
<td>
<p><input name="Dates Attended 2" type="text" /></p>
</td>
<td>
<p><input name="Dates Attended 3" type="text" /></p>
</td>
</tr>
<tr>
<td>
<p>Major</p>
</td>
<td>
<p><input name="Major 1" type="text" /></p>
</td>
<td>
<p><input name="Major 2" type="text" /></p>
</td>
<td>
<p><input name="Major 3" type="text" /></p>
</td>
</tr>
<tr>
<td>
<p>Degree or # Credits</p>
</td>
<td>
<p><input name="Degree or # Credits 1" type="text" /></p>
</td>
<td>
<p><input name="Degree or # Credits 2" type="text" /></p>
</td>
<td>
<p><input name="Degree or # Credits 3" type="text" /></p>
</td>
</tr>
</tbody>
</table>
</div>

Close Form