westfarn
3ea2cfde0e
Add per-page titles/meta/Open Graph, semantic landmarks, robots/sitemap/llms.txt, and accessibility fixes so humans and agents can discover and navigate the site reliably.
423 lines
24 KiB
HTML
423 lines
24 KiB
HTML
{% extends 'schasite/base2.html' %}
|
|
{% load static %}
|
|
|
|
{% block pagetitle %}
|
|
<title>Join Today | Stonehedge Community Homeowners Association</title>
|
|
<style type="text/css">
|
|
/* Membership Form Specific Styles */
|
|
#membershipForm fieldset {
|
|
margin-bottom: 2rem;
|
|
padding: 1.5rem;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
#membershipForm legend {
|
|
width: auto;
|
|
padding: 0 0.5rem;
|
|
margin-bottom: 0;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.form-check-label {
|
|
user-select: none;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 767.98px) {
|
|
#membershipForm fieldset {
|
|
padding: 1rem;
|
|
}
|
|
|
|
#membershipForm legend {
|
|
font-size: 1.1rem;
|
|
}
|
|
}
|
|
|
|
/* Form validation styling */
|
|
.was-validated .form-control:valid,
|
|
.was-validated .form-control.is-valid {
|
|
border-color: #198754;
|
|
background-image: none;
|
|
}
|
|
|
|
.was-validated .form-control:invalid,
|
|
.was-validated .form-control.is-invalid {
|
|
border-color: #dc3545;
|
|
background-image: none;
|
|
}
|
|
|
|
/* Modal styling */
|
|
.modal-content {
|
|
border: none;
|
|
}
|
|
|
|
.modal-header {
|
|
background-color: var(--bs-success);
|
|
color: white;
|
|
}
|
|
|
|
.modal-header .btn-close {
|
|
filter: invert(1);
|
|
}
|
|
</style>
|
|
|
|
{% endblock %}
|
|
|
|
{% block meta_tags %}
|
|
<meta name="description" content="Join Stonehedge Community Homeowners Association. Submit membership details, household contacts, and committee interests.">
|
|
{% endblock %}
|
|
{% block og_title %}Join Today | Stonehedge Community Homeowners Association{% endblock %}
|
|
{% block og_description %}Join Stonehedge Community Homeowners Association. Submit membership details, household contacts, and committee interests.{% endblock %}
|
|
{% block twitter_title %}Join Today | Stonehedge Community Homeowners Association{% endblock %}
|
|
{% block twitter_description %}Join Stonehedge Community Homeowners Association. Submit membership details, household contacts, and committee interests.{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="py-5">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-success text-white">
|
|
<h1 class="h4 mb-0">New Member Information</h1>
|
|
</div>
|
|
<div class="card-body">
|
|
<form id="membershipForm" method="POST" action='{% url "membership_form2" %}' class="needs-validation" novalidate>
|
|
{% csrf_token %}
|
|
<!-- Household Information -->
|
|
<fieldset class="mb-4">
|
|
<legend class="h5 text-success border-bottom pb-2">Household Information</legend>
|
|
|
|
<!-- Address Section -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-6">
|
|
<label for="streetAddress" class="form-label">Street Address*</label>
|
|
<input type="text" class="form-control" id="streetAddress" name="streetAddress" required>
|
|
<div class="invalid-feedback">
|
|
Please provide your street address.
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="unit" class="form-label">Unit/Apt #</label>
|
|
<input type="text" class="form-control" id="unit" name="unit">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="city" class="form-label">City*</label>
|
|
<input type="text" class="form-control" id="city" name="city" value="Wheaton" required>
|
|
<div class="invalid-feedback">
|
|
Please provide your city.
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="state" class="form-label">State*</label>
|
|
<select class="form-select" id="state" name="state" value="Illinois" required>
|
|
<option value="" selected disabled>Choose...</option>
|
|
<option>IL</option>
|
|
</select>
|
|
<div class="invalid-feedback">
|
|
Please select your state.
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="zipCode" class="form-label">ZIP Code*</label>
|
|
<input type="text" class="form-control" id="zipCode" name="zipCode" value="60189" required>
|
|
<div class="invalid-feedback">
|
|
Please provide your ZIP code.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Primary Member -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-12">
|
|
<h5 class="text-success">Primary Member*</h5>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="firstName1" class="form-label">First Name*</label>
|
|
<input type="text" class="form-control" id="firstName1" name="firstName1" required>
|
|
<div class="invalid-feedback">
|
|
Please provide first name.
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="lastName1" class="form-label">Last Name*</label>
|
|
<input type="text" class="form-control" id="lastName1" name="lastName1" required>
|
|
<div class="invalid-feedback">
|
|
Please provide last name.
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="email1" class="form-label">Email*</label>
|
|
<input type="email" class="form-control" id="email1" name="email1" required>
|
|
<div class="invalid-feedback">
|
|
Please provide a valid email.
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="phone1" class="form-label">Phone*</label>
|
|
<input type="tel" class="form-control" id="phone1" name="phone1" required>
|
|
<div class="invalid-feedback">
|
|
Please provide phone number.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Secondary Member (Optional) -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="addSecondMember">
|
|
<label class="form-check-label" for="addSecondMember">
|
|
Add Second Household Member
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="secondMemberSection" class="row g-3 mb-4" style="display: none;">
|
|
<div class="col-12">
|
|
<h5 class="text-success">Secondary Member</h5>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="firstName2" class="form-label">First Name</label>
|
|
<input type="text" class="form-control" id="firstName2" name="firstName2">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="lastName2" class="form-label">Last Name</label>
|
|
<input type="text" class="form-control" id="lastName2" name="lastName2">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="email2" class="form-label">Email</label>
|
|
<input type="email" class="form-control" id="email2" name="email2">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="phone2" class="form-label">Phone</label>
|
|
<input type="tel" class="form-control" id="phone2" name="phone2">
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Committees Section -->
|
|
<fieldset class="mb-4">
|
|
<legend class="h5 text-success border-bottom pb-2">Committee Interests</legend>
|
|
<p>Check all committees you're interested in joining:</p>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="block_captain" name="block_captain">
|
|
<label class="form-check-label" for="block_captain">
|
|
BlockCaptain
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="coordinator" name="coordinator">
|
|
<label class="form-check-label" for="coordinator">
|
|
Coordinator
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="egg_hunt" name="egg_hunt">
|
|
<label class="form-check-label" for="egg_hunt">
|
|
Easter Egg Hunt
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="spring_garage_sale" name="spring_garage_sale">
|
|
<label class="form-check-label" for="spring_garage_sale">
|
|
Spring Garage Sale
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="golf_outing" name="golf_outing">
|
|
<label class="form-check-label" for="golf_outing">
|
|
Golf Outing
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="ice_cream_social" name="ice_cream_social">
|
|
<label class="form-check-label" for="ice_cream_social">
|
|
Ice Creame Social
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="fall_garage_sale" name="fall_garage_sale">
|
|
<label class="form-check-label" for="fall_garage_sale">
|
|
Fall Garage Sale
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="halloween_party" name="halloween_party">
|
|
<label class="form-check-label" for="halloween_party">
|
|
Halloween Party
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="santa_visit" name="santa_visit">
|
|
<label class="form-check-label" for="santa_visit">
|
|
Santa Visits
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="civic_affair" name="civic_affair">
|
|
<label class="form-check-label" for="civic_affair">
|
|
Civic Affairs Journalist
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="phone_directory" name="phone_directory">
|
|
<label class="form-check-label" for="phone_directory">
|
|
Annual Phone Director
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="no_preference" name="no_preference">
|
|
<label class="form-check-label" for="no_preference">
|
|
No Preference
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Services Section -->
|
|
<fieldset class="mb-4">
|
|
<legend class="h5 text-success border-bottom pb-2">Services</legend>
|
|
<p>Check if you're interested in providing these services to neighbors:</p>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="babysitting" for="babysitting" name="babysitting">
|
|
<label class="form-check-label" for="babysitting">
|
|
Babysitting
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="lawn_mowing" for="lawn_mowing" name="lawn_mowing">
|
|
<label class="form-check-label" for="lawn_mowing">
|
|
Lawn Mowing
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="snow_shoveling" for="snow_shoveling" name="snow_shoveling">
|
|
<label class="form-check-label" for="snow_shoveling">
|
|
Snow Shoveling
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="leaf_raking" for="leaf_raking" name="leaf_raking">
|
|
<label class="form-check-label" for="leaf_raking">
|
|
Lead Raking
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="house_sitting" for="house_sitting" name="house_sitting">
|
|
<label class="form-check-label" for="house_sitting">
|
|
House Sitting
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="petsitting" for="petsitting" name="petsitting">
|
|
<label class="form-check-label" for="petsitting">
|
|
Pet Sitting
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="other" for="other" name="other">
|
|
<label class="form-check-label" for="other">
|
|
Other (please specify)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<label for="other_desc" class="form-label">Other interests or skills you'd like to contribute:</label>
|
|
<textarea class="form-control" id="other_desc" for="other_desc" name="other_desc" rows="2"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3" id="otherServiceSpecify" style="display: none;">
|
|
<label for="otherServiceDetails" class="form-label">Please specify other service:</label>
|
|
<input type="text" class="form-control" id="otherServiceDetails">
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
|
{% if captchaForm %}
|
|
{{ captchaForm }}
|
|
{% endif %}
|
|
<button class="btn btn-outline-secondary me-md-2" type="reset">Reset Form</button>
|
|
<button class="btn btn-success" type="submit">Submit Membership</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Toggle second member section
|
|
const addSecondMember = document.getElementById('addSecondMember');
|
|
const secondMemberSection = document.getElementById('secondMemberSection');
|
|
|
|
addSecondMember.addEventListener('change', function() {
|
|
if(this.checked) {
|
|
secondMemberSection.style.display = 'flex';
|
|
} else {
|
|
secondMemberSection.style.display = 'none';
|
|
// Clear second member fields when hidden
|
|
document.getElementById('firstName2').value = '';
|
|
document.getElementById('lastName2').value = '';
|
|
document.getElementById('email2').value = '';
|
|
document.getElementById('phone2').value = '';
|
|
}
|
|
});
|
|
|
|
// Toggle other service field
|
|
const otherService = document.getElementById('otherService');
|
|
const otherServiceSpecify = document.getElementById('otherServiceSpecify');
|
|
|
|
otherService.addEventListener('change', function() {
|
|
otherServiceSpecify.style.display = this.checked ? 'block' : 'none';
|
|
if(!this.checked) {
|
|
document.getElementById('otherServiceDetails').value = '';
|
|
}
|
|
});
|
|
|
|
// Form validation
|
|
const form = document.getElementById('membershipForm');
|
|
|
|
form.addEventListener('submit', function(event) {
|
|
if (!form.checkValidity()) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
|
|
form.classList.add('was-validated');
|
|
}, false);
|
|
|
|
// Phone number formatting
|
|
const phoneInputs = document.querySelectorAll('input[type="tel"]');
|
|
phoneInputs.forEach(input => {
|
|
input.addEventListener('input', function() {
|
|
this.value = this.value.replace(/[^0-9]/g, '');
|
|
if(this.value.length > 10) {
|
|
this.value = this.value.slice(0, 10);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |