Skip to content

Commit 4fb5da9

Browse files
author
gauthier witkowski
committed
Accessibility
1 parent c7ae002 commit 4fb5da9

File tree

1 file changed

+52
-50
lines changed

1 file changed

+52
-50
lines changed

‎index.html‎

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -10,64 +10,66 @@
1010
</head>
1111

1212
<body>
13-
<main class="container pt-4" style="max-width: 700px">
14-
<header class="text-center mb-4">
15-
<h1 class="fw-bold mb-2">Contact Us</h1>
16-
<p class="text-muted">If you found this project helpful, ⭐️ star the repo !</p>
13+
<main class="container-md pt-4">
14+
<div class="mx-auto" style="max-width: 700px">
15+
<header class="text-center mb-4">
16+
<h1 class="fw-bold mb-2">Contact Us</h1>
17+
<p class="text-muted">If you found this project helpful, ⭐️ star the repo !</p>
1718

18-
<!-- GitHub Button (optional) -->
19-
<a class="github-button" href="https://github.com/raspgot/Contact-Form-PHP" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star raspgot/Contact-Form-PHP on GitHub">Give a star !</a>
20-
</header>
19+
<!-- GitHub Button (optional) -->
20+
<a class="github-button" href="https://github.com/raspgot/Contact-Form-PHP" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star raspgot/Contact-Form-PHP on GitHub">Give a star !</a>
21+
</header>
2122

22-
<section class="shadow rounded p-4 bg-white">
23-
<!-- Status -->
24-
<div id="alert-status" class="alert d-none" role="alert" aria-live="polite"></div>
23+
<section class="shadow rounded p-4 bg-body">
24+
<!-- Status -->
25+
<div id="alert-status" class="alert d-none" role="alert" aria-live="polite"></div>
2526

26-
<!-- Form -->
27-
<form method="post" class="needs-validation" novalidate autocomplete="off">
28-
<div class="mb-3">
29-
<label for="name" class="form-label">Name</label>
30-
<input type="text" class="form-control" id="name" name="name" required autocomplete="name" />
31-
<div class="valid-feedback">Looks good !</div>
32-
<div class="invalid-feedback">Please enter your name.</div>
33-
</div>
27+
<!-- Form -->
28+
<form method="post" class="needs-validation" novalidate autocomplete="off">
29+
<div class="mb-3">
30+
<label for="name" class="form-label">Name<span class="text-danger">*</span></label>
31+
<input type="text" class="form-control" id="name" name="name" required autocomplete="name" />
32+
<div class="valid-feedback">Looks good !</div>
33+
<div class="invalid-feedback">Please enter your name.</div>
34+
</div>
3435

35-
<div class="mb-3">
36-
<label for="email" class="form-label">Email</label>
37-
<input type="email" class="form-control" id="email" name="email" required autocomplete="email" />
38-
<div class="form-text">Make sure to provide a valid email address.</div>
39-
<div class="valid-feedback">Looks good !</div>
40-
<div class="invalid-feedback">Please enter a valid email address.</div>
41-
</div>
36+
<div class="mb-3">
37+
<label for="email" class="form-label">Email<span class="text-danger">*</span></label>
38+
<input type="email" class="form-control" id="email" name="email" required autocomplete="email" />
39+
<div class="form-text">We'll use this to send a confirmation.</div>
40+
<div class="valid-feedback">Looks good !</div>
41+
<div class="invalid-feedback">Please enter a valid email address.</div>
42+
</div>
4243

43-
<div class="mb-3">
44-
<label for="subject" class="form-label">Subject</label>
45-
<input type="text" class="form-control" id="subject" name="subject" required autocomplete="off" />
46-
<div class="valid-feedback">Looks good !</div>
47-
<div class="invalid-feedback">Please enter a subject.</div>
48-
</div>
44+
<div class="mb-3">
45+
<label for="subject" class="form-label">Subject<span class="text-danger">*</span></label>
46+
<input type="text" class="form-control" id="subject" name="subject" required autocomplete="off" />
47+
<div class="valid-feedback">Looks good !</div>
48+
<div class="invalid-feedback">Please enter a subject.</div>
49+
</div>
4950

50-
<div class="mb-4">
51-
<label for="message" class="form-label">Message</label>
52-
<textarea class="form-control" id="message" name="message" rows="6" required autocomplete="off"></textarea>
53-
<div class="form-text">Be as specific as you can.</div>
54-
<div class="valid-feedback">Looks good !</div>
55-
<div class="invalid-feedback">Please enter your message.</div>
56-
</div>
51+
<div class="mb-4">
52+
<label for="message" class="form-label">Message<span class="text-danger">*</span></label>
53+
<textarea class="form-control" id="message" name="message" rows="6" required autocomplete="off"></textarea>
54+
<div class="form-text">Be as specific as you can.</div>
55+
<div class="valid-feedback">Looks good !</div>
56+
<div class="invalid-feedback">Please enter your message.</div>
57+
</div>
5758

58-
<!-- Honeypot -->
59-
<div class="d-none">
60-
<label for="website">Website</label>
61-
<input type="text" id="website" name="website" tabindex="-1" autocomplete="off" />
62-
</div>
59+
<!-- Honeypot -->
60+
<div class="d-none" aria-hidden="true">
61+
<label for="website">Website</label>
62+
<input type="text" id="website" name="website" tabindex="-1" autocomplete="off" />
63+
</div>
6364

64-
<!-- Submit Button -->
65-
<button type="submit" class="btn btn-primary w-100 btn-lg d-flex align-items-center justify-content-center gap-2">
66-
<span id="loading-spinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
67-
<span>Submit</span>
68-
</button>
69-
</form>
70-
</section>
65+
<!-- Submit Button -->
66+
<button type="submit" class="btn btn-primary w-100 btn-lg d-flex align-items-center justify-content-center gap-2">
67+
<span id="loading-spinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
68+
<span>Submit</span>
69+
</button>
70+
</form>
71+
</section>
72+
</div>
7173
</main>
7274

7375
<!-- reCAPTCHA v3 (replace with your site key) -->

0 commit comments

Comments
 (0)