Split form into clearer sections

master
Skylar Ittner 6 years ago
parent a3961dc2c1
commit 00837a7bc1

@ -6,182 +6,209 @@
*/ */
?> ?>
<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-body"> <div class="card mb-4">
<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="row"> <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">
<?php <div class="row">
$textboxes = [
[ <?php
"label" => "Family Name (Last Name)", $textboxes = [
"icon" => "fas fa-users", [
"name" => "familyname", "label" => "Family Name (Last Name)",
"maxlength" => 100 "icon" => "fas fa-users",
], "name" => "familyname",
[ "maxlength" => 100
"label" => "Father's Name", ],
"icon" => "fas fa-male", [
"name" => "fathername", "label" => "Father's Name",
"maxlength" => 255 "icon" => "fas fa-male",
], "name" => "fathername",
[ "maxlength" => 255
"label" => "Mother's Name", ],
"icon" => "fas fa-female", [
"name" => "mothername", "label" => "Mother's Name",
"maxlength" => 255 "icon" => "fas fa-female",
], "name" => "mothername",
[ "maxlength" => 255
"label" => "Street Address", ],
"icon" => "fas fa-home", [
"name" => "streetaddress", "label" => "Street Address",
"maxlength" => 500 "icon" => "fas fa-home",
], "name" => "streetaddress",
[ "maxlength" => 500
"label" => "City", ],
"icon" => "fas fa-city", [
"name" => "city", "label" => "City",
"maxlength" => 255, "icon" => "fas fa-city",
"width" => 3 "name" => "city",
], "maxlength" => 255,
[ "width" => 3
"label" => "State", ],
"icon" => "fas fa-flag", [
"name" => "state", "label" => "State",
"maxlength" => 2, "icon" => "fas fa-flag",
"value" => "MT", "name" => "state",
"width" => 2 "maxlength" => 2,
], "value" => "MT",
[ "width" => 2
"label" => "ZIP/Postal Code", ],
"icon" => "fas fa-mail-bulk", [
"name" => "zip", "label" => "ZIP/Postal Code",
"maxlength" => 20, "icon" => "fas fa-mail-bulk",
"width" => 3 "name" => "zip",
], "maxlength" => 20,
[ "width" => 3
"label" => "Phone Number", ],
"icon" => "fas fa-phone", [
"name" => "phone", "label" => "Phone Number",
"maxlength" => 20 "icon" => "fas fa-phone",
], "name" => "phone",
[ "maxlength" => 20
"label" => "Email", ],
"icon" => "fas fa-at", [
"name" => "email", "label" => "Email",
"maxlength" => 255, "icon" => "fas fa-at",
"type" => "email", "name" => "email",
], "maxlength" => 255,
[ "type" => "email",
"label" => "Newsletter Preference", ],
"icon" => "fas fa-newspaper", [
"name" => "newsletter_method", "label" => "Newsletter Preference",
"type" => "select", "icon" => "fas fa-newspaper",
"options" => [ "name" => "newsletter_method",
"1" => "Email ($25)", "type" => "select",
"2" => "Snail Mail ($35)", "options" => [
"3" => "Email and Snail Mail ($35)" "1" => "Email ($25)",
"2" => "Snail Mail ($35)",
"3" => "Email and Snail Mail ($35)"
]
] ]
] ];
];
foreach ($textboxes as $item) { foreach ($textboxes as $item) {
?> ?>
<div class="col-12 col-md-<?php echo (empty($item['width']) ? "4" : $item['width']); ?>"> <div class="col-12 col-md-<?php echo (empty($item['width']) ? "4" : $item['width']); ?>">
<div class="form-group mb-3"> <div class="form-group mb-3">
<label class="mb-0"><?php echo $item['label']; ?>:</label> <label class="mb-0"><?php echo $item['label']; ?>:</label>
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span class="input-group-text"><i class="<?php echo $item['icon']; ?>"></i></span> <span class="input-group-text"><i class="<?php echo $item['icon']; ?>"></i></span>
</div>
<?php if (empty($item['type']) || $item['type'] != "select") { ?>
<input type="<?php echo (empty($item['type']) ? "text" : $item['type']); ?>"
name="<?php echo $item['name']; ?>"
class="form-control"
placeholder=""
aria-label="<?php echo $item['label']; ?>"
maxlength="<?php echo $item['maxlength']; ?>"
<?php
if (!empty($item['value'])) {
echo "value=\"$item[value]\" ";
}
?>required />
<?php } else if ($item['type'] == "select") { ?>
<select class="form-control"
name="<?php echo $item['name']; ?>"
aria-label="<?php echo $item['label']; ?>"
required>
<?php
foreach ($item['options'] as $value => $label) {
echo "<option value=\"$value\">$label</option>";
}
?>
</select>
<?php
}
?>
</div> </div>
<?php if (empty($item['type']) || $item['type'] != "select") { ?>
<input type="<?php echo (empty($item['type']) ? "text" : $item['type']); ?>"
name="<?php echo $item['name']; ?>"
class="form-control"
placeholder=""
aria-label="<?php echo $item['label']; ?>"
maxlength="<?php echo $item['maxlength']; ?>"
<?php
if (!empty($item['value'])) {
echo "value=\"$item[value]\" ";
}
?>required />
<?php } else if ($item['type'] == "select") { ?>
<select class="form-control"
name="<?php echo $item['name']; ?>"
aria-label="<?php echo $item['label']; ?>"
required>
<?php
foreach ($item['options'] as $value => $label) {
echo "<option value=\"$value\">$label</option>";
}
?>
</select>
<?php
}
?>
</div> </div>
</div> </div>
</div>
<?php <?php
} }
?> ?>
</div>
<div class="card-text">
<p>
These membership fees cover costs of the following:
phone; website; postage; distribution of newsletters and
directories; publication of materials; library; and other
HACHE related activities. Dues are reduced as of March 1st.
HACHE will not restrict membership based on inability to
pay. HACHE does not mandate curriculum choices or the
manner in which curriculum is administered. We do encourage
all members to follow and adhere to MT laws governing home
schooling.
</div>
</div> </div>
</div>
<div class="card-text"> <div class="card mb-4">
<p> <div class="card-header">
These membership fees cover costs of the following: <h3><i class="fas fa-user-graduate fa-fw"></i> Children</h3>
phone; website; postage; distribution of newsletters and </div>
directories; publication of materials; library; and other <div class="card-body">
HACHE related activities. Dues are reduced as of March 1st. <div class="card-text">
HACHE will not restrict membership based on inability to <p>
pay. HACHE does not mandate curriculum choices or the Please list your children's first names and birth dates. This
manner in which curriculum is administered. We do encourage information will appear in our members directory. Members
all members to follow and adhere to MT laws governing home agree that they will NOT make this information public.
schooling.
<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>
<hr /> <div class="list-group" id="child_list">
<?php
for ($i = 0; $i < 2; $i++) {
include __DIR__ . "/template_child_entry.php";
}
?>
</div>
<p> <div class="btn btn-sm btn-primary mt-1" id="add_child_row">
Please list your children's first names and birth dates. This <i class="fas fa-plus"></i> Add another row
information will appear in our members directory. Members </div>
agree that they will NOT make this information public.
<div class="list-group" id="child_list">
<?php
for ($i = 0; $i < 2; $i++) {
include __DIR__ . "/template_child_entry.php";
}
?>
</div> </div>
</div>
</div>
<div class="btn btn-sm btn-primary mt-1" id="add_child_row"> <div class="card mb-4">
<i class="fas fa-plus"></i> Add another row <div class="card-header">
</div> <h3><i class="fas fa-check-circle fa-fw"></i> Consent</h3>
</div>
<div class="card-body">
<hr /> <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,81 +219,96 @@
</div> </div>
<hr /> </div>
<div class="card-text"> <div class="card mb-4">
<p>HACHE is an all-volunteer organization. Listed below are events <div class="card-header">
and activities that may occur throughout the year. If you are <h3>
interested in helping with one or more of these events please <span class="fa-layers fa-fw">
select any and all events of interest so we can get you in touch <i class="fas fa-basketball-ball" data-fa-transform="shrink-5 up-4.5 left-4.5"></i>
with the member in charge of said event. Please feel free to <i class="fas fa-book" data-fa-transform="shrink-5 right-4.5 down-4.5"></i>
contact Steering Committee members or the newsletter editor with </span>
ideas for field trips and or other activities that may be Activities
enjoyed by all. (Not all of these events are specifically </h3>
HACHE events, but rather events HACHE supported events our
members have participated in and enjoyed in past years.)
</div> </div>
<?php <div class="card-body">
$events = $database->select('events', ['eventid (id)', 'event (name)']);
<div class="card-text">
<p>HACHE is an all-volunteer organization. Listed below are events
and activities that may occur throughout the year. If you are
interested in helping with one or more of these events please
select any and all events of interest so we can get you in touch
with the member in charge of said event. Please feel free to
contact Steering Committee members or the newsletter editor with
ideas for field trips and or other activities that may be
enjoyed by all. (Not all of these events are specifically
HACHE events, but rather events HACHE supported events our
members have participated in and enjoyed in past years.)
</div>
<?php
$events = $database->select('events', ['eventid (id)', 'event (name)']);
$eventcount = count($events); $eventcount = count($events);
$cola = []; $cola = [];
$colb = []; $colb = [];
for ($i = 0; $i < $eventcount; $i++) { for ($i = 0; $i < $eventcount; $i++) {
if ($i % 2 === 0) { if ($i % 2 === 0) {
$cola[] = $events[$i]; $cola[] = $events[$i];
} else { } else {
$colb[] = $events[$i]; $colb[] = $events[$i];
}
} }
} ?>
?>
<div class="row"> <div class="row">
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
<ul class="list-group"> <ul class="list-group">
<?php
foreach ($cola as $ev) {
?>
<li class="list-group-item">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="events_<?php echo $ev['id']; ?>" value="<?php echo $ev['id']; ?>" name="events[]">
<label class="form-check-label" for="events_<?php echo $ev['id']; ?>"><?php echo $ev['name']; ?></label>
</div>
</li>
<?php <?php
} foreach ($cola as $ev) {
?> ?>
</ul> <li class="list-group-item">
</div> <div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="events_<?php echo $ev['id']; ?>" value="<?php echo $ev['id']; ?>" name="events[]">
<div class="col-12 col-md-6"> <label class="form-check-label" for="events_<?php echo $ev['id']; ?>"><?php echo $ev['name']; ?></label>
<ul class="list-group"> </div>
<?php </li>
foreach ($colb as $ev) { <?php
}
?> ?>
<li class="list-group-item"> </ul>
<div class="form-check form-check-inline"> </div>
<input class="form-check-input" type="checkbox" id="events_<?php echo $ev['id']; ?>" value="<?php echo $ev['id']; ?>" name="events[]">
<label class="form-check-label" for="events_<?php echo $ev['id']; ?>"><?php echo $ev['name']; ?></label> <div class="col-12 col-md-6">
</div> <ul class="list-group">
</li>
<?php <?php
} foreach ($colb as $ev) {
?> ?>
</ul> <li class="list-group-item">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="events_<?php echo $ev['id']; ?>" value="<?php echo $ev['id']; ?>" name="events[]">
<label class="form-check-label" for="events_<?php echo $ev['id']; ?>"><?php echo $ev['name']; ?></label>
</div>
</li>
<?php
}
?>
</ul>
</div>
</div> </div>
</div>
</div>
</div> </div>
<div class="card-footer"> <div class="card mb-4">
<button type="submit" class="btn btn-primary">Submit Application</button> <div class="card-footer">
<button type="submit" class="btn btn-primary">Submit Application</button>
</div>
</div> </div>
</form> </form>
</div> </div>

Loading…
Cancel
Save