Form
Form #1
Retailer Inquiries
This form is for retailer inquiries only. For all other customer or shopper support requests, please visit the links below this form.
<div class="row my-10">
<!-- col -->
<div class="offset-lg-1 col-lg-10 col-12">
<div class="mb-8">
<!-- heading -->
<h1 class="h3">Retailer Inquiries</h1>
<p class="lead mb-0">This form is for retailer inquiries
only. For all other customer or shopper support
requests, please visit the links below this form.
</p>
</div>
<!-- form -->
<form class="row needs-validation" novalidate>
<!-- input -->
<div class="col-md-6 mb-3">
<label class="form-label" for="fname">
First Name
<span class="text-danger">*</span>
</label>
<input type="text" id="fname" class="form-control"
name="fname" placeholder="Enter Your First Name"
required />
<div class="invalid-feedback">
Please enter firstname.
</div>
</div>
<div class="col-md-6 mb-3">
<!-- input -->
<label class="form-label" for="lname">
Last Name
<span class="text-danger">*</span>
</label>
<input type="text" id="lname" class="form-control"
name="lname" placeholder="Enter Your Last name"
required />
<div class="invalid-feedback">
Please enter lastname.
</div>
</div>
<div class="col-md-12 mb-3">
<!-- input -->
<label class="form-label" for="company">
Company
<span class="text-danger">*</span>
</label>
<input type="text" id="company" name="company"
class="form-control" placeholder="Your Company"
required />
<div class="invalid-feedback">
Please enter company.
</div>
</div>
<div class="col-md-12 mb-3">
<!-- input -->
<label class="form-label" for="title">Title</label>
<input type="text" id="title" name="title"
class="form-control" placeholder="Your Title"
required />
<div class="invalid-feedback">
Please enter title.
</div>
</div>
<div class="col-md-6 mb-3">
<label class="form-label" for="emailContact">
Email
<span class="text-danger">*</span>
</label>
<input type="email" id="emailContact"
name="emailContact" class="form-control"
placeholder="Enter Your First Name" required />
<div class="invalid-feedback">
Please enter email.
</div>
</div>
<div class="col-md-6 mb-3">
<!-- input -->
<label class="form-label" for="phone">Phone</label>
<input type="text" id="phone" name="phone"
class="form-control"
placeholder="Your Phone Number" required />
<div class="invalid-feedback">
Please enter phone.
</div>
</div>
<div class="col-md-12 mb-3">
<!-- input -->
<label for="validationTextarea"
class="form-label">Comments</label>
<textarea class="form-control"
id="validationTextarea" rows="4"
required></textarea>
<div class="invalid-feedback">
Please enter a message in the textarea.
</div>
</div>
<div class="col-md-12">
<!-- btn -->
<button type="submit"
class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
Form #2
Account Setting
Account details
Password
<div class="py-6 p-md-6 p-lg-10">
<div class="mb-6">
<!-- heading -->
<h2 class="mb-0">Account Setting</h2>
</div>
<div>
<!-- heading -->
<h5 class="mb-4">Account details</h5>
<div class="row">
<div class="col-lg-5">
<!-- form -->
<form class="needs-validation" novalidate>
<!-- input -->
<div class="mb-3">
<label class="form-label">Name</label>
<input type="text" class="form-control"
placeholder="jitu chauhan" />
<div class="valid-feedback">
Looks good!
</div>
</div>
<!-- input -->
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control"
placeholder="example@gmail.com" />
<div class="valid-feedback">
Looks good!
</div>
</div>
<!-- input -->
<div class="mb-5">
<label class="form-label">Phone</label>
<input type="text" class="form-control"
placeholder="Phone number" />
<div class="valid-feedback">
Looks good!
</div>
</div>
<!-- button -->
<div class="mb-3">
<button class="btn btn-primary">Save
Details</button>
</div>
</form>
</div>
</div>
</div>
<hr class="my-10" />
<div class="pe-lg-14">
<!-- heading -->
<h5 class="mb-4">Password</h5>
<form class="row row-cols-1 row-cols-lg-2 needs-validation" novalidate>
<!-- input -->
<div class="mb-3 col">
<label class="form-label">New Password</label>
<input type="password" class="form-control"
placeholder="**********" />
<div class="valid-feedback">
Looks good!
</div>
</div>
<!-- input -->
<div class="mb-3 col">
<label class="form-label">Current Password</label>
<input type="password" class="form-control"
placeholder="**********" />
<div class="valid-feedback">
Looks good!
</div>
</div>
<!-- input -->
<div class="col-12">
<p class="mb-4">
Can’t remember your current password?
<a href="#">Reset your password.</a>
</p>
<button class="btn btn-primary" type="submit">Save
Password</button>
</div>
</form>
</div>
</div>
Form #3
Enter your phone number to Signup or Register
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 col-12">
<div class="py-6">
<h4 class="fs-6 mb-4">Enter your phone number to Signup or Register</h4>
<form>
<div class="input-phone mb-2">
<input type="tel" maxlength="10" class="form-control" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required >
</div>
<div class="d-grid">
<button type="button" class="btn btn-primary">Next</button>
</div>
<div class="mt-4">
<small>
<a href="#">Terms of Service</a>
<a href="#" class="ms-3">Privacy Policy</a>
</small>
</div>
</div>
</div>
</div>
</div>
Form #4
<div class="row">
<div class="col-lg-12 col-12">
<!-- card -->
<div class="card mb-6 shadow border-0">
<!-- card body -->
<div class="card-body p-6 ">
<h4 class="mb-5 h5">Category Image</h4>
<div class="mb-4 d-flex">
<div class="position-relative" >
<img class="image icon-shape icon-xxxl bg-light rounded-4" src="../../assets/images/icons/bakery.svg" alt="Image">
<div class="file-upload position-absolute end-0 top-0 mt-n2 me-n1">
<input type="file" class="file-input ">
<span class="icon-shape icon-sm rounded-circle bg-white">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-pencil-fill text-muted" viewBox="0 0 16 16">
<path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
</svg>
</span>
</div>
</div>
</div>
<h4 class="mb-4 h5 mt-5">Category Information</h4>
<div class="row">
<!-- input -->
<div class="mb-3 col-lg-6">
<label class="form-label">Category Name</label>
<input type="text" class="form-control" placeholder="Category Name"
required>
</div>
<!-- input -->
<div class="mb-3 col-lg-6">
<label class="form-label">Slug</label>
<input type="text" class="form-control" placeholder="Slug" required>
</div>
<!-- input -->
<div class="mb-3 col-lg-6">
<label class="form-label">Parent Category</label>
<select class="form-select">
<option selected>Category Name</option>
<option value="Dairy, Bread & Eggs">Dairy, Bread & Eggs</option>
<option value="Snacks & Munchies">Snacks & Munchies</option>
<option value="Fruits & Vegetables">Fruits & Vegetables</option>
</select>
</div>
<div class="mb-3 col-lg-6">
<label class="form-label">Date</label>
<input type="text" class="form-control flatpickr" placeholder="Select Date">
</div>
<div>
</div>
<!-- input -->
<div class="mb-3 col-lg-12 ">
<label class="form-label">Descriptions</label>
<div class="py-8" id="editor"></div>
</div>
<!-- input -->
<div class="mb-3 col-lg-12 ">
<label class="form-label" id="productSKU">Status</label><br>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions"
id="inlineRadio1" value="option1" checked>
<label class="form-check-label" for="inlineRadio1">Active</label>
</div>
<!-- input -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions"
id="inlineRadio2" value="option2" >
<label class="form-check-label" for="inlineRadio2">Disabled</label>
</div>
<!-- input -->
</div>
<div class="mb-3 col-lg-12 mt-5 ">
<h4 class="mb-4 h5">Meta Data</h4>
<!-- input -->
<div class="mb-3">
<label class="form-label">Meta Title</label>
<input type="text" class="form-control" placeholder="Title">
</div>
<!-- input -->
<div class="mb-3">
<label class="form-label">Meta Description</label>
<textarea class="form-control" rows="3"
placeholder="Meta Description"></textarea>
</div>
</div>
<div class="col-lg-12">
<a href="#" class="btn btn-primary">
Create Product
</a>
<a href="#" class="btn btn-secondary ms-2">
Save
</a>
</div>
</div>
</div>
</div>
</div>
</div>