Prawie nikt nie czyta regulaminów, tych na stronach internetowych również, albo głównie na nich. Wynika to z faktu, że w momencie kiedy zachodzi potrzeba jego przeczytania jesteśmy w trakcie innych działań na tej stronie, albo z naszego lenistwa i niechęci. O ile na drugą kwestię nie mamy wpływu, to możemy delikatnie ułatwić dostęp do treści w trakcie np. rejestracji w sklepie internetowym.
ABC formularza.
Będziemy potrzebować formularz zawierający kilka pól, w tej chwili niemających znaczenia. Oprócz jednego - ptaszka do akceptacji regulaminu. To pole nie będzie dostępne w pierwszym kroku, a standardowo by się tam znalazło. Formularz rozbudujemy o kilka dodatkowych pól, które umożliwią sterowanie krokami, albo będą elementami związanymi z drugim krokiem. Kiedy użytkownik wypełni podstawowe pola pojawi się przycisk "Dalej". W tym momencie nie nastąpi przeładowanie formularza, ale "wyskoczy" popup z treścią regulaminu oraz z przyciskiem do akceptacji. Nie będzie możliwe zamknięcie popupu inaczej niż poprzez akceptację, no, chyba, że wyjdziemy, albo przeładujemy stronę. Kiedy zaakceptujemy formularz, popup zniknie, pojawi się pole dotyczące zaakceptowanego regulaminu, zniknie przycisk "Dalej", a pojawi się przycisk zatwierdzania formularza.
Dwa w jednym.
Jak wspomniałem przejście między obydwoma krokami odbędzie się bez przeładowania, tak więc całą strukturę HTML musimy mieć w obrębie jednego bloku/kodu.
<form>
<!-- nasze podstawowe pola -->
<label><input type="text" placeholder="Imię" required/></label>
<label><input type="text" placeholder="Ulubiona zupa" required/></label>
<label><input type="text" placeholder="Stolica Polski" required/></label>
<input type="checkbox" id="newsletter" />
<label for="newsletter">Chcę otrzymywać newsletter</label>
<!-- checkbox, który otworzy popup,
to jest pierwsze dodatkowe pole
-->
<input type="checkbox" id="next" />
<!-- checkbox dotyczący regulaminu
powiązany z <label> w środku
popup z treścią, standardowo
wraz z przypisaną etykietką
znalazłby się przy podstawowych
polach
-->
<input type="checkbox" id="regulations" />
<!-- obydwa powyższe checkboxy,
musimy umieścić tu, bowiem będą
sterować widocznością elementów
za nimi (w strukturze HTML), będzie
więc można skorzystać z selektorów
~ lub +
-->
<!-- a tu udawana etykietka dla tego pola,
standardowo niepotrzebna
-->
<span class="regulations-label">Akceptuję regulamin</span>
<!-- nasz popup, którego standardowo
by nie było w formularzu -->
<div id="regulations-window">
<div class="content">
<p>Treść regulaminu.</p>
</div>
<div class="bottom">
<!-- etykietka dla checkbox id=regulations
w środku popup, czyli drugi checkbox hack,
standardowo poza popup
-->
<label for="regulations">Akceptuję regulamin</label>
</div>
</div>
<!-- etykietka dla checkbox id=next,
czyli pierwszy checkbox hack,
normalnie by jej nie było
-->
<label for="next">Dalej</label>
<!-- przycisk zatwierdzania,
widoczny dopiero po akceptacji
-->
<input type="submit" value="Rejestruj się" />
</form>
Jeśli chodzi o CSS, to dla uproszczenia przedstawiam tylko fragment dotyczący sterowania krokami, bez styli "upiększających". Te możesz odnaleźć w źródle przykładu.
/* jeśli id=next nie jest kliknięty,
czyli nie jesteśmy w drugim kroku,
lub id=regulations zaznaczony,
czyli zaakceptowaliśmy formularz,
to popup znika
*/
#next:not(:checked)~#regulations-window,
#regulations:checked~#regulations-window,
/* jeśli id=regulations zaznaczony,
czyli zaakceptowaliśmy formularz,
to etykieta dla drugiego kroku
znika
*/
#regulations:checked~label[for="next"],
/* jeśli id=next zaznaczony,
lub pola formularza nie są wypełnione,
to znika etykietka "next",
czyli możliwość przejścia
do drugiego kroku
*/
#next:checked~label[for="next"],
form:invalid label[for="next"],
/* jeśli nie zaakceptowaliśmy regulaminu,
to nie jest widoczna udawana etykietka
oraz przycisk zatwierdzania formularza
*/
#regulations:not(:checked)+span.regulations-label,
#regulations:not(:checked)~input[type="submit"] {
display: none;
}
"Serce" mechanizmu stanowią właściwe dwa checkboxy o id: next oraz regulations. Ten pierwszy powoduje przejście do kroku drugiego - pojawienie się popup, drugi zniknięcie popup i możliwość zatwierdzenia formularza. Całość jest właściwie opisana w komentarzach... Formularz ma drobną "wadę" - mianowicie po wypełnieniu podstawowych pól, a przed akceptacją regulaminu możemy go zatwierdzić enterem, ale z drugiej strony pole akceptacji nie jest w tym kroku widoczne, więc nie mamy go jak walidować. Należy pamiętać o kontroli przekazanych danych po stronie serwerowej.
A pod tym linkiem już działający formularz z popup oparty o checkbox hack.
Pamiętaj - kupuj rozważnie! Do przeczytania.