Contact sections · Design 01
Details Beside Form
Email, phone and the registered office as a ruled list on the left, with a message form card on the right (preview form, data-demo-form).
Contact us
Get in touch
Questions about a donation, Gift Aid, volunteering or the work itself: email, call, or send a message.
-
Phone
07940 040010 -
Registered office
94 Glen Road, Sheffield, S7 1RB, United Kingdom Open in Google Maps (opens in a new tab)
Zafar Foundation is a registered charity in England and Wales, number 1215863.
<section aria-labelledby="contact-01-title" class="bg-smoke py-16 sm:py-20 lg:py-24">
<div class="mx-auto grid w-full max-w-content gap-10 px-5 sm:px-8 lg:grid-cols-12 lg:gap-16">
<div class="lg:col-span-5">
<p class="t-label text-water">Contact us</p>
<h2 id="contact-01-title" class="t-h2 mt-3">Get in touch</h2>
<p class="t-lead mt-4 max-w-[44ch] text-slate">Questions about a donation, Gift Aid, volunteering or the work itself: email, call, or send a message.</p>
<ul class="mt-8 divide-y divide-line border-y border-line">
<li class="flex gap-4 py-5">
<span class="grid size-11 shrink-0 place-items-center rounded-md bg-white text-water shadow-[var(--shadow-card)]"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z"></path></svg></span>
<div class="min-w-0"><p class="t-caption text-slate">Email</p><a class="link font-display text-[16px] font-semibold [overflow-wrap:anywhere]" href="mailto:info@zafarfoundation.org.uk">info@zafarfoundation.org.uk</a></div>
</li>
<li class="flex gap-4 py-5">
<span class="grid size-11 shrink-0 place-items-center rounded-md bg-white text-water shadow-[var(--shadow-card)]"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"></path></svg></span>
<div class="min-w-0"><p class="t-caption text-slate">Phone</p><a class="link font-display text-[16px] font-semibold" href="tel:+447940040010">07940 040010</a></div>
</li>
<li class="flex gap-4 py-5">
<span class="grid size-11 shrink-0 place-items-center rounded-md bg-white text-water shadow-[var(--shadow-card)]"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z"></path></svg></span>
<div class="min-w-0">
<p class="t-caption text-slate">Registered office</p>
<address class="font-display text-[16px] font-semibold not-italic text-ink">94 Glen Road, Sheffield, S7 1RB, United Kingdom</address>
<a class="link t-caption mt-1.5 inline-flex items-center gap-1" href="https://www.google.com/maps/search/?api=1&query=94%20Glen%20Road%2C%20Sheffield%2C%20S7%201RB%2C%20United%20Kingdom" target="_blank" rel="noreferrer">Open in Google Maps<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 256 256" aria-hidden="true"><path d="M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z"></path></svg><span class="sr-only"> (opens in a new tab)</span></a>
</div>
</li>
</ul>
<p class="t-caption mt-5 text-slate">Zafar Foundation is a registered charity in England and Wales, number 1215863.</p>
</div>
<form data-demo-form aria-labelledby="contact-01-form-title" class="card p-6 sm:p-8 lg:col-span-7 lg:self-start">
<h3 id="contact-01-form-title" class="t-h3">Send a message</h3>
<div class="mt-6 grid gap-5 sm:grid-cols-2">
<div class="grid gap-1.5"><label for="contact-01-name" class="t-label text-ink">Your name</label><input id="contact-01-name" name="name" type="text" autocomplete="name" class="w-full min-w-0 rounded-sm border border-line-strong bg-white px-4 font-display text-base text-ink placeholder:text-slate/70 focus:border-water focus:outline-none focus:ring-2 focus:ring-water/30 h-12"></div>
<div class="grid gap-1.5"><label for="contact-01-email" class="t-label text-ink">Email address</label><input id="contact-01-email" name="email" type="email" autocomplete="email" class="w-full min-w-0 rounded-sm border border-line-strong bg-white px-4 font-display text-base text-ink placeholder:text-slate/70 focus:border-water focus:outline-none focus:ring-2 focus:ring-water/30 h-12"></div>
<div class="grid gap-1.5 sm:col-span-2">
<label for="contact-01-topic" class="t-label text-ink">What is it about</label>
<select id="contact-01-topic" name="topic" class="w-full min-w-0 rounded-sm border border-line-strong bg-white px-4 font-display text-base text-ink placeholder:text-slate/70 focus:border-water focus:outline-none focus:ring-2 focus:ring-water/30 h-12"><option value="">Choose one</option><option>A donation</option><option>Gift Aid</option><option>Zakat or Sadaqah</option><option>Volunteering</option><option>Partnerships</option><option>Press and media</option><option>Something else</option></select>
</div>
<div class="grid gap-1.5 sm:col-span-2"><label for="contact-01-message" class="t-label text-ink">Your message</label><textarea id="contact-01-message" name="message" rows="5" class="w-full min-w-0 rounded-sm border border-line-strong bg-white px-4 font-display text-base text-ink placeholder:text-slate/70 focus:border-water focus:outline-none focus:ring-2 focus:ring-water/30 py-3"></textarea></div>
</div>
<button type="submit" class="inline-flex items-center justify-center gap-2 rounded-sm font-display font-semibold leading-none whitespace-nowrap transition-[background-color,border-color,transform] duration-150 active:translate-y-px bg-ink text-white hover:bg-water-deep mt-6 h-12 px-6 text-base">Send message</button>
</form>
</div>
</section>