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
? Personal Links
