Metronic | Multi Column Forms

Multi Column Forms

Actions

2 Columns Form Layout

Full Name: Please enter your full name

Contact Number: Please enter your contact number

Address:

Please enter your address

Postcode:

Please enter your postcode

User Group:

Sales Person Customer

Please select user group

HTML


        <form class="form">
         <div class="card-body">
          <div class="form-group row">
           <div class="col-lg-6">
            <label>Full Name:</label>
            <input type="email" class="form-control" placeholder="Enter full name"/>
            <span class="form-text text-muted">Please enter your full name</span>
           </div>
           <div class="col-lg-6">
            <label>Contact Number:</label>
            <input type="email" class="form-control" placeholder="Enter contact number"/>
            <span class="form-text text-muted">Please enter your contact number</span>
           </div>
          </div>
          <div class="form-group row">
           <div class="col-lg-6">
            <label>Address:</label>
            <div class="input-group">
             <input type="text" class="form-control" placeholder="Enter your address"/>
             <div class="input-group-append"><span class="input-group-text"><i class="la la-map-marker"></i></span></div>
            </div>
            <span class="form-text text-muted">Please enter your address</span>
           </div>
           <div class="col-lg-6">
            <label>Postcode:</label>
            <div class="input-group">
             <input type="text" class="form-control" placeholder="Enter your postcode"/>
             <div class="input-group-append"><span class="input-group-text"><i class="la la-bookmark-o"></i></span></div>
            </div>
            <span class="form-text text-muted">Please enter your postcode</span>
           </div>
          </div>
          <div class="form-group row">
           <div class="col-lg-6">
            <label>User Group:</label>
            <div class="radio-inline">
             <label class="radio radio-solid">
              <input type="radio" name="example_2" checked="checked" value="2"/>
              <span></span>
              Sales Person
             </label>
             <label class="radio radio-solid">
              <input type="radio" name="example_2" value="2"/>
              <span></span>
              Customer
             </label>
            </div>
            <span class="form-text text-muted">Please select user group</span>
           </div>
          </div>
         </div>
         <div class="card-footer">
          <div class="row">
           <div class="col-lg-6">
            <button type="reset" class="btn btn-primary mr-2">Save</button>
            <button type="reset" class="btn btn-secondary">Cancel</button>
           </div>
           <div class="col-lg-6 text-right">
            <button type="reset" class="btn btn-danger">Delete</button>
           </div>
          </div>
         </div>
        </form>

2 Columns Horizontal Form Layout

Full Name:

Please enter your full name

Contact Number:

Please enter your contact number

Address:

Please enter your address

Postcode:

Please enter your postcode

Group:

Sales Person Customer

Please select user group

HTML


        <form class="form">
         <div class="card-body">
          <div class="form-group row">
           <label class="col-lg-2 col-form-label text-right">Full Name:</label>
           <div class="col-lg-3">
            <input type="email" class="form-control" placeholder="Enter full name"/>
            <span class="form-text text-muted">Please enter your full name</span>
           </div>
           <label class="col-lg-2 col-form-label text-right">Contact Number:</label>
           <div class="col-lg-3">
            <input type="email" class="form-control" placeholder="Enter contact number"/>
            <span class="form-text text-muted">Please enter your contact number</span>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-lg-2 col-form-label text-right">Address:</label>
           <div class="col-lg-3">
            <div class="input-group">
             <input type="text" class="form-control" placeholder="Enter your address"/>
             <div class="input-group-append"><span class="input-group-text"><i class="la la-map-marker"></i></span></div>
            </div>
            <span class="form-text text-muted">Please enter your address</span>
           </div>
           <label class="col-lg-2 col-form-label text-right">Postcode:</label>
           <div class="col-lg-3">
            <div class="input-group">
             <input type="text" class="form-control" placeholder="Enter your postcode"/>
             <div class="input-group-append"><span class="input-group-text"><i class="la la-bookmark-o"></i></span></div>
            </div>
            <span class="form-text text-muted">Please enter your postcode</span>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-lg-2 col-form-label text-right">Group:</label>
           <div class="col-lg-3">
            <div class="radio-inline">
             <label class="radio radio-solid">
              <input type="radio" name="example_2" checked="checked" value="2"/>
              <span></span>
              Sales Person
             </label>
             <label class="radio radio-solid">
              <input type="radio" name="example_2" value="2"/>
              <span></span>
              Customer
             </label>
            </div>
            <span class="form-text text-muted">Please select user group</span>
           </div>
          </div>
         </div>
         <div class="card-footer">
          <div class="row">
           <div class="col-lg-2"></div>
           <div class="col-lg-10">
            <button type="reset" class="btn btn-success mr-2">Submit</button>
            <button type="reset" class="btn btn-secondary">Cancel</button>
           </div>
          </div>
         </div>
        </form>

