Split form into clearer sections
This commit is contained in:
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.
|
|
||||||
<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 />
|
|
||||||
|
|
||||||
<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="list-group" id="child_list">
|
|
||||||
<?php
|
|
||||||
for ($i = 0; $i < 2; $i++) {
|
|
||||||
include __DIR__ . "/template_child_entry.php";
|
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="btn btn-sm btn-primary mt-1" id="add_child_row">
|
<div class="card-text">
|
||||||
<i class="fas fa-plus"></i> Add another row
|
<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>
|
||||||
|
|
||||||
<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>
|
||||||
|
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="list-group" id="child_list">
|
||||||
|
<?php
|
||||||
|
for ($i = 0; $i < 2; $i++) {
|
||||||
|
include __DIR__ . "/template_child_entry.php";
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</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>
|
||||||
|
</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,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)']);
|
|
||||||
|
|
||||||
$eventcount = count($events);
|
<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>
|
||||||
|
|
||||||
$cola = [];
|
<?php
|
||||||
$colb = [];
|
$events = $database->select('events', ['eventid (id)', 'event (name)']);
|
||||||
|
|
||||||
for ($i = 0; $i < $eventcount; $i++) {
|
$eventcount = count($events);
|
||||||
if ($i % 2 === 0) {
|
|
||||||
$cola[] = $events[$i];
|
$cola = [];
|
||||||
} else {
|
$colb = [];
|
||||||
$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">
|
<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 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 class="col-12 col-md-6">
|
||||||
|
<ul class="list-group">
|
||||||
|
<?php
|
||||||
|
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 class="col-12 col-md-6">
|
|
||||||
<ul class="list-group">
|
|
||||||
<?php
|
|
||||||
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">
|
<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…
x
Reference in New Issue
Block a user