Logo
Stockholm-icons / Media / Equalizer Created with Sketch.

Quick Actions

23 new tasks
Stockholm-icons / Shopping / Sale2 Created with Sketch. Accounting eCommerce
Stockholm-icons / Home / Globe Created with Sketch. Management Company Reports
Stockholm-icons / Shopping / Box2 Created with Sketch. Projects Completed Tasks
Stockholm-icons / Communication / Group Created with Sketch. Members Latest joinings
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.
Stockholm-icons / General / User Created with Sketch.
Create New
Logo
My Account Profile & Account Orders My Order List Deposits Account & Reports Transfers Transactions History Statements Dashboard & Reports
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
Create a repeatable group of input elements.
For more info please visit the plugin's Github Repo.

Form Repeater Example 


                            <div class="card card-custom">
                                <div class="card-header">
                                    <div class="row">
                                        <h3 class="card-title">
                                            Form Repeater Example
                                        </h3>
                                    </div>
                                </div>
                                <!--begin::Form-->
                                <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-4">
                                                <input type="email" class="form-control" placeholder="Enter full name"/>
                                                <span class="form-text text-muted">Please enter your full name</span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-2 col-form-label text-right">Email address:</label>
                                            <div class="col-lg-4">
                                                <input type="email" class="form-control" placeholder="Enter email"/>
                                                <span class="form-text text-muted">We'll never share your email with anyone else</span>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label class="col-lg-2 col-form-label text-right">Contact</label>
                                            <div class="col-lg-4">
                                                <div class="input-group">
                                                    <div class="input-group-prepend"><span class="input-group-text"><i class="la la-chain"></i></span></div>
                                                    <input type="text" class="form-control" placeholder="Phone number"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row align-items-center">
                                            <label class="col-lg-2 col-form-label text-right">Communication:</label>
                                            <div class="col-xl-8 col-lg-8 col-sm-12 col-md-12 d-flex align-items-center">
                                                <div class="checkbox-inline">
                                                    <label class="checkbox">
                                                        <input type="checkbox"/> Email
                                                        <span></span>
                                                    </label>
                                                    <label class="checkbox">
                                                        <input type="checkbox"/> SMS
                                                        <span></span>
                                                    </label>
                                                    <label class="checkbox">
                                                        <input type="checkbox"/> Phone
                                                        <span></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

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

                                        <div id="kt_repeater_1">
                                            <div class="form-group row" id="kt_repeater_1">
                                                <label class="col-lg-2 col-form-label text-right">Contacts:</label>
                                                <div data-repeater-list="" class="col-lg-10">
                                                    <div data-repeater-item class="form-group row align-items-center">
                                                        <div class="col-md-3">
                                                            <label>Name:</label>
                                                            <input type="email" class="form-control" placeholder="Enter full name"/>
                                                            <div class="d-md-none mb-2"></div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label>Number:</label>
                                                            <input type="email" class="form-control" placeholder="Enter contact number"/>
                                                            <div class="d-md-none mb-2"></div>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <div class="radio-inline">
                                                                <label class="checkbox checkbox-success">
                                                                    <input type="checkbox"/> Primary
                                                                    <span></span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <a href="javascript:;" data-repeater-delete="" class="btn btn-sm font-weight-bolder btn-light-danger">
                                                                <i class="la la-trash-o"></i>Delete
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label class="col-lg-2 col-form-label text-right"></label>
                                                <div class="col-lg-4">
                                                    <a href="javascript:;" data-repeater-create="" class="btn btn-sm font-weight-bolder btn-light-primary">
                                                        <i class="la la-plus"></i>Add
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <div class="row">
                                            <div class="col-lg-2"></div>
                                            <div class="col-lg-2">
                                                <button type="reset" class="btn font-weight-bold btn-success mr-2">Submit</button>
                                                <button type="reset" class="btn font-weight-bold btn-secondary">Cancel</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <!--end::Form-->
                            </div>
                        

                        // Class definition
                        var KTFormRepeater = function() {

                            // Private functions
                            var demo1 = function() {
                                $('#kt_repeater_1').repeater({
                                    initEmpty: false,

                                    defaultValues: {
                                        'text-input': 'foo'
                                    },

                                    show: function () {
                                        $(this).slideDown();
                                    },

                                    hide: function (deleteElement) {
                                        $(this).slideUp(deleteElement);
                                    }
                                });
                            }

                            return {
                                // public functions
                                init: function() {
                                    demo1();
                                }
                            };
                        }();

                        jQuery(document).ready(function() {
                            KTFormRepeater.init();
                        });
Please enter your full name
We'll never share your email with anyone else
Delete
Add

Form Repeater Example

