Multi Step Form

Community feedback

• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Nice! 🙌🏻

  I would also add some transitions for active states (when colors change on hover). It creates more interactivity and makes the project looks cooler. Active states can be done on buttons, links, titles which act like links or anything else, you choose.

  You can read more about it here, in case you haven’t done much of it:
https://www.w3schools.com/css/css3_transitions.asp

  IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

  3
• 

  MaelkMark•150

  @MaelkMarkPosted 3 months ago

  Cool!

  I've solved this challange too (thanks for the like) and I wanted the sidebar to be interactive (just like yours) so the user can jump between steps. But then I realized that then the user can skip some steps (like addons) and if this was a real subscription form, we wouldn't want that because we want the user to pay more. I think you should correct the form so that the user can jump only if he/she has completed the previous steps (clicked next).

  And just one more tip for future projects maybe, if you want to create a sidebar like this, the easiest way is to add input type radios with the same name inside all .step containers with a unique value (<input type="radio" name="step" value="1">), and style like

  .step > input[type="radio"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    appearance: none;
  }
  

  Appearance none will hide the radio button, so nothing will change apparently but if you click on one step, the radio buttons will be checked secretly and the others will be unchecked automatically (because of the identical name). Also you have to give .step a position: relative for the positioning to work properly.

  Then you can get which step is active from js with document.querySelector(.step > input[type="radio"]:checked).value, and it'll return the checked radio button's value.

  Or you can display steps from only css by adding all the step forms inside .step__component and display only that what is active with this rule:

  body:has(.step > input[type="radio"][value="1"]:checked) .step__component form:not(:nth-child(1)),
  body:has(.step > input[type="radio"][value="2"]:checked) .step__component form:not(:nth-child(2)),
  body:has(.step > input[type="radio"][value="3"]:checked) .step__component form:not(:nth-child(3)),
  body:has(.step > input[type="radio"][value="4"]:checked) .step__component form:not(:nth-child(4)) {
    display: none;
  }
  

  This will work like this: 'If the radio button in .step with the value of 1 is checked then hide all forms inside .step__component which is not the first inside .step__component'.

  1