Skip to content

Commit 406244d

Browse files
markgohomarkgoho
committed
Enhance form structure and styles: introduce a new form-container class for improved layout, update SCSS for responsive form design, and modify HTML to enhance semantic clarity. Adjust header styles for better responsiveness and clean up unused class names in JSON configuration.
1 parent c697d59 commit 406244d

4 files changed

Lines changed: 168 additions & 154 deletions

File tree

‎hugo/assets/scss/components/forms.scss‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1+
.form-container {
2+
container: form / inline-size;
3+
}
4+
15
.form {
26
display: grid;
3-
grid-template-columns: 1fr 1fr;
7+
grid-template-columns: 1fr;
48
column-gap: var(--space-s);
59
row-gap: var(--space-l);
610
}
@@ -86,3 +90,9 @@ fieldset {
8690
text-align: center;
8791
padding: var(--space-xl);
8892
}
93+
94+
@container form (min-width: 40rem) {
95+
.form {
96+
grid-template-columns: 1fr 1fr;
97+
}
98+
}

‎hugo/assets/scss/header.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
border-bottom-color: var(--teal-500);
5454
}
5555

56-
@container header (min-width: 55rem) {
56+
@container header (min-width: 60rem) {
5757
.navbar {
5858
grid-template-columns: max-content 1fr max-content;
5959
grid-template-areas: "logo nav cta";
@@ -63,10 +63,6 @@
6363
}
6464

6565
.navbar__nav {
66-
gap: var(--space-l);
6766
justify-self: end;
6867
}
6968
}
70-
71-
@container header (min-width: 30rem) {
72-
}

‎hugo/hugo_stats.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181
"footer__social-link",
8282
"footer__social-link--circled",
8383
"form",
84+
"form-container",
8485
"form-group",
8586
"form__confirmation",
8687
"form__error-message",

‎hugo/layouts/partials/find-a-doula/match.html‎

Lines changed: 155 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,163 +1,170 @@
11
<p>Answer a few questions to find a doula who matches your needs.</p>
2-
<form class="form">
3-
<div class="form-group single-column">
4-
<label class="form__label " for="name">Name (first and last)</label>
5-
<input class="form__input " type="text" id="name" name="name" />
6-
</div>
2+
<div class="form-container">
3+
<form class="form">
4+
<div class="form-group single-column">
5+
<label class="form__label " for="name">Name (first and last)</label>
6+
<input class="form__input " type="text" id="name" name="name" />
7+
</div>
78

8-
<div class="form__group single-column">
9-
<label class="form__label" for="phone">Phone (required)</label>
10-
<input class="form__input" type="tel" id="phone" name="phone" />
11-
</div>
9+
<div class="form__group single-column">
10+
<label class="form__label" for="phone">Phone (required)</label>
11+
<input class="form__input" type="tel" id="phone" name="phone" />
12+
</div>
1213

13-
<div class="form__group single-column">
14-
<label class="form__label" for="email">Email (required)</label>
15-
<input class="form__input" type="email" id="email" name="email" />
16-
</div>
14+
<div class="form__group single-column">
15+
<label class="form__label" for="email">Email (required)</label>
16+
<input class="form__input" type="email" id="email" name="email" />
17+
</div>
1718

18-
<div class="form__group single-column">
19-
<label class="form__label" for="zipcode">ZIP Code (required)</label>
20-
<input class="form__input" type="text" id="zipcode" name="zipcode" />
21-
</div>
19+
<div class="form__group single-column">
20+
<label class="form__label" for="zipcode">ZIP Code (required)</label>
21+
<input class="form__input" type="text" id="zipcode" name="zipcode" />
22+
</div>
2223

23-
<fieldset class="full-width">
24-
<legend>Baby's estimated date of arrival or birthdate</legend>
25-
<div class="date-grid">
26-
<div class="form-group single-column">
27-
<label class="form__label" for="month">Month</label>
28-
<input class="form__input" type="text" id="month" name="month" />
29-
</div>
30-
<div class="form-group single-column">
31-
<label class="form__label" for="day">Day</label>
32-
<input class="form__input" type="text" id="day" name="day" />
24+
<fieldset class="full-width">
25+
<legend>Baby's estimated date of arrival or birthdate</legend>
26+
<div class="date-grid">
27+
<div class="form-group single-column">
28+
<label class="form__label" for="month">Month</label>
29+
<input class="form__input" type="text" id="month" name="month" />
30+
</div>
31+
<div class="form-group single-column">
32+
<label class="form__label" for="day">Day</label>
33+
<input class="form__input" type="text" id="day" name="day" />
34+
</div>
35+
<div class="form-group single-column">
36+
<label class="form__label" for="year">Year</label>
37+
<input class="form__input" type="text" id="year" name="year" />
38+
</div>
3339
</div>
34-
<div class="form-group single-column">
35-
<label class="form__label" for="year">Year</label>
36-
<input class="form__input" type="text" id="year" name="year" />
37-
</div>
38-
</div>
39-
</fieldset>
40+
</fieldset>
4041

41-
<fieldset>
42-
<legend>I am a parent looking for...</legend>
43-
<div class="input-grid">
44-
<input class="form__input" type="checkbox" id="birth-doula" /><label
45-
class="form__label"
46-
for="birth-doula"
47-
>birth doula support</label
48-
>
49-
<input class="form__input" type="checkbox" id="postpartum-doula" /><label
50-
class="form__label"
51-
for="postpartum-doula"
52-
>postpartum doula support</label
53-
>
54-
<input class="form__input" type="checkbox" id="lactation" /><label
55-
class="form__label"
56-
for="lactation"
57-
>lactation support</label
58-
>
59-
<input class="form__input" type="checkbox" id="classes" /><label
60-
class="form__label"
61-
for="classes"
62-
>childbirth classes</label
63-
>
64-
<input
65-
class="form__input"
66-
type="checkbox"
67-
id="other-info-looking-for" /><label
68-
class="form__label"
69-
for="other-info-looking-for"
70-
>other information</label
71-
>
72-
</div>
73-
</fieldset>
42+
<fieldset>
43+
<legend>I am a parent looking for...</legend>
44+
<div class="input-grid">
45+
<input class="form__input" type="checkbox" id="birth-doula" /><label
46+
class="form__label"
47+
for="birth-doula"
48+
>birth doula support</label
49+
>
50+
<input
51+
class="form__input"
52+
type="checkbox"
53+
id="postpartum-doula" /><label
54+
class="form__label"
55+
for="postpartum-doula"
56+
>postpartum doula support</label
57+
>
58+
<input class="form__input" type="checkbox" id="lactation" /><label
59+
class="form__label"
60+
for="lactation"
61+
>lactation support</label
62+
>
63+
<input class="form__input" type="checkbox" id="classes" /><label
64+
class="form__label"
65+
for="classes"
66+
>childbirth classes</label
67+
>
68+
<input
69+
class="form__input"
70+
type="checkbox"
71+
id="other-info-looking-for" /><label
72+
class="form__label"
73+
for="other-info-looking-for"
74+
>other information</label
75+
>
76+
</div>
77+
</fieldset>
7478

75-
<fieldset>
76-
<legend>My birth is planned at...</legend>
77-
<div class="input-grid">
78-
<input
79-
class="form__input"
80-
type="radio"
81-
id="home-birth"
82-
name="birth-location" /><label class="form__label" for="home-birth"
83-
>home</label
84-
>
85-
<input
86-
class="form__input"
87-
type="radio"
88-
id="highland"
89-
name="birth-location" /><label class="form__label" for="highland"
90-
>Highland Hospital</label
91-
>
92-
<input
93-
class="form__input"
94-
type="radio"
95-
id="rochester-general"
96-
name="birth-location" /><label
97-
class="form__label"
98-
for="rochester-general"
99-
>Rochester General Hospital</label
100-
>
101-
<input
102-
class="form__input"
103-
type="radio"
104-
id="strong"
105-
name="birth-location" /><label class="form__label" for="strong"
106-
>Strong Hospital</label
107-
>
108-
<input
109-
class="form__input"
110-
type="radio"
111-
id="other-hospital"
112-
name="birth-location" /><label class="form__label" for="other-hospital"
113-
>Other Hospital</label
79+
<fieldset>
80+
<legend>My birth is planned at...</legend>
81+
<div class="input-grid">
82+
<input
83+
class="form__input"
84+
type="radio"
85+
id="home-birth"
86+
name="birth-location" /><label class="form__label" for="home-birth"
87+
>home</label
88+
>
89+
<input
90+
class="form__input"
91+
type="radio"
92+
id="highland"
93+
name="birth-location" /><label class="form__label" for="highland"
94+
>Highland Hospital</label
95+
>
96+
<input
97+
class="form__input"
98+
type="radio"
99+
id="rochester-general"
100+
name="birth-location" /><label
101+
class="form__label"
102+
for="rochester-general"
103+
>Rochester General Hospital</label
104+
>
105+
<input
106+
class="form__input"
107+
type="radio"
108+
id="strong"
109+
name="birth-location" /><label class="form__label" for="strong"
110+
>Strong Hospital</label
111+
>
112+
<input
113+
class="form__input"
114+
type="radio"
115+
id="other-hospital"
116+
name="birth-location" /><label
117+
class="form__label"
118+
for="other-hospital"
119+
>Other Hospital</label
120+
>
121+
</div>
122+
</fieldset>
123+
<div class="form-group full-width">
124+
<label class="form__label " for="other-info"
125+
>Is there any other information you'd like to share with us?</label
114126
>
127+
<textarea
128+
class="form__input form__input--textarea "
129+
id="other-info"
130+
name="other-info"
131+
rows="5"></textarea>
115132
</div>
116-
</fieldset>
117-
<div class="form-group full-width">
118-
<label class="form__label " for="other-info"
119-
>Is there any other information you'd like to share with us?</label
120-
>
121-
<textarea
122-
class="form__input form__input--textarea "
123-
id="other-info"
124-
name="other-info"
125-
rows="5"></textarea>
126-
</div>
127133

128-
<button type="submit" class="button">Submit Information</button>
129-
</form>
134+
<button type="submit" class="button">Submit Information</button>
135+
</form>
130136

131-
<div class="callout">
132-
<svg
133-
class="callout__icon"
134-
viewBox="0 0 64 64"
135-
fill="none"
136-
xmlns="http://www.w3.org/2000/svg">
137-
<path
138-
d="M35 45C35 45.5933 34.8241 46.1734 34.4944 46.6667C34.1648 47.1601 33.6962 47.5446 33.1481 47.7716C32.5999 47.9987 31.9967 48.0581 31.4147 47.9424C30.8328 47.8266 30.2982 47.5409 29.8787 47.1213C29.4591 46.7018 29.1734 46.1672 29.0577 45.5853C28.9419 45.0033 29.0013 44.4001 29.2284 43.852C29.4554 43.3038 29.84 42.8352 30.3333 42.5056C30.8266 42.1759 31.4067 42 32 42C32.7957 42 33.5587 42.3161 34.1213 42.8787C34.6839 43.4413 35 44.2043 35 45ZM32 18C26.485 18 22 22.0375 22 27V28C22 28.5304 22.2107 29.0391 22.5858 29.4142C22.9609 29.7893 23.4696 30 24 30C24.5304 30 25.0392 29.7893 25.4142 29.4142C25.7893 29.0391 26 28.5304 26 28V27C26 24.25 28.6925 22 32 22C35.3075 22 38 24.25 38 27C38 29.75 35.3075 32 32 32C31.4696 32 30.9609 32.2107 30.5858 32.5858C30.2107 32.9609 30 33.4696 30 34V36C30 36.5304 30.2107 37.0391 30.5858 37.4142C30.9609 37.7893 31.4696 38 32 38C32.5304 38 33.0392 37.7893 33.4142 37.4142C33.7893 37.0391 34 36.5304 34 36V35.82C38.56 34.9825 42 31.345 42 27C42 22.0375 37.515 18 32 18ZM58 32C58 37.1423 56.4751 42.1691 53.6182 46.4448C50.7613 50.7205 46.7007 54.053 41.9498 56.0209C37.1989 57.9887 31.9712 58.5036 26.9277 57.5004C21.8842 56.4972 17.2514 54.0209 13.6152 50.3848C9.97907 46.7486 7.50281 42.1159 6.49959 37.0723C5.49638 32.0288 6.01127 26.8011 7.97914 22.0502C9.94702 17.2994 13.2795 13.2387 17.5552 10.3818C21.8309 7.52487 26.8577 6 32 6C38.8934 6.00728 45.5024 8.74889 50.3767 13.6233C55.2511 18.4976 57.9927 25.1066 58 32ZM54 32C54 27.6488 52.7097 23.3953 50.2923 19.7775C47.875 16.1596 44.439 13.3398 40.419 11.6747C36.3991 10.0095 31.9756 9.57385 27.708 10.4227C23.4404 11.2716 19.5204 13.3669 16.4437 16.4437C13.3669 19.5204 11.2716 23.4404 10.4227 27.708C9.57386 31.9756 10.0095 36.3991 11.6747 40.419C13.3398 44.439 16.1596 47.8749 19.7775 50.2923C23.3953 52.7097 27.6488 54 32 54C37.8327 53.9934 43.4247 51.6734 47.5491 47.549C51.6734 43.4247 53.9934 37.8327 54 32Z"
139-
fill="#1B5665" />
140-
</svg>
137+
<div class="callout">
138+
<svg
139+
class="callout__icon"
140+
viewBox="0 0 64 64"
141+
fill="none"
142+
xmlns="http://www.w3.org/2000/svg">
143+
<path
144+
d="M35 45C35 45.5933 34.8241 46.1734 34.4944 46.6667C34.1648 47.1601 33.6962 47.5446 33.1481 47.7716C32.5999 47.9987 31.9967 48.0581 31.4147 47.9424C30.8328 47.8266 30.2982 47.5409 29.8787 47.1213C29.4591 46.7018 29.1734 46.1672 29.0577 45.5853C28.9419 45.0033 29.0013 44.4001 29.2284 43.852C29.4554 43.3038 29.84 42.8352 30.3333 42.5056C30.8266 42.1759 31.4067 42 32 42C32.7957 42 33.5587 42.3161 34.1213 42.8787C34.6839 43.4413 35 44.2043 35 45ZM32 18C26.485 18 22 22.0375 22 27V28C22 28.5304 22.2107 29.0391 22.5858 29.4142C22.9609 29.7893 23.4696 30 24 30C24.5304 30 25.0392 29.7893 25.4142 29.4142C25.7893 29.0391 26 28.5304 26 28V27C26 24.25 28.6925 22 32 22C35.3075 22 38 24.25 38 27C38 29.75 35.3075 32 32 32C31.4696 32 30.9609 32.2107 30.5858 32.5858C30.2107 32.9609 30 33.4696 30 34V36C30 36.5304 30.2107 37.0391 30.5858 37.4142C30.9609 37.7893 31.4696 38 32 38C32.5304 38 33.0392 37.7893 33.4142 37.4142C33.7893 37.0391 34 36.5304 34 36V35.82C38.56 34.9825 42 31.345 42 27C42 22.0375 37.515 18 32 18ZM58 32C58 37.1423 56.4751 42.1691 53.6182 46.4448C50.7613 50.7205 46.7007 54.053 41.9498 56.0209C37.1989 57.9887 31.9712 58.5036 26.9277 57.5004C21.8842 56.4972 17.2514 54.0209 13.6152 50.3848C9.97907 46.7486 7.50281 42.1159 6.49959 37.0723C5.49638 32.0288 6.01127 26.8011 7.97914 22.0502C9.94702 17.2994 13.2795 13.2387 17.5552 10.3818C21.8309 7.52487 26.8577 6 32 6C38.8934 6.00728 45.5024 8.74889 50.3767 13.6233C55.2511 18.4976 57.9927 25.1066 58 32ZM54 32C54 27.6488 52.7097 23.3953 50.2923 19.7775C47.875 16.1596 44.439 13.3398 40.419 11.6747C36.3991 10.0095 31.9756 9.57385 27.708 10.4227C23.4404 11.2716 19.5204 13.3669 16.4437 16.4437C13.3669 19.5204 11.2716 23.4404 10.4227 27.708C9.57386 31.9756 10.0095 36.3991 11.6747 40.419C13.3398 44.439 16.1596 47.8749 19.7775 50.2923C23.3953 52.7097 27.6488 54 32 54C37.8327 53.9934 43.4247 51.6734 47.5491 47.549C51.6734 43.4247 53.9934 37.8327 54 32Z"
145+
fill="#1B5665" />
146+
</svg>
141147

142-
<p class="callout__text">What happens after I submit the form?</p>
143-
</div>
148+
<p class="callout__text">What happens after I submit the form?</p>
149+
</div>
144150

145-
<div class="info-content">
146-
<p>
147-
If you're looking for doula support, your information will be shared with
148-
cooperative members.
149-
</p>
150-
<p>
151-
Doulas who are available around your estimated arrival date will email you
152-
to set up a complimentary consultation. You may receive 2 or 20 emails
153-
depending on who is available.
154-
</p>
155-
<p>
156-
It is common for pregnant people to meet with a few doulas to determine who
157-
they'd feel most comfortable working with.
158-
</p>
159-
<p>
160-
When you're ready to hire one of the doulas you've met with, you can contact
161-
them directly to sign their client agreement and pay their fee.
162-
</p>
151+
<div class="info-content">
152+
<p>
153+
If you're looking for doula support, your information will be shared with
154+
cooperative members.
155+
</p>
156+
<p>
157+
Doulas who are available around your estimated arrival date will email you
158+
to set up a complimentary consultation. You may receive 2 or 20 emails
159+
depending on who is available.
160+
</p>
161+
<p>
162+
It is common for pregnant people to meet with a few doulas to determine
163+
who they'd feel most comfortable working with.
164+
</p>
165+
<p>
166+
When you're ready to hire one of the doulas you've met with, you can
167+
contact them directly to sign their client agreement and pay their fee.
168+
</p>
169+
</div>
163170
</div>

0 commit comments

Comments
 (0)