Split form into clearer sections

This commit is contained in:
Skylar Ittner 2018-11-30 11:43:21 -07:00
parent a3961dc2c1
commit 00837a7bc1

View File

@ -6,15 +6,24 @@
*/ */
?> ?>
<div class="container mt-4"> <div class="container mt-4">
<form class="card" action="actions/submitmembership.php" method="post"> <form action="actions/submitmembership.php" method="post">
<div class="card mb-4">
<div class="card-body"> <div class="card-body">
<div class="d-flex flex-wrap justify-content-around mb-4"> <div class="d-flex flex-wrap justify-content-around">
<img class="img-fluid" style="max-height: 100px; min-width: 100px;" src="static/hachelogo.svg" alt="HACHE: Helena Area Christian Home Educators"/> <img class="img-fluid" style="max-height: 100px; min-width: 100px;" src="static/hachelogo.svg" alt="HACHE: Helena Area Christian Home Educators"/>
<div class="ml-auto mr-auto pl-4 align-self-center text-center"> <div class="ml-auto mr-auto pl-4 align-self-center text-center">
<h1>Membership Application</h1> <h1>Membership Application</h1>
</div> </div>
</div> </div>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<h3><i class="fas fa-info fa-fw"></i> Basic Information</h3>
</div>
<div class="card-body">
<div class="row"> <div class="row">
@ -149,21 +158,16 @@
manner in which curriculum is administered. We do encourage manner in which curriculum is administered. We do encourage
all members to follow and adhere to MT laws governing home all members to follow and adhere to MT laws governing home
schooling. schooling.
<p class="mb-0">HACHE members occasionally take pictures of students during </div>
home school functions and activities. These photos may be </div>
used in HACHE displays, brochures, website, etc. </div>
<p>I give permission for my photos to be included in such displays:
<span class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="photo_permission" id="photo_permission" value="1" required>
<label class="form-check-label" for="photo_permission">Yes</label>
</span>
<span class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="photo_permission" id="photo_permission" value="0" required>
<label class="form-check-label" for="photo_permission">No</label>
</span>
<hr />
<div class="card mb-4">
<div class="card-header">
<h3><i class="fas fa-user-graduate fa-fw"></i> Children</h3>
</div>
<div class="card-body">
<div class="card-text">
<p> <p>
Please list your children's first names and birth dates. This Please list your children's first names and birth dates. This
information will appear in our members directory. Members information will appear in our members directory. Members
@ -181,7 +185,30 @@
<i class="fas fa-plus"></i> Add another row <i class="fas fa-plus"></i> Add another row
</div> </div>
<hr /> </div>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<h3><i class="fas fa-check-circle fa-fw"></i> Consent</h3>
</div>
<div class="card-body">
<div class="card-text">
<p class="mb-0">HACHE members occasionally take pictures of students during
home school functions and activities. These photos may be
used in HACHE displays, brochures, website, etc.
<p>I give permission for my photos to be included in such displays:
<span class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="photo_permission" id="photo_permission" value="1" required>
<label class="form-check-label" for="photo_permission">Yes</label>
</span>
<span class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="photo_permission" id="photo_permission" value="0" required>
<label class="form-check-label" for="photo_permission">No</label>
</span>
</div>
<div class="form-check"> <div class="form-check">
<input class="form-check-input" type="checkbox" value="1" name="agree_terms" id="agree_terms" required> <input class="form-check-input" type="checkbox" value="1" name="agree_terms" id="agree_terms" required>
@ -192,7 +219,20 @@
</div> </div>
<hr /> </div>
<div class="card mb-4">
<div class="card-header">
<h3>
<span class="fa-layers fa-fw">
<i class="fas fa-basketball-ball" data-fa-transform="shrink-5 up-4.5 left-4.5"></i>
<i class="fas fa-book" data-fa-transform="shrink-5 right-4.5 down-4.5"></i>
</span>
Activities
</h3>
</div>
<div class="card-body">
<div class="card-text"> <div class="card-text">
<p>HACHE is an all-volunteer organization. Listed below are events <p>HACHE is an all-volunteer organization. Listed below are events
@ -262,11 +302,13 @@
</div> </div>
</div> </div>
</div>
<div class="card mb-4">
<div class="card-footer"> <div class="card-footer">
<button type="submit" class="btn btn-primary">Submit Application</button> <button type="submit" class="btn btn-primary">Submit Application</button>
</div> </div>
</div>
</form> </form>
</div> </div>