Split form into clearer sections

public/parts/signup.php

@@ -6,15 +6,24 @@
  */
 ?>
 <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="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"/>
                     <div class="ml-auto mr-auto pl-4 align-self-center text-center">
                         <h1>Membership Application</h1>
                     </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">
 
@@ -149,21 +158,16 @@
                         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 />
+                </div>
+            </div>
+        </div>
 
+        <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
@@ -181,7 +185,30 @@
                         <i class="fas fa-plus"></i> Add another row
                     </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">
                     <input class="form-check-input" type="checkbox" value="1" name="agree_terms" id="agree_terms" required>
@@ -192,7 +219,20 @@
 
             </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">
                     <p>HACHE is an all-volunteer organization.  Listed below are events
@@ -262,11 +302,13 @@
                 </div>
 
             </div>
+        </div>
 
+        <div class="card mb-4">
             <div class="card-footer">
                 <button type="submit" class="btn btn-primary">Submit Application</button>
             </div>
-
+        </div>
     </form>
 </div>