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.

Please enter firstname.
Please enter lastname.
Please enter company.
Please enter title.
Please enter email.
Please enter phone.
Please enter a message in the textarea.
<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
Looks good!
Looks good!
Looks good!

Password
Looks good!
Looks good!

Can’t remember your current password? Reset your 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

Please enter phone number.
<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

Category Image

Image

Category Information


Meta Data

<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>