Split form into clearer sections

master
Skylar Ittner 6 years ago
parent a3961dc2c1
commit 00837a7bc1

@ -6,182 +6,209 @@
*/
?>
<div class="container mt-4">
<form class="card" action="actions/submitmembership.php" method="post">
<div class="card-body">
<form action="actions/submitmembership.php" method="post">
<div class="card mb-4">
<div class="card-body">
<div class="d-flex flex-wrap justify-content-around mb-4">
<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">
<h1>Membership Application</h1>
<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"/>
<div class="ml-auto mr-auto pl-4 align-self-center text-center">
<h1>Membership Application</h1>
</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
$textboxes = [
[
"label" => "Family Name (Last Name)",
"icon" => "fas fa-users",
"name" => "familyname",
"maxlength" => 100
],
[
"label" => "Father's Name",
"icon" => "fas fa-male",
"name" => "fathername",
"maxlength" => 255
],
[
"label" => "Mother's Name",
"icon" => "fas fa-female",
"name" => "mothername",
"maxlength" => 255
],
[
"label" => "Street Address",
"icon" => "fas fa-home",
"name" => "streetaddress",
"maxlength" => 500
],
[
"label" => "City",
"icon" => "fas fa-city",
"name" => "city",
"maxlength" => 255,
"width" => 3
],
[
"label" => "State",
"icon" => "fas fa-flag",
"name" => "state",
"maxlength" => 2,
"value" => "MT",
"width" => 2
],
[
"label" => "ZIP/Postal Code",
"icon" => "fas fa-mail-bulk",
"name" => "zip",
"maxlength" => 20,
"width" => 3
],
[
"label" => "Phone Number",
"icon" => "fas fa-phone",
"name" => "phone",
"maxlength" => 20
],
[
"label" => "Email",
"icon" => "fas fa-at",
"name" => "email",
"maxlength" => 255,
"type" => "email",
],
[
"label" => "Newsletter Preference",
"icon" => "fas fa-newspaper",
"name" => "newsletter_method",
"type" => "select",
"options" => [
"1" => "Email ($25)",
"2" => "Snail Mail ($35)",
"3" => "Email and Snail Mail ($35)"
<div class="row">
<?php
$textboxes = [
[
"label" => "Family Name (Last Name)",
"icon" => "fas fa-users",
"name" => "familyname",
"maxlength" => 100
],
[
"label" => "Father's Name",
"icon" => "fas fa-male",
"name" => "fathername",
"maxlength" => 255
],
[
"label" => "Mother's Name",
"icon" => "fas fa-female",
"name" => "mothername",
"maxlength" => 255
],
[
"label" => "Street Address",
"icon" => "fas fa-home",
"name" => "streetaddress",
"maxlength" => 500
],
[
"label" => "City",
"icon" => "fas fa-city",
"name" => "city",
"maxlength" => 255,
"width" => 3
],
[
"label" => "State",
"icon" => "fas fa-flag",
"name" => "state",
"maxlength" => 2,
"value" => "MT",
"width" => 2
],
[
"label" => "ZIP/Postal Code",
"icon" => "fas fa-mail-bulk",
"name" => "zip",
"maxlength" => 20,
"width" => 3
],
[
"label" => "Phone Number",
"icon" => "fas fa-phone",
"name" => "phone",
"maxlength" => 20
],
[
"label" => "Email",
"icon" => "fas fa-at",
"name" => "email",
"maxlength" => 255,
"type" => "email",
],
[
"label" => "Newsletter Preference",
"icon" => "fas fa-newspaper",
"name" => "newsletter_method",
"type" => "select",
"options" => [
"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="form-group mb-3">
<label class="mb-0"><?php echo $item['label']; ?>:</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="<?php echo $item['icon']; ?>"></i></span>
<div class="col-12 col-md-<?php echo (empty($item['width']) ? "4" : $item['width']); ?>">
<div class="form-group mb-3">
<label class="mb-0"><?php echo $item['label']; ?>:</label>
<div class="input-group">
<div class="input-group-prepend">
<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>
<?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>
<?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 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.
<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 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>
Please list your children's first names and birth dates. This
information will appear in our members directory. Members
agree that they will NOT make this information public.
<hr />
<div class="list-group" id="child_list">
<?php
for ($i = 0; $i < 2; $i++) {
include __DIR__ . "/template_child_entry.php";
}
?>
</div>
<p>
Please list your children's first names and birth dates. This
information will appear in our members directory. Members
agree that they will NOT make this information public.
<div class="btn btn-sm btn-primary mt-1" id="add_child_row">
<i class="fas fa-plus"></i> Add another row
</div>
<div class="list-group" id="child_list">
<?php
for ($i = 0; $i < 2; $i++) {
include __DIR__ . "/template_child_entry.php";
}
?>
</div>
</div>
</div>
<div class="btn btn-sm btn-primary mt-1" id="add_child_row">
<i class="fas fa-plus"></i> Add another row
</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">
<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">
<input class="form-check-input" type="checkbox" value="1" name="agree_terms" id="agree_terms" required>
@ -192,81 +219,96 @@
</div>
<hr />
</div>
<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 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>
<?php
$events = $database->select('events', ['eventid (id)', 'event (name)']);
<div class="card-body">
<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 = [];
$colb = [];
$cola = [];
$colb = [];
for ($i = 0; $i < $eventcount; $i++) {
if ($i % 2 === 0) {
$cola[] = $events[$i];
} else {
$colb[] = $events[$i];
for ($i = 0; $i < $eventcount; $i++) {
if ($i % 2 === 0) {
$cola[] = $events[$i];
} else {
$colb[] = $events[$i];
}
}
}
?>
?>
<div class="row">
<div class="row">
<div class="col-12 col-md-6">
<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>
<div class="col-12 col-md-6">
<ul class="list-group">
<?php
}
?>
</ul>
</div>
<div class="col-12 col-md-6">
<ul class="list-group">
<?php
foreach ($colb as $ev) {
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
}
?>
<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>
</ul>
</div>
<div class="col-12 col-md-6">
<ul class="list-group">
<?php
}
?>
</ul>
foreach ($colb 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
}
?>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit Application</button>
<div class="card mb-4">
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit Application</button>
</div>
</div>
</form>
</div>

Loading…
Cancel
Save