3 Columns Form Layout

Full Name: Please enter your full name

Email: Please enter your email

Username:

Please enter your username

Contact: Please enter your contact

Fax:

Please enter fax

Address:

Please enter your address

Postcode:

Please enter your postcode

User Group:

Sales Person Customer

Please select user group

HTML


        <form class="form">
         <div class="card-body">
          <div class="form-group row">
           <div class="col-lg-4">
            <label>Full Name:</label>
            <input type="email" class="form-control" placeholder="Enter full name"/>
            <span class="form-text text-muted">Please enter your full name</span>
           </div>
           <div class="col-lg-4">
            <label>Email:</label>
            <input type="email" class="form-control" placeholder="Enter email"/>
            <span class="form-text text-muted">Please enter your email</span>
           </div>
           <div class="col-lg-4">
            <label>Username:</label>
            <div class="input-group">
             <div class="input-group-prepend"><span class="input-group-text"><i class="la la-user"></i></span></div>
             <input type="text" class="form-control" placeholder=""/>
            </div>
            <span class="form-text text-muted">Please enter your username</span>
           </div>
          </div>
          <div class="form-group row">
           <div class="col-lg-4">
            <label>Contact:</label>
            <input type="email" class="form-control" placeholder="Enter contact number"/>
            <span class="form-text text-muted">Please enter your contact</span>
           </div>
           <div class="col-lg-4">
            <label>Fax:</label>
            <div class="input-group">
             <div class="input-group-prepend"><span class="input-group-text"><i class="la la-info-circle"></i></span></div>
             <input type="text" class="form-control" placeholder="Fax number"/>
            </div>
            <span class="form-text text-muted">Please enter fax</span>
           </div>
           <div class="col-lg-4">
            <label>Address:</label>
            <div class="input-group">
             <input type="text" class="form-control" placeholder="Enter your address"/>
             <div class="input-group-append"><span class="input-group-text"><i class="la la-map-marker"></i></span></div>
            </div>
            <span class="form-text text-muted">Please enter your address</span>
           </div>
          </div>
          <div class="form-group row">
           <div class="col-lg-4">
            <label>Postcode:</label>
            <div class="input-group">
             <div class="input-group-append"><span class="input-group-text"><i class="la la-bookmark-o"></i></span></div>
             <input type="text" class="form-control" placeholder="Enter your postcode"/>
            </div>
            <span class="form-text text-muted">Please enter your postcode</span>
           </div>
           <div class="col-lg-4">
            <label>User Group:</label>
            <div class="radio-inline">
             <label class="radio radio-solid">
              <input type="radio" name="example_2" checked="checked" value="2"/>
              <span></span>
              Sales Person
             </label>
             <label class="radio radio-solid">
              <input type="radio" name="example_2" value="2"/>
              <span></span>
              Customer
             </label>
            </div>
            <span class="form-text text-muted">Please select user group</span>
           </div>
          </div>
         </div>
         <div class="card-footer">
          <div class="row">
           <div class="col-lg-4"></div>
           <div class="col-lg-8">
            <button type="reset" class="btn btn-primary mr-2">Submit</button>
            <button type="reset" class="btn btn-secondary">Cancel</button>
           </div>
          </div>
         </div>
        </form>

3 Columns Horizontal Form Layout

Full Name:

Please enter your full name

Email:

Please enter your email

Username:

Please enter your username

Contact:

Please enter your contact

Fax:

Please enter fax

Address:

Please enter your address

Postcode:

Please enter your postcode

User Group:

Sales Person Customer

Please select user group