Please enter your full name
We'll never share your email with anyone else
Add 

                                    <div class="card card-custom">
                                        <div class="card-header">
                                            <div class="row">
                                                <h3 class="card-title">
                                                    Form Repeater Example
                                                </h3>
                                            </div>
                                        </div>
                                        <!--begin::Form-->
                                        <form class="form">
                                            <div class="card-body">
                                                <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label text-right">Full Name:</label>
                                                    <div class="col-lg-6">
                                                        <input type="email" class="form-control" placeholder="Enter full name"/>
                                                        <span class="form-text text-muted">Please enter your full name</span>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label text-right">Email address:</label>
                                                    <div class="col-lg-6">
                                                        <input type="email" class="form-control" placeholder="Enter email"/>
                                                        <span class="form-text text-muted">We'll never share your email with anyone else</span>
                                                    </div>
                                                </div>
                                                <div class="form-group row align-items-center">
                                                    <label class="col-lg-3 col-form-label text-right">Communication:</label>
                                                    <div class="col-lg-12 col-xl-8">
                                                        <div class="checkbox-inline">
                                                            <label class="checkbox">
                                                                <input type="checkbox"/> Email
                                                                <span></span>
                                                            </label>
                                                            <label class="checkbox">
                                                                <input type="checkbox"/> SMS
                                                                <span></span>
                                                            </label>
                                                            <label class="checkbox">
                                                                <input type="checkbox"/> Phone
                                                                <span></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-form-label text-right col-lg-3 col-sm-12">Credit Card</label>
                                                    <div class="col-lg-6 ">
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" name="creditcard" placeholder="Enter card number"/>
                                                            <div class="input-group-append">
                                                                <span class="input-group-text"><i class="la la-credit-card"></i></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="kt_repeater_2">
                                                    <div class="form-group row">
                                                        <label class="col-lg-3 col-form-label text-right">Contact:</label>
                                                        <div data-repeater-list="" class="col-lg-6">
                                                            <div data-repeater-item class="mb-2">
                                                                <div class="input-group">
                                                                    <div class="input-group-prepend">
                                                                        <span class="input-group-text">
                                                                            <i class="la la-phone"></i>
                                                                        </span>
                                                                    </div>
                                                                    <input type="text" class="form-control" placeholder="Enter telephone"/>
                                                                    <div class="input-group-append">
                                                                        <a href="javascript:;" class="btn font-weight-bold btn-danger btn-icon">
                                                                            <i class="la la-close"></i>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <div class="col-lg-3"></div>
                                                        <div class="col">
                                                            <div data-repeater-create="" class="btn font-weight-bold btn-warning">
                                                                <i class="la la-plus"></i>
                                                                Add
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="card-footer">
                                                <div class="row">
                                                    <div class="col-lg-3"></div>
                                                    <div class="col-lg-6">
                                                        <button type="reset" class="btn font-weight-bold btn-primary mr-2">Submit</button>
                                                        <button type="reset" class="btn font-weight-bold btn-secondary">Cancel</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        <!--end::Form-->
                                    </div>
                                

                                // Class definition
                                var KTFormRepeater = function() {

                                    // Private functions
                                    var demo2 = function() {
                                        $('#kt_repeater_2').repeater({
                                            initEmpty: false,

                                            defaultValues: {
                                                'text-input': 'foo'
                                            },

                                            show: function() {
                                                $(this).slideDown();
                                            },

                                            hide: function(deleteElement) {
                                                if(confirm('Are you sure you want to delete this element?')) {
                                                    $(this).slideUp(deleteElement);
                                                }
                                            }
                                        });
                                    }
                                    return {
                                        // public functions
                                        init: function() {
                                            demo2();
                                        }
                                    };
                                }();

                                jQuery(document).ready(function() {
                                    KTFormRepeater.init();
                                });

Form Repeater Example

