Forms Wizard bootstrap style

Builds a wizard out of a formatter tabbable structure.

Wizard full settings in .well-box

Persona´s name New Account form
Personal Data Default wizard legend
Dates of employment Default wizard legend

  • Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.

Contact info Default wizard legend

  • Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta.

Address Default wizard legend
Overview form Default wizard legend

  • Name mr. Jonathan Somerson

    Marital Status married

    Gender man

    Date Of Birth 08/08/1978

    Age 34

  • Email j.somerson@example.com

    Phone (123) 456-7890

    fax (123) 456-7890

  • Address 795 Folsom Ave, Suite 600

      San Francisco, CA 94107

  • Employer Twitter, Inc.

    Department sales Department

    Job Manager

Wizard Steps responsive style

before

  1. Paragraph
  2. Bordered
  3. List
  4. Blockquote

Lorem ipsum dolor sit amet consectetuer pretium Nam non libero tincidunt. Eget et feugiat consequat quis sagittis sociis Quisque fringilla sagittis et. Pede Phasellus Nam tincidunt laoreet semper cursus nunc Suspendisse suscipit enim. Metus aliquam a facilisis magna Duis eros a gravida id malesuada. Porta interdum a vitae congue justo sit mattis. Nam tincidunt laoreet semper cursus nunc Suspendisse suscipit enim. Metus aliquam a facilisis magna Duis eros a gravida id malesuada. Porta interdum a vitae congue justo sit mattis

Lorem ipsum dolor sit amet consectetuer pretium Nam non libero tincidunt. Eget et feugiat consequat quis sagittis sociis Quisque fringilla sagittis et. Pede Phasellus Nam tincidunt laoreet semper cursus nunc.

Lorem ipsum dolor sit amet consectetuer pretium Nam non libero tincidunt. Eget et feugiat consequat quis sagittis sociis Quisque fringilla sagittis et. Pede Phasellus Nam tincidunt laoreet semper cursus nunc.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.

Header Level 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

after assigning id

  1. Paragraph
  2. Bordered
  3. List
  4. Blockquote

Lorem ipsum dolor sit amet consectetuer pretium Nam non libero tincidunt. Eget et feugiat consequat quis sagittis sociis Quisque fringilla sagittis et. Pede Phasellus Nam tincidunt laoreet semper cursus nunc Suspendisse suscipit enim. Metus aliquam a facilisis magna Duis eros a gravida id malesuada. Porta interdum a vitae congue justo sit mattis. Nam tincidunt laoreet semper cursus nunc Suspendisse suscipit enim. Metus aliquam a facilisis magna Duis eros a gravida id malesuada. Porta interdum a vitae congue justo sit mattis

Lorem ipsum dolor sit amet consectetuer pretium Nam non libero tincidunt. Eget et feugiat consequat quis sagittis sociis Quisque fringilla sagittis et. Pede Phasellus Nam tincidunt laoreet semper cursus nunc.

Lorem ipsum dolor sit amet consectetuer pretium Nam non libero tincidunt. Eget et feugiat consequat quis sagittis sociis Quisque fringilla sagittis et. Pede Phasellus Nam tincidunt laoreet semper cursus nunc.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.

Header Level 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

  1. Paragraph
  2. Bordered
  3. List
  4. Blockquote

Lorem ipsum dolor sit amet consectetuer pretium Nam non libero tincidunt. Eget et feugiat consequat quis sagittis sociis Quisque fringilla sagittis et. Pede Phasellus Nam tincidunt laoreet semper cursus nunc Suspendisse suscipit enim. Metus aliquam a facilisis magna Duis eros a gravida id malesuada. Porta interdum a vitae congue justo sit mattis. Nam tincidunt laoreet semper cursus nunc Suspendisse suscipit enim. Metus aliquam a facilisis magna Duis eros a gravida id malesuada. Porta interdum a vitae congue justo sit mattis

