dereklseitz/dlseitz.dev-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(contact-form): enhance validation and accessibility

Browse Source
This commit is contained in:
Derek L. Seitz
2025-08-16 08:09:53 -05:00
parent 2f509982f2
commit d742364f46
4 changed files with 117 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/about.njk
View File

@@ -54,31 +54,37 @@ pageScripts:
<legend>Contact Info</legend>
<div class="first-name">
<label for="first-name">First Name:<span class="req-ask">*</span></label>
<input type="text" id="first-name" name="first-name" placeholder="Ex. Sally" required>
<input type="text" id="first-name" name="first-name" placeholder="Ex. Sally" required aria-describedby="first-name-error">
<span class="error-message" id="first-name-error" aria-live="polite"></span>
</div>
<div class="last-name">
<label for="last-name">Last Name:<span class="req-ask">*</span></label>
<input type="text" id="last-name" name="last-name" placeholder="Ex. Westfield" required>
<input type="text" id="last-name" name="last-name" placeholder="Ex. Westfield" required aria-describedby="last-name-error">
<span class="error-message" id="last-name-error" aria-live="polite"></span>
</div>
<div class="organization">
<label for="organization">Organization:</label>
<input type="text" id="organization" name="organization" placeholder="Optional">
<input type="text" id="organization" name="organization" placeholder="Optional" aria-describedby="organization-error">
<span class="error-message" id="organization-error" aria-live="polite"></span>
</div>
<div class="email">
<label for="email">Email:<span class="req-ask">*</span></label>
<input type="email" id="email" name="email" placeholder="Ex. user@domain.com" required>
<input type="email" id="email" name="email" placeholder="Ex. user@domain.com" required aria-describedby="email-error">
<span class="error-message" id="email-error" aria-live="polite"></span>
</div>
<div class="phone">
<label for="phone">Phone:<span class="req-ask">*</span></label>
<input type="tel" id="phone" name="phone" placeholder="Ex. 111-333-4444" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
<input type="tel" id="phone" name="phone" placeholder="Ex. 111-333-4444" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required aria-describedby="phone-error">
<span class="error-message" id="phone-error" aria-live="polite"></span>
</div>
<div class="preferred-method">
<h3>Preferred Contact Method</h3>
<div class="preferred-method" role="radiogroup" aria-labelledby="contact-method-label">
<h3 id="contact-method-label">Preferred Contact Method</h3>
<div class="radio-group">
<div class="email-radio">
<input type="radio" id="contact-email" name="contact-method" value="email" checked required>
@@ -97,9 +103,13 @@ pageScripts:
<fieldset class="message-field">
<legend>Message</legend>
<label for="message">Questions or Feedback</label>
<textarea id="message" name="message" rows="15" placeholder="What questions or feedback do you have for me?" required></textarea>
<textarea id="message" name="message" rows="15" placeholder="What questions or feedback do you have for me?" required aria-describedby="message-error"></textarea>
<span class="error-message" id="message-error" aria-live="polite"></span>
</fieldset>
<button type="submit">Send Message</button>
<div class="submit-reset">
<button type="submit">Send Message</button>
<button type="reset">Reset Form</button>
</div>
</div>
</div>
<p class="form-note">* Required fields</p>