Desktop design

Mobile design

Contact form

<div class="query" role="radio">
									<input type="radio" id="query1" name="query" tabindex="0" required="" aria-labelledby="general-query">
									<label for="query1" id="general-query">General Enquiry<span class="extra">______</span></label>
								</div>

<div class="query" role="radio">
									<input type="radio" id="query2" name="query" tabindex="0" aria-labelledby="support-query" required="">
									<label for="query2" id="support-query">Support Request<span class="extra">______</span></label>
								</div>

<div class="intro-text"><h1>Contact Us</h1></div>

<div class="email-field field label-positioning">
							<label for="email">Email Address *</label>
							<input type="email" id="email" class="email" required="" autocomplete="" aria-required="true">
							<span class="email-error error">Please enter a valid email address.</span>
						</div>

<span class="query-error error">Please select an option.</span>

<div class="label-positioning">
							<label for="message">Message *</label>
							<textarea name="message" id="message" class="message" aria-required="true"></textarea>
						</div>

<span class="message-error error">Please enter a message.</span>

<label class="consent-check" aria-label="Consent checkbox">
							<input type="checkbox" name="consent" class="consent" aria-required="true" required="">
							<span class="checkmark"></span>
							<p>I consent to being contacted by the team. *</p>
						</label>

<span class="consent-error error">Please confirm your consent.</span>

>         <input type="text" id="first-name" class="first" required="" autocomplete="" aria-required="true">

>         <input type="text" id="last-name" class="last" required="" autocomplete="" aria-required="true">

l>        <input type="email" id="email" class="email" required="" autocomplete="" aria-required="true">

>         <div class="query" role="radio">

Please log in to post a comment

Community feedback

Responsive, accessible contact form, keyboard navigation

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community