https://github.com/lakshayd02/multipage-surveyform

A Multi-Step Survey form designed using HTML, CSS and JavaScript. The design pattern promotes a more user-friendly way to capture user data.
https://github.com/lakshayd02/multipage-surveyform

cascading-style-sheets cdn css css3 fonts-awesome html html-css-javascript html5 javascript live-server

Last synced: 10 months ago
JSON representation

A Multi-Step Survey form designed using HTML, CSS and JavaScript. The design pattern promotes a more user-friendly way to capture user data.

• Host: GitHub
• URL: https://github.com/lakshayd02/multipage-surveyform
• Owner: LakshayD02
• Created: 2023-08-23T07:56:02.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2025-01-31T11:02:29.000Z (over 1 year ago)
• Last Synced: 2025-04-15T16:26:37.336Z (about 1 year ago)
• Topics: cascading-style-sheets, cdn, css, css3, fonts-awesome, html, html-css-javascript, html5, javascript, live-server
• Homepage: https://surveyform-lakshay.netlify.app/
• Size: 4.88 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Multipage-SurveyForm

**Description:**

This project demonstrates how to create an interactive, multi-step survey form that guides users through the data collection process smoothly.  Instead of overwhelming users with a long form, it presents questions in digestible steps, making the survey less daunting and more engaging.  The use of animations adds a touch of interactivity, while a submission prompt provides clear feedback upon completion.

**Features:**

* **Multi-Step Interface:**  Presents the survey questions in a step-by-step format, enhancing user experience and reducing cognitive load.  ➡️

* **JavaScript Functionality:**  Drives the form's dynamic behavior and interactivity:

    * **Step Navigation:**  Controls the progression between survey steps, showing and hiding relevant question sets.  ↕️

    * **Progress Indicator:**  Visually displays the user's progress through the survey.  📊

    * **Smooth Animations:**  Engaging animations enhance the user experience during step transitions and form submission.  🎬

    * **Data Storage (Simulated):**  JavaScript stores the collected data (though in a real application, this would be sent to a server).  💾

    * **Submission Prompt:**  Displays a confirmation message or prompt upon successful form submission.  ✔️

**Design Pattern:**

* **Progressive Disclosure:**  Reduces cognitive overload by revealing information or questions in manageable steps.

**Enhancements:**

* **Animations:**  Smooth transitions and interactive elements make the survey more engaging.

* **Post-Submission Prompt:**  Provides clear feedback to the user upon completing the survey.

**Ideal For:**

* Creating user-friendly surveys and questionnaires.  ✍️

* Improving data collection processes.  📊

* Enhancing user engagement with interactive forms.  🙌

**To Run:**

1. Clone the repository.  ⬇️

2. Open the `index.html` file in your web browser.  🌐