Responsive Form: Fieldset Styling - Geneva College

Responsive Form: Fieldset Styling

Responsive Form: Fieldset Styling

Responsive Form: Fieldset Styling

This styling is quite basic in appearance. It has been written to be so. If you can not do everything you desire, consider using a different form styling. Your goal, in using this form styling, should be to keep the form simple.

Pages with this Style Impimented

Sample Form

Below lies a short, fictitious form with single examples of every implimented insance of this format needed to understand and impliment this style of format.

To view the full effects of this styling, adjust the width of your browsers window, as it is responsive to the size of the viewers screen size, and can thus be used to style forms to be completed on any device.

NOTE: It is critical to refference the red bolded stylesheet, else the styling shown below will not display.

NOTE: Make sure to also close the form with the red-bold shown at the bottom.

Open Form

<link href="/_files/css/responsive-form-fieldset.css" 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" />
Type="time", "text", and "textarea"

Please Describe The Behavior/Situation You Are Concerned About Or Witnessed

Example Form: half size text area; Example Form: half size text area; Example Form: half size text area; Example Form: half size text area; Example Form: half size text area; Example Form: half size text area;
Example Form: half size text area

Sub Instructions can go here
<fieldset><legend>Type="time", "text", and "textarea"</legend>

<div class="row">
<div class="six columns"><label>Time of incident:
<input name="Time of incident" placeholder="00:00 AM or PM" type="time" /></label></div>
<div class="six columns"><label>Date of incident:
<input name="Date of incident" placeholder="mm/dd/yyyy" type="text" /></label></div>
</div>

<div class="row"><label>Complete description of incident:</label><br />
<span>Please Describe The Behavior/Situation You Are Concerned About Or Witnessed</span><br />
<label><textarea name="Complete description of incident" textarea=""></textarea></label></div>
<hr />

<div class="row">
<div class="six columns">
<p>Example Form: half size text area</p>
</div>
<div class="six columns"><textarea name="half size text area" textarea=""></textarea>
<span>Sub Instructions can go here</span></div></div>

</fieldset>
drop down, radio, checkbox, and radio text
Yes
No
Blue
Red
Green
Deep Green-Cyan Turquoise
My actual GPA is: My approximate GPA is: 
<fieldset><legend>drop down, radio, checkbox, and radio text</legend>

<div class="row">
<div class="six columns"><label>Email:
<select name="Enrollment Term" required="" size="1">
<option selected="selected" value="">--Select a Desired Term--</option>
<option value="FALL: July">FALL: July</option>
</select>
</label></div>
<div class="six columns"><label>Did you pick blue?</label>
<div id="pad">
<input name="Hispanic/Latino origin?" type="radio" value="yes" /> Yes <br />
<input name="Hispanic/Latino origin?" type="radio" value="no" /> No
</div></div>
</div>

<div class="row">
<div class="six columns"><label> What Colors Do You like? </label>
<div id="pad">
<input name="Color." type="checkbox" value="Blue" /> Blue <br />
<input name="Color." type="checkbox" value="Deep Green-Cyan Turquoise" /> Deep Green-Cyan Turquoise
</div></div>
<div class="six columns"><label>GPA:</label>
<div id="pad">
<input name="GPA is" type="radio" value="Actual" />My actual GPA is:
<span><input name="Actual GPA" size="5" type="text" /></span>
<input name="GPA is" type="radio" value="Approximate" />My approximate GPA is: 
<span><input name="Approximate GPA" size="5" type="text" /></span>
</div></div>
</div>

</fieldset>
Cokes and Connections Registration
Yes      No
Yes      No
Yes      No

Due to the location outside, power supply is limited. We will do our best to accommodate your needs, so please let us know if a power suppy is important for your display.

*required
<fieldset><legend>Cokes and Connections Registration</legend>

<div class="row">
<div class="six columns"><label>*Organization Name: <input name="Org Name" required="" type="text" /></label></div>
<div class="six columns"><label>*Are you able to participate on</label>
<div id="pad"><label>September 9th? </label>
<div id="pad"><input name="I am able to participate" required="" type="radio" value="yes" /> Yes     <input name="I am able to participate" type="radio" value="no" /> No</div>
</div>
<div id="pad"><label>September 16th (Rain Date)? </label>
<div id="pad"><input name="I am able to participate on raindate" required="" type="radio" value="yes" /> Yes      <input name="I am able to participate on raindate" type="radio" value="no" />No</div>
</div></div>
</div>

<div class="row">
<div class="six columns"><label>*Names of all those representing your organization: <textarea name="names of reprentatives" required="" textarea=""></textarea></label></div>
<div class="six columns"><label>*Will you require a power supply?</label>
<div id="pad"><input name="power supply" required="" type="radio" value="yes" /> Yes      <input name="power supply" type="radio" value="no" /> No</div>
<span><em><br />Due to the location ... display.</em></span><br /><br /><span><em>*required</em></span></div>
</div>

</fieldset>
Manage Subscription

*required
<div class="row">
<div class="six columns">
<fieldset>
<legend>Manage Subscription</legend>

<div class="row"><label>*Name: <input name="name" required="" type="text" /></label></div>
<div class="row"><label>*E-mail <input name="email:" required="" type="text" /></label></div>

<div class="row"><label>*Specify Subscription Option:<select name="Subscription Option" required="" size="1">
<option selected="selected" value="">--Select Option--</option>
<option value="Subscribe">Subscribe</option>
<option value="Unsubscribe">Unsubscribe</option>
<option value="Change Email Address">Change E-mail Address</option>
</select></label><br /><span><em style="text-align: right;">*required</em></span></div>

</fieldset></div></div>

Close Form

Include [id="mar"] in the input tag for the button. This will set the button of the form to allign with the input fields of the form.

<input id="mar" name="submit" type="submit" value="Submit Report" /></form>



© Geneva College | All rights reserved