Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: made contact us form accessible ✨ #692

Closed
wants to merge 3 commits into from
Closed

feat: made contact us form accessible ✨ #692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b86cc47
styles: add screen reader only styles to hide labels visually
0xabdulkhaliq Aug 6, 2023
2023b71
feat: make contact us form accessible
0xabdulkhaliq Aug 6, 2023
475a46b
Merge branch 'main' into closes-issue-#685
0xabdulkhaliq Aug 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions assets/css/enquiry-form.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,31 @@
}

.enquiry-form .spandiv small {
color: #e74c3c;
}

.enquiry-form button{
padding: 15px;
background: #fff;
color: #000;
font-size: 18px;
border: 0;
outline: none;
cursor: pointer;
width: 150px;
margin: 20px auto 0;
border-radius: 10px;
}

.sr-only-labels {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
color: #e74c3c;
}

Expand Down
58 changes: 26 additions & 32 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -429,50 +429,44 @@ <h2>Contact Us</h2>

<form class="enquiry-form" id="enquiry-form" aria-label="Contact us form" action="https://getform.io/f/0125a310-c60b-492d-ab54-476717dbf671" method="POST" novalidate>
<div class="title">GET IN TOUCH</div>

<div>
<div>
<div class="inputContainer">
<input type="text" id="name" name="name" placeholder="Your Name" class="" pattern="[a-zA-Z]+" required aria-required="true"
aria-label="Enter your name" aria-describedby="nameerr" />
<i class="fa fa-user"></i>
</div>
</div>

<div class="spandiv" name="name"><small class="small" id="nameerr" role="alert"></small></div>

<div>
<div class="inputContainer">
<input type="email" id="email" name="email" class="" placeholder="Email id" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
required aria-required="true" aria-label="Enter your email" aria-describedby="mailerr" />
<i class="fa fa-envelope"></i>
</div>
<label for="name" class="sr-only-labels">Enter Your Name: </label>
<input type="text" name="name" id="name" placeholder="Your Name" class="" pattern='[a-zA-Z]+' required aria-required="true"
aria-label="Enter you name" aria-describedby="nameerr" />
<i class="fa fa-user"></i>
</div>
</div>



<div class="spandiv"><small class="small" id="mailerr" role="alert"></small></div>

<div>
<div class="inputContainer">
<input type="tel" id="phone" name="phone" class="" placeholder="Phone no." pattern="[0-9]{10}$" required aria-required="true" aria-label="Enter your phone number" aria-describedby="phoneerr"/>
<i class="fa fa-phone"></i>
</div>
</div>
<div>
<div class="inputContainer">
<label for="email" class="sr-only-labels">Enter Your Mail: </label>
<input type="email" name="email" id="email" class="" placeholder="Email id" pattern='[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$'
required aria-required="true" aria-label="Enter you email" aria-describedby="mailerr" />
<i class="fa fa-envelope"></i>
</div>

<div>
<div class="inputContainer">
<label for="phone" class="sr-only-labels">Enter Your Phone Number: </label>
<input type="tel" name="phone" id="phone" class="" placeholder="Phone no." pattern="[0-9]{10}$" required aria-required="true" aria-label="Enter you phone number" aria-describedby="phoneerr"/>
<i class="fa fa-phone"></i>
</div>
<div class="spandiv"><small class="small" id="phoneerr" role="alert"></small></div>
</div>

<div class="spandiv"><small class="small" id="phoneerr" role="alert"></small></div>


<div class="inputContainer">
<textarea id="message" name="message" rows="5" class="" placeholder="How can we help you?" required aria-required="true" aria-label="Enter your message" aria-describedby="msgerr"></textarea>
<label for="message" class="sr-only-labels">How can we help you? </label>
<textarea id="message" name="message" row="5" class="" placeholder="How can we help you?" required aria-required="true" aria-label="Enter you message" aria-describedby="msgerr"></textarea>
<i class="fa fa-comment"></i>
</div>
</div>

<div class="spandiv"><small class="small" id="msgerr" role="alert"></small></div>


<button type="submit" class="hoverchanger">


<button type="submit" role="button" aria-describedby="Submit button" onclick="sendMail()" class="hoverchanger">
Send
</button>
</div>
Expand Down