Lorem ipsum dolor sit amet consectetuer pretium Nam non libero tincidunt. Eget et feugiat consequat quis sagittis sociis Quisque fringilla sagittis et. Pede Phasellus Nam tincidunt laoreet semper cursus nunc.

Lorem ipsum dolor sit amet consectetuer pretium Nam non libero tincidunt. Eget et feugiat consequat quis sagittis sociis Quisque fringilla sagittis et. Pede Phasellus Nam tincidunt laoreet semper cursus nunc.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.

Header Level 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Basic Wizard default

Lorem ipsum dolor sit amet consectetuer nunc Nam quis fermentum leo. Laoreet nonummy neque Vivamus consequat dictum nulla interdum Nam fermentum et. Ut elit Aenean cursus pede Nunc justo ligula in Suspendisse mauris.

Lorem ipsum dolor sit amet consectetuer nunc Nam quis fermentum leo. Laoreet nonummy neque Vivamus consequat dictum nulla interdum Nam fermentum et. Ut elit Aenean cursus pede Nunc justo ligula in Suspendisse mauris.

Lorem ipsum dolor sit amet consectetuer nunc Nam quis fermentum leo. Laoreet nonummy neque Vivamus consequat dictum nulla interdum Nam fermentum et. Ut elit Aenean cursus pede Nunc justo ligula in Suspendisse mauris.

Lorem ipsum dolor sit amet consectetuer nunc Nam quis fermentum leo. Laoreet nonummy neque Vivamus consequat dictum nulla interdum Nam fermentum et. Ut elit Aenean cursus pede Nunc justo ligula in Suspendisse mauris.

Lorem ipsum dolor sit amet consectetuer nunc Nam quis fermentum leo. Laoreet nonummy neque Vivamus consequat dictum nulla interdum Nam fermentum et. Ut elit Aenean cursus pede Nunc justo ligula in Suspendisse mauris.



Basic Wizard tabs or tabbable

Lorem ipsum dolor sit amet consectetuer nunc Nam quis fermentum leo. Laoreet nonummy neque Vivamus consequat dictum nulla interdum Nam fermentum et. Ut elit Aenean cursus pede Nunc justo ligula in Suspendisse mauris.



Basic Wizard tabs disabled

Lorem ipsum dolor sit amet consectetuer nunc Nam quis fermentum leo. Laoreet nonummy neque Vivamus consequat dictum nulla interdum Nam fermentum et. Ut elit Aenean cursus pede Nunc justo ligula in Suspendisse mauris.



Basic Wizard only tabs and submit

Lorem ipsum dolor sit amet consectetuer nunc Nam quis fermentum leo. Laoreet nonummy neque Vivamus consequat dictum nulla interdum Nam fermentum et. Ut elit Aenean cursus pede Nunc justo ligula in Suspendisse mauris.

Wizard custom button

New Account wizard form

  • Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.

  • Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.

  • Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.

Wizard only button

Registration Create New Account

  • Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.

  • Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.

  • Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.

Wizard full settings

Persona´s name New Account form
Personal Data Default wizard legend
Dates of employment Default wizard legend

  • Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.

Contact info Default wizard legend

  • Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta.

Address Default wizard legend
Overview form Default wizard legend

  • Name mr. Jonathan Somerson

    Marital Status married

    Gender man

    Date Of Birth 08/08/1978

    Age 34

  • Email j.somerson@example.com

    Phone (123) 456-7890

    fax (123) 456-7890

  • Address 795 Folsom Ave, Suite 600

      San Francisco, CA 94107

  • Employer Twitter, Inc.

    Department sales Department

    Job Manager

Wizard navbar indicator

  • Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.

  • Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.

  • Lorem ipsum dolor sit amet consectetuer convallis nisl dolor tellus porta. Curabitur accumsan tempus semper eget Aliquam ante Aliquam Curabitur odio tincidunt.