<div class="js-component relative z-0 component-spacer-padding bg-grey-50">
<div class="container">
<div class="max-w-screen-md mx-auto lg:px-20">
<h2 class="text-5xl xl:text-7xl font-normal font-heading leading-[40px] xl:leading-[72px] text-heading text-center">Contact us</h2>
<div class="mt-8">
<div class="flex flex-col gap-8">
<label class="block">
<span class="text-body mb-2 block font-semibold">Full name</span>
<input type="text" class="
block
w-full
rounded-md
border-grey-200
shadow-sm
focus:border-button-surface focus:ring-3 focus:ring-button-surface/20" placeholder="">
</label>
<label class="block font-semibold">
<span class="text-body mb-2 block">Email</span>
<input type="email" class="
block
w-full
rounded-md
border-grey-200
shadow-sm
focus:border-button-surface placeholder:font-normal focus:ring-3 focus:ring-button-surface/20" placeholder="john@hotmail.com">
</label>
<label class="block">
<span class="text-body mb-2 block font-semibold">When is your event?</span>
<div class="relative">
<input type="text" class="
block
w-full
rounded-md
border-grey-200
shadow-sm
focus:border-button-surface focus:ring-3 focus:ring-button-surface/20">
<div class="absolute w-5 h-5 right-2 top-2/4 -translate-y-2/4 pointer-events-none text-heading">
<svg class="fill-current w-full h-full" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-calendar"></use>
</svg>
</div>
</div>
</label>
<fieldset>
<legend class="text-body mb-2 block font-semibold">Do you agree?</legend>
<div class="flex gap-x-4">
<label class="inline-flex items-center text-body">
<input type="radio" class=" text-grey focus:border-button-surface focus:ring-3 focus:ring-button-surface/20" name="Do you agree?" value="Yes">
<span class="ml-2">Yes</span>
</label>
<label class="inline-flex items-center text-body">
<input type="radio" class=" text-grey focus:border-button-surface focus:ring-3 focus:ring-button-surface/20" name="Do you agree?" value="No">
<span class="ml-2">No</span>
</label>
</div>
</fieldset>
<label class="block">
<span class="text-body mb-2 block font-semibold">What type of event is it?</span>
<select class="block
w-full
rounded-md
border-grey-200
shadow-sm
focus:border-button-surface focus:ring-3 focus:ring-button-surface/20">
<option>Corporate event</option>
<option>Wedding</option>
<option>Birthday</option>
<option>Other</option>
</select>
</label>
<fieldset>
<legend class="text-body mb-2 block font-semibold">Select multiple options</legend>
<div class="space-y-2">
<label class="flex items-center text-body">
<input type="checkbox" class="rounded
border-grey-200
text-grey
focus:border-button-surface
focus:ring-button-surface
shadow-sm
focus:ring
focus:ring-offset-0
focus:border-button-surface focus:ring-3 focus:ring-button-surface/20" value="Option 1">
<span class="ml-2">Option 1</span>
</label>
<label class="flex items-center text-body">
<input type="checkbox" class="rounded
border-grey-200
text-grey
focus:border-button-surface
focus:ring-button-surface
shadow-sm
focus:ring
focus:ring-offset-0
focus:border-button-surface focus:ring-3 focus:ring-button-surface/20" value="Option 2">
<span class="ml-2">Option 2</span>
</label>
<label class="flex items-center text-body">
<input type="checkbox" class="rounded
border-grey-200
text-grey
focus:border-button-surface
focus:ring-button-surface
shadow-sm
focus:ring
focus:ring-offset-0
focus:border-button-surface focus:ring-3 focus:ring-button-surface/20" value="Option 3">
<span class="ml-2">Option 3</span>
</label>
<label class="flex items-center text-body">
<input type="checkbox" class="rounded
border-grey-200
text-grey
focus:border-button-surface
focus:ring-button-surface
shadow-sm
focus:ring
focus:ring-offset-0
focus:border-button-surface focus:ring-3 focus:ring-button-surface/20" value="Other">
<span class="ml-2">Other</span>
</label>
</div>
</fieldset>
<label class="block">
<span class="text-body mb-2 block font-semibold">Additional details</span>
<textarea class="
block
w-full
rounded-md
border-grey-200
shadow-sm
focus:border-button-surface focus:ring-3 focus:ring-button-surface/20" rows="3"></textarea>
</label>
<div class="block">
<div>
<label class="inline-flex items-center text-body">
<input type="checkbox" class="rounded
border-grey-200
text-grey
focus:border-button-surface
focus:ring-button-surface/50
shadow-sm
focus:ring
focus:ring-offset-0">
<span class="ml-2">Sign up to our newsletter</span>
</label>
</div>
</div>
</div>
<div class="my-8 text-right">
<button class="btn bg-button-surface text-button-text border-2 border-button-surface hover:bg-button-surface-hover hover:border-button-surface-hover">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
<div class="js-component relative z-0 component-spacer-padding bg-grey-50" {% if dataTheme %}data-theme="{{dataTheme}}"{% endif %} {% if dataMode %}data-mode="{{dataMode}}"{% endif %}>
<div class="container">
<div class="max-w-screen-md mx-auto lg:px-20">
<h2 class="text-5xl xl:text-7xl font-normal font-heading leading-[40px] xl:leading-[72px] text-heading text-center">Contact us</h2>
<div class="mt-8">
<div class="flex flex-col gap-8">
{% render "@text-input", { label: "Full name" } %}
{% render "@email-input", { label: "Email", placeholder: "john@hotmail.com" } %}
{% render "@date-input", { label: "When is your event?" } %}
{% render "@radio-box-input", { label: "Do you agree?", options: ["Yes", "No"] } %}
{% render "@select-input", { label: "What type of event is it?", options: ["Corporate event", "Wedding", "Birthday", "Other"] } %}
{% render "@check-box-list-input", { label: "Select multiple options", options: ["Option 1", "Option 2", "Option 3", "Other"] } %}
{% render "@text-area-input", { label: "Additional details" } %}
{% render "@check-box-input", { label: "Sign up to our newsletter" } %}
</div>
<div class="my-8 text-right">
{% render "@button--themed", { renderAsButton: true, text: 'Submit' }, true %}
</div>
</div>
</div>
</div>
</div>
{
"siteName": "UCEA",
"dataTheme": ""
}
No notes defined.