<form id="userForm" class="row g-3">
    <input type="hidden" id="agent_key" name="agent_key" value="">
                                                            
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
        <label for="firstname" class="form-label">First Name</label>
        <input type="text" class="form-control" id="firstname" name="firstname" required>
    </div>
                                                            
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
        <label for="lastname" class="form-label">Last Name</label>
        <input type="text" class="form-control" id="lastname" name="lastname" required>
    </div>
                                                            
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12" id="pin-container">
        <label for="userpin" class="form-label">User Pin</label>
        <input type="text" class="form-control" id="userpin" name="userpin" minlength="4" maxlength="4" pattern="\d*" title="4 digit PIN" required>
    </div>
                                                            
    <div class="col-12 form-check">
        <input class="form-check-input" type="checkbox" id="active" name="active" checked>
        <label class="form-check-label" for="active">Active</label>
    </div>
                                                            
    <div class="mt-4">
        <button type="submit" class="btn btn-secondary btn-wave" id="submitBtn">Add User</button>
        <button type="button" class="btn btn-secondary btn-wave" id="cancelBtn">Cancel</button>
    </div>
</form>