Please enter your full name
We'll never share your email with anyone else
Add 

                                    <div class="card card-custom">
                                        <div class="card-header">
                                            <div class="row">
                                                <h3 class="card-title">
                                                    Form Repeater Example
                                                </h3>
                                            </div>
                                        </div>
                                        <!--begin::Form-->
                                        <form class="form">
                                            <div class="card-body">
                                                <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label text-right">Full Name:</label>
                                                    <div class="col-lg-6">
                                                        <input type="email" class="form-control" placeholder="Enter full name"/>
                                                        <span class="form-text text-muted">Please enter your full name</span>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-lg-3 col-form-label text-right">Email address:</label>
                                                    <div class="col-lg-6">
                                                        <input type="email" class="form-control" placeholder="Enter email"/>
                                                        <span class="form-text text-muted">We'll never share your email with anyone else</span>
                                                    </div>
                                                </div>
                                                <div class="form-group row align-items-center">
                                                    <label class="col-lg-3 col-form-label text-right">Communication:</label>
                                                    <div class="col-lg-12 col-xl-8">
                                                        <div class="checkbox-inline">
                                                            <label class="checkbox">
                                                                <input type="checkbox"/> Email
                                                                <span></span>
                                                            </label>
                                                            <label class="checkbox">
                                                                <input type="checkbox"/> SMS
                                                                <span></span>
                                                            </label>
                                                            <label class="checkbox">
                                                                <input type="checkbox"/> Phone
                                                                <span></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group row">
                                                    <label class="col-form-label text-right col-lg-3 col-sm-12">Credit Card</label>
                                                    <div class="col-lg-6 ">
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" name="creditcard" placeholder="Enter card number"/>
                                                            <div class="input-group-append"><span class="input-group-text"><i class="la la-credit-card"></i></span></div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="kt_repeater_3">
                                                    <div class="form-group row">
                                                        <label class="col-lg-3 col-form-label text-right">Contact:</label>
                                                        <div data-repeater-list="" class="col-lg-9">
                                                            <div data-repeater-item class="form-group row">
                                                                <div class="col-lg-5">
                                                                    <div class="input-group">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text">
                                                                                <i class="la la-phone"></i>
                                                                            </span>
                                                                        </div>
                                                                        <input type="text" class="form-control" placeholder="Phone"/>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-5">
                                                                    <div class="input-group">
                                                                        <div class="input-group-prepend">
                                                                            <span class="input-group-text">
                                                                                <i class="la la-envelope"></i>
                                                                            </span>
                                                                        </div>
                                                                        <input type="text" class="form-control" placeholder="Email"/>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-2">
                                                                    <a href="javascript:;" data-repeater-delete="" class="btn font-weight-bold btn-danger btn-icon">
                                                                        <i class="la la-remove"></i>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group row">
                                                        <div class="col-lg-3"></div>
                                                        <div class="col">
                                                            <div data-repeater-create="" class="btn font-weight-bold btn-primary">
                                                                <i class="la la-plus"></i>
                                                                Add
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card-footer">
                                                <div class="row">
                                                    <div class="col-lg-3"></div>
                                                    <div class="col-lg-6">
                                                        <button type="reset" class="btn font-weight-bold btn-primary btn-shadow mr-2">Submit</button>
                                                        <button type="reset" class="btn font-weight-bold btn-secondary btn-shadow">Cancel</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        <!--end::Form-->
                                    </div>
                                

                                // Class definition
                                var KTFormRepeater = function() {

                                    // Private functions
                                    var demo3 = function() {
                                        $('#kt_repeater_3').repeater({
                                            initEmpty: false,

                                            defaultValues: {
                                                'text-input': 'foo'
                                            },

                                            show: function() {
                                                $(this).slideDown();
                                            },

                                            hide: function(deleteElement) {
                                                if(confirm('Are you sure you want to delete this element?')) {
                                                    $(this).slideUp(deleteElement);
                                                }
                                            }
                                        });
                                    }

                                    return {
                                        // public functions
                                        init: function() {
                                            demo3();
                                        }
                                    };
                                }();

                                jQuery(document).ready(function() {
                                    KTFormRepeater.init();
                                });
2024© Keenthemes
About Team Contact

User Profile 15 messages

Ryan Smith
Art Director
Stockholm-icons / Communication / Mail-notification Created with Sketch. ryan@keen.com
Stockholm-icons / Communication / Adress-book2 Created with Sketch.
My Account
Profile info update
Stockholm-icons / General / Settings-1 Created with Sketch.
My Tasks
Todo and tasks
Stockholm-icons / General / Half-star Created with Sketch.
My Events
Logs and notifications
Stockholm-icons / Communication / Mail-opened Created with Sketch.
My Statements
latest tasks and projects
Sign Out
Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Notifications
Pic
Marcus Smart UI/UX, Art Director
+65% Stockholm-icons / Navigation / Angle-right Created with Sketch.
AH
Andreas Hawks Python Developer
+23% Stockholm-icons / Navigation / Angle-right Created with Sketch.
SC
Sarah Connor HTML, CSS. jQuery
-34% Stockholm-icons / Navigation / Angle-right Created with Sketch.
Pic
Amanda Harden UI/UX, Art Director
+72% Stockholm-icons / Navigation / Angle-right Created with Sketch.
SR
Sean Robbins UI/UX, Art Director
+65% Stockholm-icons / Navigation / Angle-right Created with Sketch.
JT
Jason Tatum ASP.NET Developer
+139% Stockholm-icons / Navigation / Angle-right Created with Sketch.

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
HTML RTL
Demo 2
HTML RTL
Demo 3
HTML RTL
Demo 4
HTML RTL
Demo 5
HTML RTL
Demo 6
HTML RTL
Demo 7
HTML RTL
Demo 8
Coming soon
Demo 9
Coming soon
Buy Keen Now!