<form class="row g-3 needs-validation" novalidate>
    <div class="col-md-6">
        <label for="validationCustom01" class="form-label label text-secondary">First name</label>
        <div class="position-relative">
            <input type="text" class="form-control h-55 ps-5" id="validationCustom01" value="Mark" required>
            <div class="valid-feedback">
                Looks good!
            </div>
            <i class="ri-user-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20" style="top: 13px !important;"></i>
        </div>
    </div>
    <div class="col-md-6">
        <label for="validationCustom02" class="form-label label text-secondary">Last name</label>
        <div class="position-relative">
            <input type="text" class="form-control h-55 ps-5" id="validationCustom02" value="Otto" required>
            <div class="valid-feedback">
                Looks good!
            </div>
            <i class="ri-user-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20" style="top: 13px !important;"></i>
        </div>
    </div>
    <div class="col-md-6">
        <label for="validationCustom03" class="form-label label text-secondary">Email Address</label>
        <div class="position-relative">
            <input type="email" class="form-control h-55 ps-5" id="validationCustom03" value="trezo@gmail.com" required>
            <div class="valid-feedback">
                Looks good!
            </div>
            <i class="ri-mail-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20" style="top: 13px !important;"></i>
        </div>
    </div>
    <div class="col-md-6">
        <label for="validationCustom04" class="form-label label text-secondary">Phone</label>
        <div class="position-relative">
            <input type="number" class="form-control h-55 ps-5 text-dark" id="validationCustom04" value="+02071234567" placeholder="020 7123 4567" required>
            <div class="valid-feedback">
                Looks good!
            </div>
            <i class="ri-phone-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20" style="top: 13px !important;"></i>
        </div>
    </div>
    <div class="col-md-12">
        <label for="validationCustom05" class="form-label label text-secondary">Address</label>
        <div class="position-relative">
            <input type="text" class="form-control h-55 ps-5" id="validationCustom05" placeholder="Your location" required>
            <div class="invalid-feedback">
                Please provide a valid Address.
            </div>
            <i class="ri-map-pin-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20" style="top: 13px !important;"></i>
        </div>
    </div>
    <div class="col-md-4">
        <label for="validationCustom06" class="form-label label text-secondary">Town/City</label>
        <div class="position-relative">
            <select class="form-select form-control h-55 ps-5" id="validationCustom06" required>
                <option selected disabled value="">Choose...</option>
                <option>California</option>
            </select>
            <div class="invalid-feedback">
                Please select a valid Town/City.
            </div>
            <i class="ri-building-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20" style="top: 13px !important;"></i>
        </div>
    </div>
    <div class="col-md-4">
        <label for="validationCustom07" class="form-label label text-secondary">State</label>
        <div class="position-relative">
            <select class="form-select form-control h-55 ps-5" id="validationCustom07" required>
                <option selected disabled value="">South poal evenue state 4C</option>
                <option>Trezo</option>
            </select>
            <div class="invalid-feedback">
                Please select a valid State.
            </div>
            <i class="ri-building-4-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20" style="top: 13px !important;"></i>
        </div>
    </div>
    <div class="col-md-4">
        <label for="validationCustom08" class="form-label label text-secondary">Zip Code</label>
        <div class="position-relative">
            <input type="text" class="form-control h-55 ps-5" id="validationCustom08" required>
            <div class="invalid-feedback">
                Please provide a valid zip.
            </div>
            <i class="ri-inbox-unarchive-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20" style="top: 13px !important;"></i>
        </div>
    </div>
    <div class="col-md-12">
        <label for="validationCustom09" class="form-label label text-secondary">Order Notes :</label>
        <div class="position-relative">
            <textarea cols="30" rows="5" class="form-control ps-5 py-3" id="validationCustom09" placeholder="Notes" required></textarea>
            <div class="invalid-feedback">
                Please provide a valid Notes.
            </div>
            <i class="ri-sticky-note-line position-absolute top-0 start-0 fs-20 text-gray-light ps-20" style="top: 13px !important;"></i>
        </div>
    </div>
    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
            <label class="form-check-label" for="invalidCheck">
                Agree to terms and conditions
            </label>
            <div class="invalid-feedback">
                You must agree before submitting.
            </div>
        </div>
    </div>
    <div class="col-12">
        <button class="btn btn-primary fw-semibold text-white py-2 px-3" type="submit">Submit Form</button>
    </div>
</form>

<form class="row g-3 needs-validation" novalidate>
    <div class="col-md-6">
        <label for="validationCustom10" class="form-label label text-secondary">First name</label>
        <div class="position-relative">
            <input type="text" class="form-control h-55" id="validationCustom10" value="Mark" required>
            <div class="valid-feedback">
                Looks good!
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <label for="validationCustom11" class="form-label label text-secondary">Last name</label>
        <div class="position-relative">
            <input type="text" class="form-control h-55" id="validationCustom11" value="Otto" required>
            <div class="valid-feedback">
                Looks good!
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <label for="validationCustom12" class="form-label label text-secondary">Email Address</label>
        <div class="position-relative">
            <input type="email" class="form-control h-55" id="validationCustom12" value="trezo@gmail.com" required>
            <div class="valid-feedback">
                Looks good!
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <label for="validationCustom13" class="form-label label text-secondary">Phone</label>
        <div class="position-relative">
            <input type="number" class="form-control h-55 text-dark" id="validationCustom13" value="+02071234567" placeholder="020 7123 4567" required>
            <div class="valid-feedback">
                Looks good!
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <label for="validationCustom14" class="form-label label text-secondary">Address</label>
        <div class="position-relative">
            <input type="text" class="form-control h-55" id="validationCustom14" placeholder="Your location" required>
            <div class="invalid-feedback">
                Please provide a valid Address.
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <label for="validationCustom15" class="form-label label text-secondary">Town/City</label>
        <div class="position-relative">
            <select class="form-select form-control h-55" id="validationCustom15" required>
                <option selected disabled value="">Choose...</option>
                <option>California</option>
            </select>
            <div class="invalid-feedback">
                Please select a valid Town/City.
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <label for="validationCustom16" class="form-label label text-secondary">State</label>
        <div class="position-relative">
            <select class="form-select form-control h-55" id="validationCustom16" required>
                <option selected disabled value="">South poal evenue state 4C</option>
                <option>Trezo</option>
            </select>
            <div class="invalid-feedback">
                Please select a valid State.
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <label for="validationCustom17" class="form-label label text-secondary">Zip Code</label>
        <div class="position-relative">
            <input type="text" class="form-control h-55" id="validationCustom17" required>
            <div class="invalid-feedback">
                Please provide a valid zip.
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <label for="validationCustom18" class="form-label label text-secondary">Order Notes :</label>
        <div class="position-relative">
            <textarea cols="30" rows="5" class="form-control py-3" id="validationCustom18" placeholder="Notes" required></textarea>
            <div class="invalid-feedback">
                Please provide a valid Notes.
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
            <label class="form-check-label" for="invalidCheck2">
                Agree to terms and conditions
            </label>
            <div class="invalid-feedback">
                You must agree before submitting.
            </div>
        </div>
    </div>
    <div class="col-12">
        <button class="btn btn-primary fw-semibold text-white py-2 px-3" type="submit">Submit Form</button>
    </div>
</form>