- var theme_customizer = true; - var tooltip = true; - var jquery_ui = true; - var form_builder_2 = true; doctype html html(lang='en') include ../../components/header-files body include ../../components/loader // page-wrapper Start #pageWrapper.page-wrapper include ../../components/header // Page Body Start .page-body-wrapper.horizontal-menu include ../../components/sidebar .page-body .container-fluid .page-header .row .col-sm-6 h3 | Form Builder 2 ol.breadcrumb li.breadcrumb-item a(href='index.html') | Home li.breadcrumb-item Form Builder li.breadcrumb-item.active Form Builder 2 .col-sm-6 include ../../components/bookmark // Container-fluid starts .form-builder .container-fluid .row .col-sm-12 .card .card-header h5 Form Builder .card-body.form-builder .form-builder-column .row .col-sm-12 .form-builder-2-header div ul#pills-tab.nav.nav-primary(role='tablist') li.nav-item a#pills-input-tab.nav-link.active(data-bs-toggle='pill', href='#pills-input', role='tab', aria-controls='pills-input', aria-selected='true') Input li.nav-item a#pills-radcheck-tab.nav-link(data-bs-toggle='pill', href='#pills-radcheck', role='tab', aria-controls='pills-radcheck', aria-selected='false') Radio/Checkbox li.nav-item a#pills-select-tab.nav-link(data-bs-toggle='pill', href='#pills-select', role='tab', aria-controls='pills-select', aria-selected='false') Select li.nav-item a#pills-button-tab.nav-link(data-bs-toggle='pill', href='#pills-button', role='tab', aria-controls='pills-button', aria-selected='false') Buttons div nav.navbar.navbar-expand-md.p-0 form.form-inline .me-2 select#n-columns.btn.form-control.b-light option(value='1') 1 Column option(value='2') 2 Columns button#copy-to-clipboard.btn.btn-primary.copy-btn(type='submit', data-clipboard-text='testing') Copy HTML .col-lg-6.col-xl-6 #pills-tabContent.tab-content #pills-input.tab-pane.fade.show.active(role='tabpanel', aria-labelledby='pills-input-tab') form.theme-form .mb-3.draggable label(for='input-text-1') Text Input input#input-text-1.form-control.btn-square(type='email', placeholder='Enter email') p.help-block Example block-level help text here. hr .mb-3.draggable label(for='input-password-1') Password input#input-password-1.form-control.btn-square(type='password', placeholder='Password') p.help-block Example block-level help text here. hr .mb-3.draggable label(for='select-1') Select select#select-1.form-control.btn-square option(value='Option 1') Option 1 option(value='Option 2') Option 2 option(value='Option 3') Option 3 p.help-block Example block-level help text here. hr .mb-3.draggable label(for='input-file-1') File input input#input-file-1(type='file') p.help-block Example block-level help text here. hr .mb-3.draggable label(for='prependedcheckbox') Appended Checkbox .input-group span.input-group-text input(type='checkbox').me-0 input#prependedcheckbox.form-control.btn-square(name='prependedcheckbox', type='text', placeholder='Placeholder') p.help-block Example block-level help text here. hr .mb-3.draggable label(for='prependedcheckbox') Button DropDown .input-group input#buttondropdown.form-control.btn-square(name='buttondropdown', placeholder='Placeholder', type='text') .input-group-btn.btn.btn-square.p-0 button.btn.btn-primary.dropdown-toggle.btn-square(type='button', data-bs-toggle='dropdown') | Action span.caret ul.dropdown-menu.pull-right li a.dropdown-item(href='#') Option one li a.dropdown-item(href='#') Option two li a.dropdown-item(href='#') Option three p.help-block Example block-level help text here. #pills-radcheck.tab-pane.fade(role='tabpanel', aria-labelledby='pills-radcheck-tab') form.theme-form .mb-3.draggable label Inline checkbox .col .m-checkbox-inline .checkbox input#checkbox1(type='checkbox') label(for='checkbox1') Default 1 .checkbox input#checkbox2(type='checkbox') label(for='checkbox2') Default 2 .checkbox input#checkbox3(type='checkbox') label(for='checkbox3') Default 3 p.help-block.m-t-help-block Example block-level help text here. hr .mb-3.draggable label Inline Radiobox .col .m-checkbox-inline .radio.radio-theme input#radioinline1(type='radio', name='radio1', value='option1') label(for='radioinline1') Option 1 .radio.radio-theme input#radioinline2(type='radio', name='radio1', value='option2') label(for='radioinline2') Option 2 .radio.radio-theme input#radioinline3(type='radio', name='radio1', value='option3') label(for='radioinline3') Option 3 p.help-block.m-t-help-block Example block-level help text here. hr .mb-3.draggable label Custom checkbox .col .checkbox input#checkbox-def(type='checkbox') label(for='checkbox-def') Default .checkbox input#checkbox-dis(type='checkbox', disabled='') label(for='checkbox-dis') Disabled .checkbox input#checkbox-chk(type='checkbox', checked='') label(for='checkbox-chk') Checked p.help-block Example block-level help text here. #pills-select.tab-pane.fade(role='tabpanel', aria-labelledby='pills-select-tab') form.theme-form .mb-3.draggable label(for='formcontrol-select1') Example select select#formcontrol-select1.form-control.btn-square option 1 option 2 option 3 option 4 option 5 p.help-block Example block-level help text here. hr .mb-3.draggable label(for='formcontrol-select2') Example multiple select select#formcontrol-select2.form-control.btn-square(multiple='') option 1 option 2 option 3 option 4 option 5 p.help-block Example block-level help text here. #pills-button.tab-pane.fade(role='tabpanel', aria-labelledby='pills-button-tab') form.theme-form .mb-3.draggable label.m-r-10 Single Button br button.btn.btn-primary.active(type='button', data-original-title='btn btn-dark active', title='') Button p.help-block Example block-level help text here. hr .mb-3.draggable label.m-r-10 Double Button br button.btn.btn-primary(type='button', data-original-title='btn btn-primary-gradien', title='') Primary button.btn.btn-secondary(type='button', data-original-title='btn btn-primary-gradien', title='') Secondary p.help-block Example block-level help text here. .col-lg-6.col-xl-6.lg-mt // Form builder column wise start .drag-bx.card-body .text-muted.empty-form.text-center h6 Drag & Drop elements to build form. .form-body.row.form-builder-2 .col-md-12.droppable.sortable .col-md-6.droppable.sortable(style='display: none;') .col-md-6.droppable.sortable(style='display: none;') // Container-fluid Ends include ../../components/footer include ../../components/footer-files