Forms - All Examples

Discover 12 Forms examples available in Loopple

Profile Form

<div class="card mb-4 draggable">
    <div class="card-header">
        <div class="row align-items-center">
            <div class="col-8">
                <h6 class="mb-0">Edit profile </h6>
            </div>
            <div class="col-4 text-end">
                <a href="#!" class="btn btn-sm btn-primary mb-0">Settings</a>
            </div>
        </div>
    </div>
    <div class="card-body">
        <form>
        <h6 class="heading-small text-muted mb-4">User information</h6>
        <div>
            <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                <label class="form-control-label" for="input-username">Username</label>
                <input type="text" id="input-username" class="form-control" placeholder="Username" value="lucky.jesse">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                <label class="form-control-label" for="input-email">Email address</label>
                <input type="email" id="input-email" class="form-control" placeholder="[email protected]">
                </div>
            </div>
            </div>
            <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                <label class="form-control-label" for="input-first-name">First name</label>
                <input type="text" id="input-first-name" class="form-control" placeholder="First name" value="Lucky">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                <label class="form-control-label" for="input-last-name">Last name</label>
                <input type="text" id="input-last-name" class="form-control" placeholder="Last name" value="Jesse">
                </div>
            </div>
            </div>
        </div>
        <hr class="horizontal dark my-4">
        <!-- Address -->
        <h6 class="heading-small text-muted mb-4">Contact information</h6>
        <div>
            <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                <label class="form-control-label" for="input-address">Address</label>
                <input id="input-address" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09" type="text">
                </div>
            </div>
            </div>
            <div class="row">
            <div class="col-lg-4">
                <div class="form-group">
                <label class="form-control-label" for="input-city">City</label>
                <input type="text" id="input-city" class="form-control" placeholder="City" value="New York">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group">
                <label class="form-control-label" for="input-country">Country</label>
                <input type="text" id="input-country" class="form-control" placeholder="Country" value="United States">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group">
                <label class="form-control-label" for="input-country">Postal code</label>
                <input type="number" id="input-postal-code" class="form-control" placeholder="Postal code">
                </div>
            </div>
            </div>
        </div>
        <hr class="horizontal dark my-4">
        <!-- Description -->
        <h6 class="heading-small text-muted mb-4">About me</h6>
        <div">
            <div class="form-group">
            <label class="form-control-label">About Me</label>
            <textarea rows="4" class="form-control" placeholder="A few words about you ...">A beautiful Dashboard for Bootstrap 5.</textarea>
            </div>
        </div"></form></div>
        
    </div>

Checkout Form

Login Form

Register Form

Form Application

Profile Form

<div class="card draggable">
    <div class="card-header">
        <div class="row align-items-center">
        <div class="col-8">
            <h3 class="mb-0">Edit profile </h3>
        </div>
        <div class="col-4 text-right">
            <a href="#!" class="btn btn-sm btn-primary">Settings</a>
        </div>
        </div>
    </div>
    <div class="card-body">
        <form>
        <h6 class="heading-small text-muted mb-4">User information</h6>
        <div class="pl-lg-4">
            <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                <label class="form-control-label" for="input-username">Username</label>
                <input type="text" id="input-username" class="form-control" placeholder="Username" value="lucky.jesse">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                <label class="form-control-label" for="input-email">Email address</label>
                <input type="email" id="input-email" class="form-control" placeholder="[email protected]">
                </div>
            </div>
            </div>
            <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                <label class="form-control-label" for="input-first-name">First name</label>
                <input type="text" id="input-first-name" class="form-control" placeholder="First name" value="Lucky">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                <label class="form-control-label" for="input-last-name">Last name</label>
                <input type="text" id="input-last-name" class="form-control" placeholder="Last name" value="Jesse">
                </div>
            </div>
            </div>
        </div>
        <hr class="my-4">
        <!-- Address -->
        <h6 class="heading-small text-muted mb-4">Contact information</h6>
        <div class="pl-lg-4">
            <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                <label class="form-control-label" for="input-address">Address</label>
                <input id="input-address" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09" type="text">
                </div>
            </div>
            </div>
            <div class="row">
            <div class="col-lg-4">
                <div class="form-group">
                <label class="form-control-label" for="input-city">City</label>
                <input type="text" id="input-city" class="form-control" placeholder="City" value="New York">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group">
                <label class="form-control-label" for="input-country">Country</label>
                <input type="text" id="input-country" class="form-control" placeholder="Country" value="United States">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group">
                <label class="form-control-label" for="input-country">Postal code</label>
                <input type="number" id="input-postal-code" class="form-control" placeholder="Postal code">
                </div>
            </div>
            </div>
        </div>
        <hr class="my-4">
        <!-- Description -->
        <h6 class="heading-small text-muted mb-4">About me</h6>
        <div class="pl-lg-4">
            <div class="form-group">
            <label class="form-control-label">About Me</label>
            <textarea rows="4" class="form-control" placeholder="A few words about you ...">A beautiful Dashboard for Bootstrap 4. It is Free and Open Source.</textarea>
            </div>
        </div>
        </form>
    </div>
</div>

Card Payment Form

Profile Form

