Forms
Overview
Forms in the theme include items like input fields such as email, search inputs, contact forms, etcetera.
Input
Input field without label.
<!-- Input -->
<form class="d-flex align-items-center" role="search">
<input
class="form-control rounded-pill border border-brand-light-gray bg-brand-x-light-gray"
type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-brand-primary rounded-circle d-flex align-items-center"
type="submit">
<i data-feather="search"></i>
</button>
</form>
Input with label
Input field that includes a label above the input.
<!-- Input with label -->
<div class="mb-3">
<label for="inputWithLabel" class="form-label fw-bold">Name</label>
<input type="text" name="name" class="form-control" id="inputWithLabel"
placeholder="First and Last Name">
</div>
Input with Floating Label
Input with floating label uses functionality found in Bootstrap.
<!-- Input with Floating Label -->
<div class="form-floating flex-fill">
<input type="text" class="form-control" id="commentsFormName" placeholder="Name">
<label for="commentsFormName" class="text-brand-mid-gray">Name</label>
</div>
Radio Buttons
These are basic Radio Buttons.
<!-- Radio Buttons -->
<div class="border rounded-3 px-4 py-3">
<div class="d-flex justify-content-between align-items-center">
<div class="form-check">
<input class="form-check-input" type="radio" name="method-shipping"
id="free-shipping" checked>
<label class="form-check-label" for="free-shipping">
Button One <br>
<span class="text-12">Lorem ipsum dolor sit amet consectetur.</span>
</label>
</div>
<div>Lorem</div>
</div>
<hr class="w-100">
<div class="d-flex justify-content-between align-items-center">
<div class="form-check">
<input class="form-check-input" type="radio" name="method-shipping"
id="express-shipping">
<label class="form-check-label" for="express-shipping">
Button Two <br>
<span class="text-12">Lorem ipsum dolor sit amet consectetur.</span>
</label>
</div>
<div>Lorem</div>
</div>
</div>
Checkbox Basic
This is a basic checkbox.
<!-- Checkbox Basic -->
<div>
<input type="checkbox" name="checkout-remember" id="checkout-remember"
aria-label="remember me checkbox" class="form-check-input">
<label for="checkout-remember" class="ps-2">Lorem ipsum dolor sit amet.</label>
</div>
Checkbox Advanced
The styling on this checkbox makes it stand out from the basic version.
<!-- Checkbox Advanced -->
<div id="size">
<div class="text-center form-check">
<input class="form-check-input" type="checkbox" name="xs" id="xs">
<label class="form-check-label" for="xs">XS</label>
</div>
</div>
Color Selection
Color selection is used in the Product Single page.
<!-- Color Selection -->
<form class="d-flex">
<div class="form-check select-color color-select-grey">
<input class="form-check-input" type="radio" name="flexRadioDefault"
id="flexRadioDefault1">
</div>
<div class="form-check select-color color-select-turquoise">
<input class="form-check-input" type="radio" name="flexRadioDefault"
id="flexRadioDefault2" checked>
</div>
<div class="form-check select-color color-select-salmon">
<input class="form-check-input " type="radio" name="flexRadioDefault"
id="flexRadioDefault3" checked>
</div>
<div class="form-check select-color color-select-sky-blue">
<input class="form-check-input " type="radio" name="flexRadioDefault"
id="flexRadioDefault4" checked>
</div>
</form>
Input Number
Input a number used in places like the Shop pages filter.
<!-- Input Number -->
<div class="d-flex justify-content-start gap-3 py-3">
<div class="form-floating w-auto">
<input class="form-control form-control-sm bg-brand-x-light-gray rounded-0"
min="0" type="number" name="from-number" id="from-number"
placeholder="0">
<label for="from-number">From</label>
</div>
<div class="form-floating w-auto">
<input class="form-control form-control-sm bg-brand-x-light-gray rounded-0"
min="0" type="number" name="to-number" id="to-number" placeholder="0">
<label for="to-number">To</label>
</div>
</div>
Quantity Selection
Quantity selection is used in the Product Single page.
<!-- Quantity Selection -->
<div class="d-flex flex-column align-items-center mt-3">
<label class="form-label text-12">Quantity:</label>
<input type="number" name="quantity" value="1" min="0" class="form-control quantity-selection pe-0">
</div>
Review Form
Review form is used in the Product Single page. The input fields use Bootstrap's floating labels.
<!-- Review Form -->
<div class="col-12 col-lg-10 col-xl-8">
<div class="p-5 border border-1 border-brand-x-light-gray rounded-5 shadow-sm">
<div class="mb-3 w-50">
<div>
<label for="customRange3" class="form-label">Rating</label>
<div class="d-flex justify-content-start">
<span><i data-feather="star" width="30" height="30" stroke-width="1"
class="me-1 svg-stroke-brand-primary"></i></span>
<span><i data-feather="star" width="30" height="30" stroke-width="1"
class="me-1 svg-stroke-brand-primary"></i></span>
<span><i data-feather="star" width="30" height="30" stroke-width="1"
class="me-1 svg-stroke-brand-primary"></i></span>
<span><i data-feather="star" width="30" height="30" stroke-width="1"
class="me-1 svg-stroke-brand-primary"></i></span>
<span><i data-feather="star" width="30" height="30" stroke-width="1"
class="me-1 svg-stroke-brand-primary"></i></span>
</div>
</div>
</div>
<div class="mb-3">
<div class="form-floating">
<input type="text" name="full-name" id="full-name" class="form-control"
placeholder="full name">
<label for="full-name" class="text-brand-mid-gray">Name</label>
</div>
</div>
<div class="mb-3">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput"
placeholder="[email protected]">
<label for="floatingInput" class="text-brand-mid-gray">Email
Address</label>
</div>
</div>
<div class="mb-3">
<div class="form-floating">
<input type="text" name="title" id="title" class="form-control"
placeholder="title">
<label for="title" class="text-brand-mid-gray">Title</label>
</div>
</div>
<div class="mb-3 form-floating">
<textarea class="form-control" placeholder="Leave a comment here"
id="comment"></textarea>
<label for="comment" class="text-brand-mid-gray">Comment</label>
</div>
<button type="submit"
class="btn btn-brand-primary-reverse btn-xl rounded-pill mt-5">Submit</button>
</div>
</div>
Contact Form
Contact form is used throught the theme.
<!-- Contact Form -->
<div
class="col-12 col-md-8 offset-md-2 col-xl-6 offset-xl-3 col-xxl-4 offset-xxl-4 text-center">
<form>
<div class="bg-brand-primary shadow-lg rounded rounded-5 p-5 text-white text-start">
<div class="mb-3">
<label for="contactForm1Name" class="form-label">Name</label>
<input type="text" name="name" class="form-control" id="contactForm1Name"
placeholder="First and Last Name">
</div>
<div class="mb-3">
<label for="contactForm1Email" class="form-label">Email</label>
<input type="email" name="email" class="form-control" id="contactForm1Email"
placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="contactForm1Textarea" class="form-label">Message</label>
<textarea class="form-control" name="comment" id="contactForm1Textarea"
rows="3" placeholder="Message"></textarea>
</div>
</div>
<button type="submit" class="btn btn-brand-primary-reverse btn-xl mt-3 rounded-pill shadow">Let's
Talk</button>
</form>
</div>