wecuro_blog/application/views/frontend/components/form_nurse.php

<div class="d-flex justify-content-end">
  <div class="card text-bg-light card-ydchft">
    <div class="card-body p-4">
      <h5 class="card-title text-center fw-bold">
        Register as a Caregiver
      </h5>
      <div class="w-100 d-flex justify-content-center p-2 mb-2" role="tablist" style="gap:1rem;">
        <button 
          type="button" 
          class="btn-uygtyudc rounded-pill active" 
          data-via="phone" 
          data-bs-toggle="tab" 
          data-bs-target="#via_phone_tab_pane" 
          role="tab" 
          aria-controls="via_phone_tab_pane" 
          aria-selected="true"
        >
          via Phone
        </button>
        <button 
          type="button" 
          class="btn-uygtyudc rounded-pill" 
          data-via="email" 
          data-bs-toggle="tab" 
          data-bs-target="#via_email_tab_pane" 
          role="tab" 
          aria-controls="via_email_tab_pane" 
          aria-selected="false"
        >
          via Email
        </button>
      </div>
      <form 
        role="form" 
        action="<?=base_url()?>auth/hms_caregiver_sign_up" 
        method="post" 
        enctype="multipart/form-data" 
        name="newGenInfo" 
        class="form-sdtcfshgdfctr5tdr" 
      >
        
        <input type="hidden" name="<?=$this->security->get_csrf_token_name()?>" value="<?=$this->security->get_csrf_hash()?>" />
        <input type="hidden" name="form_tab_status" value="1">
        <input type="hidden" name="id" id="caregiver_id" value="">
        <input type="hidden" name="form_status" value="">
        <input type="hidden" name="form_mode" value="Add">
        <input type="hidden" name="email_availability" id="email_availability" value="0">
        <input type="hidden" name="via" value="phone">

        <div class="row w-100 m-0 p-0">
          <div class="col-sm-6 px-1">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="first_name" name="fname" placeholder="Jhon" required>
              <label for="first_name" class="text-capitalize"><?=lang('First Name')?></label>
            </div>
          </div>
          <div class="col-sm-6 px-1">
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="last_name" name="lname" placeholder="Doe" required>
              <label for="last_name" class="text-capitalize"><?=lang('Last Name')?></label>
            </div>
          </div>
          <div class="col-sm-12 px-1">
            <div class="tab-content">
              <div class="tab-pane fade show active" id="via_phone_tab_pane" role="tabpanel" aria-labelledby="via-phone-tab" tabindex="0">
                <div class="form-floating mb-3">
                  <input 
                    type="text" 
                    class="form-control" 
                    id="phone_number" 
                    name="phone" 
                    placeholder="(123)-456-7890"  
                    onkeypress="return isNumberKey(event)" 
                    onkeyup="USformatPhoneNumber(this.value,this);" 
                    onblur="USformatPhoneNumber(this.value,this);" 
                    required 
                  >
                  <label for="phone_number" class="text-capitalize"><?=lang('Mobile Number')?></label>
                </div>
              </div>
              <div class="tab-pane fade" id="via_email_tab_pane" role="tabpanel" aria-labelledby="via-email-tab" tabindex="0">
                <div class="form-floating mb-3">
                  <input 
                    type="email" 
                    class="form-control user-email-check" 
                    id="email_id" 
                    name="email" 
                    placeholder="example@gmail.com" 
                    onblur="userEmailAvailabilityCheck(this.value,this)" 
                  >
                  <label for="email_id" class="text-capitalize"><?=lang('Your Email')?></label>
                  <small class="email-validator-msg d-block position-absolute" style="font-size:12px;"></small>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-12 px-1">
            <div class="form-floating mb-3">
              <select class="form-select" aria-label="Default select" id="qualification_type" name="qualification_type" required>
                <option value="" selected><?=lang('Select employee type')?></option>
                <?php
                foreach($caregiver_skill_list as $cg_skill_list){
                  ?>
                  <option value="<?=$cg_skill_list->id?>">
                    <?=lang($cg_skill_list->name)?>
                  </option>
                  <?php
                }
                ?>
              </select>
              <label for="employee_type" class="text-capitalize">employee type</label>
            </div>
          </div>
          <div class="col-sm-6 px-1">
            <div class="form-floating mb-3">
              <input type="password" class="form-control" id="new_password" name="password" placeholder="Password" required>
              <span class="fa fa-fw fa-eye-slash idftr5cdf toggle-password"></span>
              <label for="new_password" class="text-capitalize"><?=lang('Create Password')?></label>
            </div>
          </div>
          <div class="col-sm-6 px-1">
            <div class="form-floating mb-3">
              <input type="password" class="form-control" id="confirm_password" name="confirmpass" placeholder="Confirm Password" required>
              <span class="fa fa-fw fa-eye-slash idftr5cdf toggle-password"></span>
              <label for="confirm_password" class="text-capitalize"><?=lang('Confirm Password')?></label>
            </div>
          </div>
          <div class="col-sm-12 px-1">
            <div class="form-floating mb-sm-3" style="overflow:hidden;">
              <div class="g-recaptcha" data-sitekey="<?=RECAPTCHA_SITE_KEY?>"></div>
            </div>
          </div>
          <div class="col-sm-12 px-1">
            <div class="form-check mb-3">
              <input class="form-check-input" type="checkbox" value="" id="accept_terms_conditions" name="terms_conditions" style="margin-top:5px;">
              <label class="form-check-label" for="accept_terms_conditions" style="font-size:13px;">
                <?=lang('By clicking on sign up, you agree to')?> 
                <a href="<?=base_url()?>terms_conditions">Terms</a> and 
                <a href="<?=base_url()?>privacy_policy">Privacy Policy</a> 
              </label>
            </div>
          </div>
          <div class="col-sm-12 px-1">
            <input type="hidden" class="form-control" id="oauth_provider" name="oauth_provider" value="general" required>
            <button type="submit" class="btn-ythffgvjj" name="submit" value="Sign Up">
              <span class="d-inline-block mt-2 ms-3"><?=lang('Register')?></span>
              <i class="fa-solid fa-chevron-right float-end" style="background: var(--register-button-icon-bg-color);"></i>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>