<div class="card draggable">
    <div class="card-header">
        <div class="row align-items-center">
            <div class="col-8">
                <h6 class="mb-0">Edit profile </h6>
            </div>
            <div class="col-4 text-end">
                <a href="#!" class="btn btn-sm bg-gradient-primary mb-0">Settings</a>
            </div>
        </div>
    </div>
    <div class="card-body">
        <form>
        <h6 class="heading-small text-muted mb-4">User information</h6>
        <div>
            <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                <label class="form-control-label" for="input-username">Username</label>
                <input type="text" id="input-username" class="form-control" placeholder="Username" value="lucky.jesse">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                <label class="form-control-label" for="input-email">Email address</label>
                <input type="email" id="input-email" class="form-control" placeholder="[email protected]">
                </div>
            </div>
            </div>
            <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                <label class="form-control-label" for="input-first-name">First name</label>
                <input type="text" id="input-first-name" class="form-control" placeholder="First name" value="Lucky">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                <label class="form-control-label" for="input-last-name">Last name</label>
                <input type="text" id="input-last-name" class="form-control" placeholder="Last name" value="Jesse">
                </div>
            </div>
            </div>
        </div>
        <hr class="horizontal dark my-4">
        <!-- Address -->
        <h6 class="heading-small text-muted mb-4">Contact information</h6>
        <div>
            <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                <label class="form-control-label" for="input-address">Address</label>
                <input id="input-address" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09" type="text">
                </div>
            </div>
            </div>
            <div class="row">
            <div class="col-lg-4">
                <div class="form-group">
                <label class="form-control-label" for="input-city">City</label>
                <input type="text" id="input-city" class="form-control" placeholder="City" value="New York">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group">
                <label class="form-control-label" for="input-country">Country</label>
                <input type="text" id="input-country" class="form-control" placeholder="Country" value="United States">
                </div>
            </div>
            <div class="col-lg-4">
                <div class="form-group">
                <label class="form-control-label" for="input-country">Postal code</label>
                <input type="number" id="input-postal-code" class="form-control" placeholder="Postal code">
                </div>
            </div>
            </div>
        </div>
        <hr class="horizontal dark my-4">
        <!-- Description -->
        <h6 class="heading-small text-muted mb-4">About me</h6>
        <div">
            <div class="form-group">
            <label class="form-control-label">About Me</label>
            <textarea rows="4" class="form-control" placeholder="A few words about you ...">A beautiful Dashboard for Bootstrap 5.</textarea>
            </div>
        </div>
        </form>
    </div>
</div>

Form Change Password

Form Profile Settings

<div class="relative flex flex-col h-full min-w-0 break-words bg-white border-0 shadow-soft-xl rounded-2xl bg-clip-border draggable">
  <div class="p-4 pb-0 mb-0 bg-white border-b-0 rounded-t-2xl">
    <h6 class="mb-0">Platform Settings</h6>
  </div>
  <div class="flex-auto p-4">
    <h6 class="font-bold leading-tight uppercase text-xs text-slate-500">Account</h6>
    <ul class="flex flex-col pl-0 mb-0 rounded-lg">
      <li class="relative block px-0 py-2 bg-white border-0 rounded-t-lg text-inherit">
        <div class="min-h-6 mb-0.5 block pl-0">
          <input id="follow" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox" checked>
            <label for=" follow" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">Email me when someone follows me</label>
        </div>
      </li>
      <li class="relative block px-0 py-2 bg-white border-0 text-inherit">
        <div class="min-h-6 mb-0.5 block pl-0">
          <input id="answer" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox">
          <label for="answer" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">Email me when someone answers on my post</label>
        </div>
      </li>
      <li class="relative block px-0 py-2 bg-white border-0 rounded-b-lg text-inherit">
        <div class="min-h-6 mb-0.5 block pl-0">
          <input id="mention" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox" checked="">
          <label for="mention" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">Email me when someone mentions me</label>
        </div>
      </li>
    </ul>
    <h6 class="mt-6 font-bold leading-tight uppercase text-xs text-slate-500">Application</h6>
    <ul class="flex flex-col pl-0 mb-0 rounded-lg">
      <li class="relative block px-0 py-2 bg-white border-0 rounded-t-lg text-inherit">
        <div class="min-h-6 mb-0.5 block pl-0">
          <input id="launches projects" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox">
          <label for="launches projects" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">New launches and projects</label>
        </div>
      </li>
      <li class="relative block px-0 py-2 bg-white border-0 text-inherit">
        <div class="min-h-6 mb-0.5 block pl-0">
          <input id="product updates" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox" checked="">
          <label for="product updates" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">Monthly product updates</label>
        </div>
      </li>
      <li class="relative block px-0 py-2 pb-0 bg-white border-0 rounded-b-lg text-inherit">
        <div class="min-h-6 mb-0.5 block pl-0">
          <input id="subscribe" class="mt-0.54 rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.25 h-5 relative float-left ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type="checkbox">
          <label for="subscribe" class="w-4/5 mb-0 ml-4 overflow-hidden font-normal cursor-pointer select-none text-sm text-ellipsis whitespace-nowrap text-slate-500">Subscribe to newsletter</label>
        </div>
      </li>
    </ul>
  </div>
</div>