Vue MultiStep Form
Multistep form created with Vue 3 and Vite.
The purpose of this form is to use it as a ready made multistep form which can be included in any website as needed, like using in wordpress or simple html page.
Documentation
To use the form component i.e wordpress,html file include div with id of app as below <div id="app"> </div> and include the QuestionSlider component inside, its the multistep slider, add as below <QuestionSlider> <template #slideItems> </template> </QuestionSlider> After that step, now is a time to add slides and for that I have used li tag and inside it you can use form input fields like [input[text],input[radio],input[checkbox],select] as below <QuestionSlider> <template #slideItems> <li class="flex gap-4 flex-col"> <input type="text" name="email" class="border border-black/30 rounded-md w-full px-4 py-2" required="required" errorMsg="Please fill the email field" /> </li> <li class="flex gap-4 flex-col"> <input type="text" name="Firstname" class="border border-black/30 rounded-md w-full px-4 py-2" required="required" errorMsg="Please fill the email field" /> </li> </template> </QuestionSlider> You can customize error message via changing errorMsg attribute in input field
Run Locally
Clone the project
git clone https://github.com/anasak-dev/multistep-form-vue
Go to the project directory
cd multistep-form-vue
Install dependencies
npm install
Start the server
npm run dev
Tech Stack
Client: Vue 3, Vite, TailwindCSS
Roadmap
- Refactoring code into small components
- Additional skins for forms
- Fetching data from api/submitting to
- & more