Giter VIP home page Giter VIP logo

chobe / multi-step-form Goto Github PK

View Code? Open in Web Editor NEW

This project forked from isaiaphiliph/multi-step-form

0.0 0.0 0.0 31 KB

Responsive multi-step form, I took it from "https://codingnepalweb.com/multi-step-form-html-css-javascript/" and modified it so it can be responsive and adapt to any number of steps desired

Home Page: multi-step-form-theta.vercel.app

JavaScript 19.75% CSS 33.70% HTML 46.55%

multi-step-form's Introduction

Multi-step form

Responsive multi-step form, I took it from https://codingnepalweb.com/multi-step-form-html-css-javascript/ and modified it so it can be responsive and adapt to any number of steps desired.

Showcase image 1

How to use

The project comes by default with 6 steps / 6 form pages, to add/remove steps you just have to modify the HTML, to add or remove steps in the progress bar, add or remove elements with class name "step". To add or remove form pages, add or remove elements with class name "page", the fist one must have the "slide-page" class. You must keep the same structure when adding or removing steps/pages.

If number of steps is not equal to number of pages, there will be a warning on the console so you can know.

Validation

When user clicks next button, a simple validation is made, this is simple HTML validation getting triggered, if input does not validate, it will add the "invalid-input" class, witch you can customize in the CSS. This validation only aplies to "input" fields, you may want to make your custom validation here, as well as when submiting the form to make it more reliable. I will try to make and update soon about this. Feel free to make a pull request if you want to code it yourself.

multi-step-form's People

Contributors

isaiaphiliph avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.