Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/homescriptone/svelte-advanced-multistep-form
Create multistep form in few clicks for your Svelte/Routify/Sapper application.
https://github.com/homescriptone/svelte-advanced-multistep-form
multistep-form routify sapperjs svelte svelte-form svelte3
Last synced: about 1 month ago
JSON representation
Create multistep form in few clicks for your Svelte/Routify/Sapper application.
- Host: GitHub
- URL: https://github.com/homescriptone/svelte-advanced-multistep-form
- Owner: homescriptone
- License: mit
- Fork: true (edenriquez/svelte-multistep-form)
- Created: 2021-10-24T01:08:34.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2021-10-27T08:17:17.000Z (about 3 years ago)
- Last Synced: 2024-04-23T20:15:59.260Z (7 months ago)
- Topics: multistep-form, routify, sapperjs, svelte, svelte-form, svelte3
- Language: Svelte
- Homepage: https://www.npmjs.com/package/svelte-advanced-multistep-form
- Size: 4.95 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# svelte advanced multistep form [](https://npmjs.org/package/svelte-advanced-multistep-form)
Multi Step Form help to wrap form elements passing down styles to the component to be rendered, also it presents each form step in a ordered and stylish way.
### Demo
## Install
```
npm install svelte-advanced-multistep-form
```
then import into your code
```javascript
import { Form, Step } from "svelte-advanced-multistep-form";
```
## Usage
First you need to set up the form `stepsDescription`, `formSubtitle`, `formTitle`, `formMethodType`, `prevMessageText` and `nextMessageText` inside `multiStepOptions` that later has to be injected into Form component ``
```javascript
let multiStepOptions = {
formTitle : 'Hello world',
formSubtitle : 'Welcome to our world',
formMethodType : 'POST',
prevMessageText : 'Previous',
nextMessageText : 'Next',
formActionURL:'/',
formID : 's-multistep-form',
displayIndex : true,
svgCircleColor : "#48DB71",
selectCircleColor : "red",
selectboxShadowCircleColor : "#48DB71",
unselectboxShadowCircleColor : "#48DB71",
indexblanckColor : 'black',
indexColor : 'black',
stepsDescription: [{
title: "STEP 1",
subtitle: "All the details to perform on this step",
icon : "fa fa-info-circle"
},
{
title: "STEP 2",
subtitle: "All the details to perform on this step",
icon : "fa fa-info-circle"
}
]
}
```
After that you only need to call `Form` and `Step` component in the following way
For `Step`you can use Font-Awesome icons.
```html
// Here should be your form
```
You can customize the form using CSS as you want it. :)
## Submit form data
```html
import axios from "axios";
import { Form, Step } from "svelte-advanced-multistep-form";
llet multiStepOptions = {
formTitle : 'Hello world',
formSubtitle : 'Welcome to our world',
formMethodType : 'POST',
prevMessageText : '<button>Previous<button>',
nextMessageText : '<button>Next</button>',
formActionURL:'/',
formID : 's-multistep-form',
displayIndex : true,
svgCircleColor : "#48DB71",
selectCircleColor : "red",
selectboxShadowCircleColor : "#48DB71",
unselectboxShadowCircleColor : "#48DB71",
indexblanckColor : 'black',
indexColor : 'black',
stepsDescription: [{
title: "STEP 1",
subtitle: "All the details to perform on this step",
icon : "fa fa-info-circle"
},
{
title: "STEP 2",
subtitle: "All the details to perform on this step",
icon : "fa fa-info-circle"
}
]
};
let myInputValue;
const handleSubmit = () => {
const formValues = {
firstStepInput: myInputValue,
};
axios.post('http://my-internal-api/submit', formValues)
myInputValue = ''
}
Save me
```
## Examples
checkout `/examples` folder, run the following commands in order to run examples:
```bash
cd examples
npm i
npm run dev
```
Go to http://localhost:5000 to see it in action 🔥