Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wrabit/accordion-form
A javascript (jQuery) plugin for building accordion forms
https://github.com/wrabit/accordion-form
bootstrap bootstrap4 form javascript jquery jquery-plugin plugin ui wizard
Last synced: 2 months ago
JSON representation
A javascript (jQuery) plugin for building accordion forms
- Host: GitHub
- URL: https://github.com/wrabit/accordion-form
- Owner: wrabit
- Created: 2018-09-16T13:19:02.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T04:53:13.000Z (about 2 years ago)
- Last Synced: 2024-10-01T18:08:27.103Z (3 months ago)
- Topics: bootstrap, bootstrap4, form, javascript, jquery, jquery-plugin, plugin, ui, wizard
- Language: JavaScript
- Homepage: https://wrabit.github.io/accordion-form/
- Size: 1.25 MB
- Stars: 16
- Watchers: 4
- Forks: 4
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# accordionForm.js
A jQuery plugin that helps you create compact and usable accordion forms.
[Usage](#usage) \
[Event hooks](#event-hooks) \
[External methods](#external-methods) \
[Demo](#demo)
#### Why an accordion?
Accordions help break down long forms to smaller chunks containing relatable questions. Autoscrolling enhances usability by scrolling the next step into view. Animation allows users to visually track where they went and where from.
#### When are accordion forms no good?
Accordion forms tend to be less user friendly when updating existing data, for example when using as a CRUD form. This is because users have to first navigate through steps to find their field, edit and go through all steps to save again. For this reason I included an 'edit' mode which will load the form with all steps expanded.
## Usage
**npm**
npm i accordion-form
**Standard way**
1. Include jQuery:
```html
```
2. Include plugin's code:
```html
```
3. Create markup:
```html
Name & Email
Name:
Email:
Contact
Telephone:
Mobile:
Payment
Credit card:
Expiry:
```
3. Call the plugin:
```javascript
$("#element").accordionForm(options);
```
## Options
**start** (int, default 1) \
The desired starting step
**mode** (string, "accordian" || "edit", default "accordion") \
Edit mode will automatically expand all steps and remove autoButtons, useful as a CRUD form editing existing data.
**enableScrolling** - (bool, default true) \
Upon step navigation, the window will scroll to the new step.
**scrollPadding** - (int, default 5) \
The px value negative offset when a new step scrolls into view. Only when enableScrolling is true.
**autoButtons** - (bool, default true) \
The plugin will automatically add next buttons (apart from the last step where it will add a submit) and previous buttons (apart from the first step). If disabled, you can use the data attributes (```data-acc-btn-next``` and ```data-acc-btn-prev```) to assign your own buttons.
**autoButtonsPrevClass** - (string, default empty) \
Additional classes to add to the previous button.
**autoButtonsNextClass** - (string, default empty) \
Additional classes to add to the next button.
**autoButtonsShowSubmit** - (bool, default true) \
Choose whether the plugins also creates the submit button.
**autoButtonsSubmitText** - (string, default "Submit") \
The text for the auto generated submit button.
**autoButtonsEditSubmitText** - (string, default "Save") \
The text for the auto generated submit button when in 'edit' mode.
**stepNumbers** - (bool, default true) \
If true the plugin will create the step numbers for you. You will need to add the ```data-acc-title``` attribute to each title element.
**stepNumberClass** - (string, default empty) \
Any additional classes for the step number. It will add 'acc-step-number' anyway.
## Event hooks
**beforeNextStep** - ```function(currentStep){}``` \
Triggered when someone clicks 'next' button.
**onSubmit** - ```function(element){}``` \
Triggered upon form submission.
## External methods
**activateNextStep** \
```$('#element').data('plugin_accordion_form').activateNextStep()```
Would you like any more hooks, functions or configuration options? Let me know.
## Demo
[Demo](https://wrabit.github.io/accordion-form)