feat: move About You to step 1 for immediate email resume, make how-heard optional
Swap steps 1 and 2 so email is collected first, enabling returning user detection right away. Make "How did you hear about VotC" optional. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
83caf44a16
commit
e42cccaf6d
130
apply.html
130
apply.html
|
|
@ -607,8 +607,51 @@
|
||||||
|
|
||||||
<form id="application-form" style="display: none;">
|
<form id="application-form" style="display: none;">
|
||||||
<!-- Step 1: Which weeks + price calculator -->
|
<!-- Step 1: Which weeks + price calculator -->
|
||||||
|
<!-- Step 1: Contact info + how heard + referral -->
|
||||||
<div class="form-section" data-step="1">
|
<div class="form-section" data-step="1">
|
||||||
<div class="question-number">Step 1 of 10</div>
|
<div class="question-number">Step 1 of 10</div>
|
||||||
|
<h2>About You</h2>
|
||||||
|
|
||||||
|
<div class="form-group" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
||||||
|
<div>
|
||||||
|
<label for="first_name">First Name <span class="required">*</span></label>
|
||||||
|
<input type="text" id="first_name" name="first_name" required placeholder="First name">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="last_name">Last Name <span class="required">*</span></label>
|
||||||
|
<input type="text" id="last_name" name="last_name" required placeholder="Last name">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">Email <span class="required">*</span></label>
|
||||||
|
<input type="email" id="email" name="email" required placeholder="your@email.com">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="social_media">Social Media Handles <span class="optional">(optional)</span></label>
|
||||||
|
<input type="text" id="social_media" name="social_media" placeholder="@handle (please specify which platforms)">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="how_heard">How did you hear about Valley of the Commons? <span class="optional">(optional)</span></label>
|
||||||
|
<textarea id="how_heard" name="how_heard" placeholder="Social media, friend referral, newsletter, event..." rows="3"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="referral_names">Referral name(s) <span class="optional">(optional)</span></label>
|
||||||
|
<textarea id="referral_names" name="referral_names" placeholder="Names of people who know you or referred you" rows="2"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-nav">
|
||||||
|
<div></div>
|
||||||
|
<button type="button" class="btn btn-primary" onclick="nextStep()">Continue</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Step 2: Week selection -->
|
||||||
|
<div class="form-section" data-step="2">
|
||||||
|
<div class="question-number">Step 2 of 10</div>
|
||||||
<h2>Which week(s) would you like to attend? <span class="required">*</span></h2>
|
<h2>Which week(s) would you like to attend? <span class="required">*</span></h2>
|
||||||
<p class="hint">Select the weeks you'd like to join. Prices update as you choose.</p>
|
<p class="hint">Select the weeks you'd like to join. Prices update as you choose.</p>
|
||||||
|
|
||||||
|
|
@ -653,48 +696,6 @@
|
||||||
<div id="price-calc">Select at least one week to see pricing</div>
|
<div id="price-calc">Select at least one week to see pricing</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-nav">
|
|
||||||
<div></div>
|
|
||||||
<button type="button" class="btn btn-primary" onclick="nextStep()">Continue</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Step 2: Contact info + how heard + referral -->
|
|
||||||
<div class="form-section" data-step="2">
|
|
||||||
<div class="question-number">Step 2 of 10</div>
|
|
||||||
<h2>About You</h2>
|
|
||||||
|
|
||||||
<div class="form-group" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
|
||||||
<div>
|
|
||||||
<label for="first_name">First Name <span class="required">*</span></label>
|
|
||||||
<input type="text" id="first_name" name="first_name" required placeholder="First name">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="last_name">Last Name <span class="required">*</span></label>
|
|
||||||
<input type="text" id="last_name" name="last_name" required placeholder="Last name">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="email">Email <span class="required">*</span></label>
|
|
||||||
<input type="email" id="email" name="email" required placeholder="your@email.com">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="social_media">Social Media Handles <span class="optional">(optional)</span></label>
|
|
||||||
<input type="text" id="social_media" name="social_media" placeholder="@handle (please specify which platforms)">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="how_heard">How did you hear about Valley of the Commons? <span class="required">*</span></label>
|
|
||||||
<textarea id="how_heard" name="how_heard" required placeholder="Social media, friend referral, newsletter, event..." rows="3"></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="referral_names">Referral name(s) <span class="optional">(optional)</span></label>
|
|
||||||
<textarea id="referral_names" name="referral_names" placeholder="Names of people who know you or referred you" rows="2"></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-nav">
|
<div class="form-nav">
|
||||||
<button type="button" class="btn btn-secondary" onclick="prevStep()">Back</button>
|
<button type="button" class="btn btn-secondary" onclick="prevStep()">Back</button>
|
||||||
<button type="button" class="btn btn-primary" onclick="nextStep()">Continue</button>
|
<button type="button" class="btn btn-primary" onclick="nextStep()">Continue</button>
|
||||||
|
|
@ -1272,8 +1273,8 @@
|
||||||
emailField.style.borderColor = 'var(--error)';
|
emailField.style.borderColor = 'var(--error)';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Week selection (step 1)
|
// Week selection (step 2)
|
||||||
if (step === 1) {
|
if (step === 2) {
|
||||||
const checked = document.querySelectorAll('input[name="weeks"]:checked');
|
const checked = document.querySelectorAll('input[name="weeks"]:checked');
|
||||||
if (checked.length === 0) {
|
if (checked.length === 0) {
|
||||||
valid = false;
|
valid = false;
|
||||||
|
|
@ -1291,8 +1292,8 @@
|
||||||
async function nextStep() {
|
async function nextStep() {
|
||||||
if (!validateStep(currentStep)) return;
|
if (!validateStep(currentStep)) return;
|
||||||
|
|
||||||
// Email check when leaving step 2
|
// Email check when leaving step 1
|
||||||
if (currentStep === 2 && !window._existingApplicationId) {
|
if (currentStep === 1 && !window._existingApplicationId) {
|
||||||
const email = document.getElementById('email').value.trim().toLowerCase();
|
const email = document.getElementById('email').value.trim().toLowerCase();
|
||||||
if (email) {
|
if (email) {
|
||||||
try {
|
try {
|
||||||
|
|
@ -1334,9 +1335,9 @@
|
||||||
restoreFormData(data);
|
restoreFormData(data);
|
||||||
saveFormData();
|
saveFormData();
|
||||||
document.getElementById('welcome-back-modal').classList.remove('visible');
|
document.getElementById('welcome-back-modal').classList.remove('visible');
|
||||||
// Advance to step 3
|
// Advance to step 2 (weeks)
|
||||||
currentStep = 3;
|
currentStep = 2;
|
||||||
showStep(3);
|
showStep(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeWelcomeModal() {
|
function closeWelcomeModal() {
|
||||||
|
|
@ -1593,22 +1594,11 @@
|
||||||
|
|
||||||
let html = '';
|
let html = '';
|
||||||
|
|
||||||
// Weeks
|
// Contact (step 1)
|
||||||
html += `<div class="review-section">
|
|
||||||
<div class="review-section-header">
|
|
||||||
<h3>Weeks Selected</h3>
|
|
||||||
<span class="review-edit-link" onclick="jumpToStep(1)">Edit</span>
|
|
||||||
</div>
|
|
||||||
<div class="review-field">
|
|
||||||
<div class="review-value">${data.weeks.map(w => WEEK_LABELS[w] || w).join('<br>')}</div>
|
|
||||||
</div>
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
// Contact
|
|
||||||
html += `<div class="review-section">
|
html += `<div class="review-section">
|
||||||
<div class="review-section-header">
|
<div class="review-section-header">
|
||||||
<h3>Contact Information</h3>
|
<h3>Contact Information</h3>
|
||||||
<span class="review-edit-link" onclick="jumpToStep(2)">Edit</span>
|
<span class="review-edit-link" onclick="jumpToStep(1)">Edit</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="review-field">
|
<div class="review-field">
|
||||||
<div class="review-label">Name</div>
|
<div class="review-label">Name</div>
|
||||||
|
|
@ -1619,13 +1609,21 @@
|
||||||
<div class="review-value">${esc(data.email)}</div>
|
<div class="review-value">${esc(data.email)}</div>
|
||||||
</div>
|
</div>
|
||||||
${data.social_links ? `<div class="review-field"><div class="review-label">Social</div><div class="review-value">${esc(data.social_links)}</div></div>` : ''}
|
${data.social_links ? `<div class="review-field"><div class="review-label">Social</div><div class="review-value">${esc(data.social_links)}</div></div>` : ''}
|
||||||
<div class="review-field">
|
${data.how_heard ? `<div class="review-field"><div class="review-label">How heard</div><div class="review-value">${esc(data.how_heard)}</div></div>` : ''}
|
||||||
<div class="review-label">How heard</div>
|
|
||||||
<div class="review-value">${esc(data.how_heard)}</div>
|
|
||||||
</div>
|
|
||||||
${data.referral_name ? `<div class="review-field"><div class="review-label">Referral</div><div class="review-value">${esc(data.referral_name)}</div></div>` : ''}
|
${data.referral_name ? `<div class="review-field"><div class="review-label">Referral</div><div class="review-value">${esc(data.referral_name)}</div></div>` : ''}
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|
||||||
|
// Weeks (step 2)
|
||||||
|
html += `<div class="review-section">
|
||||||
|
<div class="review-section-header">
|
||||||
|
<h3>Weeks Selected</h3>
|
||||||
|
<span class="review-edit-link" onclick="jumpToStep(2)">Edit</span>
|
||||||
|
</div>
|
||||||
|
<div class="review-field">
|
||||||
|
<div class="review-value">${data.weeks.map(w => WEEK_LABELS[w] || w).join('<br>')}</div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
// Affiliations
|
// Affiliations
|
||||||
html += `<div class="review-section">
|
html += `<div class="review-section">
|
||||||
<div class="review-section-header">
|
<div class="review-section-header">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue