Как правильно сверстать такую пошаговую форму?
Обычными табами можно
Табами. Можно использовать фреймворк bootstrap и быстро под себя кастомизировать табы. А если быть более точным, то при клике на кнопку определяете какой li сейчас активен, после чего делаете активным следующий li. getbootstrap.com/javascript/#tabs