W jaki sposób stworzyć krokowy formularz?

Chciałbym stworzyć formularz skladajacy sie z powiedzmy 3 krokow. Po ukończeniu formularza zebrane dane są wysyłane na adres mailowy. Mam w związku z tym kilka pytań:

1. W jaki sposób powinny być generowane kolejne "strony" formularza (strona sie nie przeładowuje oczywiście)? Czy powinno być to generowane dynamicznie, czy może wszystkie kroki przy załadowaniu strony już gotowe w html'u i tylko "podmieniamy"?

2. Jaki jest prawidłowy sposób gromadzenia danych z takiego formularza? Czy zbieram to w jakimś obiekcie, czy np. w ciachu, czy jeszcze inaczej?

3. Czy jeżeli dane są zbierane z "divów" np. są 4 i po kliknięciu w któryś to powinienem to jakoś połączyć z inputami, czy mogę zrobić np. data-option=1 itd. i z tego zbierać dane później?

dane trzymasz w sesji

Tylko przemyśl tą sesję, żeby user nie otworzył Ci dwóch kart przeglądarki i np. żeby nie było tak, że od pozycji w kroku 1 zależy dostępność opcji w kroku 2 i w kroku 2 sobie to walidujesz, a w kroku 3 już nie.
Bo user otworzy sobie 2x krok 1, wybierze jakieś opcje, uzupełni następnie krok 2 zależny od kroku 1, z drugiej karty uzupełni krok 1 ponownie, krok 2 pominie, więc będziesz miał złe dane, a w kroku 3 uzupełni resztę.

Ja robię tak, że zapisuję sobie w sesji oprócz danych z poszczególnych kroków - informację o tym na jakim kroku jestem. Jeżeli user mi wypełnił krok 1 i krok 2 to jest na kroku 3. Jeżeli miał otwarte dwie karty z krokiem 1, to system nie przyjmie mu żadnych danych do zapisania z kroku 1 - zrobi przekierowanie na bieżący krok.

Inne w miarę proste rozwiązanie to przyjmowanie wszystkich danych na raz, podzielenie formularza na kroki przez javascript i pokazywanie etapami.

A czy wrzucanie tego do jakiegos obiektu js, a pozniej przeslanie go ajaxem do skryptu php zrobienie json_decode i wyslanie mailem wchodzi w gre, czy jest to niepoprawne?

To zależy. Działać będzie, ale ja strony tworzę tak, że DZIAŁAŁY, a potem im dodaję bajerów. Czyli najpierw tworzę formularz, on działa, a potem dokładam do niego ew. usprawnienia javascriptem. Progressive enhancement to się nazywa.

A Ty zrób tak, jak założyłeś w projekcie.