Use labels

This commit is contained in:
Philip Peterson 2026-06-03 23:33:09 -07:00
parent 6879b056da
commit 95a0a3e004
2 changed files with 1917 additions and 9 deletions

File diff suppressed because one or more lines are too long

View file

@ -378,10 +378,11 @@ function BookingPanel({ service, settings }) {
<div class=${CX.formGrid}>
<div>
<label class=${CX.formLabel}>
First name <span class=${CX.formRequired}>*</span>
<label class=${CX.formLabel} for="first-name">
First (or given) name <span class=${CX.formRequired}>*</span>
</label>
<input
id="first-name"
type="text"
name="first_name"
autocomplete="given-name"
@ -392,10 +393,11 @@ function BookingPanel({ service, settings }) {
/>
</div>
<div>
<label class=${CX.formLabel}>
Last name <span class=${CX.formRequired}>*</span>
<label class=${CX.formLabel} for="last-name">
Last (or family) name <span class=${CX.formRequired}>*</span>
</label>
<input
id="last-name"
type="text"
name="last_name"
autocomplete="family-name"
@ -406,10 +408,11 @@ function BookingPanel({ service, settings }) {
/>
</div>
<div class="sm:col-span-2">
<label class=${CX.formLabel}>
<label class=${CX.formLabel} for="email">
Email address <span class=${CX.formRequired}>*</span>
</label>
<input
id="email"
type="email"
name="email"
autocomplete="email"
@ -420,10 +423,11 @@ function BookingPanel({ service, settings }) {
/>
</div>
<div class="sm:col-span-2">
<label class=${CX.formLabel}>
<label class=${CX.formLabel} for="phone">
Phone number <span class=${CX.formRequired}>*</span>
</label>
<input
id="phone"
type="tel"
name="phone"
autocomplete="tel"
@ -438,8 +442,11 @@ function BookingPanel({ service, settings }) {
</div>
<div class="mb-6">
<label class=${CX.formLabel}>Comments</label>
<label class=${CX.formLabel} for="comments">
Comments
</label>
<textarea
id="comments"
rows="4"
name="comments"
autocomplete="off"