HTML


        <form class="form">
         <div class="card-body">
          <div class="form-group row mt-3">
           <label class="col-lg-1 col-form-label text-right">Full Name:</label>
           <div class="col-lg-3">
            <input type="email" class="form-control" placeholder="Full name"/>
            <span class="form-text text-muted">Please enter your full name</span>
           </div>
           <label class="col-lg-1 col-form-label text-right">Email:</label>
           <div class="col-lg-3">
            <input type="email" class="form-control" placeholder="Email"/>
            <span class="form-text text-muted">Please enter your email</span>
           </div>
           <label class="col-lg-1 col-form-label text-right">Username:</label>
           <div class="col-lg-3">
            <div class="input-group">
             <div class="input-group-prepend"><span class="input-group-text"><i class="la la-user"></i></span></div>
             <input type="text" class="form-control" placeholder=""/>
            </div>
            <span class="form-text text-muted">Please enter your username</span>
           </div>
          </div>

          <div class="separator separator-dashed my-10"></div>

          <div class="form-group row">
           <label class="col-lg-1 col-form-label text-right">Contact:</label>
           <div class="col-lg-3">
            <input type="email" class="form-control" placeholder="Enter contact number"/>
            <span class="form-text text-muted">Please enter your contact</span>
           </div>
           <label class="col-lg-1 col-form-label text-right">Fax:</label>
           <div class="col-lg-3">
            <div class="input-group">
             <input type="text" class="form-control" placeholder="Fax number"/>
             <div class="input-group-append"><span class="input-group-text"><i class="la la-info-circle"></i></span></div>
            </div>
            <span class="form-text text-muted">Please enter fax</span>
           </div>
           <label class="col-lg-1 col-form-label text-right">Address:</label>
           <div class="col-lg-3">
            <div class="input-group">
             <input type="text" class="form-control" placeholder="Enter your address"/>
             <div class="input-group-append"><span class="input-group-text"><i class="la la-map-marker"></i></span></div>
            </div>
            <span class="form-text text-muted">Please enter your address</span>
           </div>
          </div>

          <div class="separator separator-dashed my-10"></div>

          <div class="form-group row">
           <label class="col-lg-1 col-form-label text-right">Postcode:</label>
           <div class="col-lg-3">
            <div class="input-group">
             <input type="text" class="form-control" placeholder="Enter your postcode"/>
             <div class="input-group-append"><span class="input-group-text"><i class="la la-bookmark-o"></i></span></div>
            </div>
            <span class="form-text text-muted">Please enter your postcode</span>
           </div>
           <label class="col-lg-1 col-form-label text-right">User Group:</label>
           <div class="col-lg-3">
            <div class="radio-inline">
             <label class="radio radio-solid">
              <input type="radio" name="example_2" checked="checked" value="2"/> Sales Person
              <span></span>
             </label>
             <label class="radio radio-solid">
              <input type="radio" name="example_2" value="2"/> Customer
              <span></span>
             </label>
            </div>
            <span class="form-text text-muted">Please select user group</span>
           </div>
          </div>
         </div>
         <div class="card-footer">
          <div class="row">
           <div class="col-lg-5"></div>
           <div class="col-lg-7">
            <button type="reset" class="btn btn-primary mr-2">Submit</button>
            <button type="reset" class="btn btn-secondary">Cancel</button>
           </div>
          </div>
         </div>
        </form>

Custom

Layout

CRUD

Features

Task Reports

Profit Margins

Staff Management

Tools

User Notifications 23 new

Quick Actions

Multi Column Forms

2 Columns Form Layout

2 Columns Horizontal Form Layout

3 Columns Form Layout

3 Columns Horizontal Form Layout

User Profile 12 messages

Recent Notifications

Shopping Cart

System Messages

Notifications

Customer Care

Reports

Memebers

Select A Demo

Demo 1

Demo 2

Demo 3

Demo 4

Demo 5

Demo 6

Demo 7

Demo 8

Demo 9

Demo 10

Demo 11

Demo 12

Demo 13

Demo 14

Demo 15

Demo 16

Demo 17

Demo 18

Demo 19

Demo 20

Demo 21

Demo 22

Demo 23

Demo 24

Demo 25

Demo 26

Demo 27

Demo 28

Demo 29

Demo 30