Zakres projektu

W tym poradniku stworzymy formularz wieloetapowy, który poprowadzi użytkownika przez kilka kroków, zbierając dane i upewniając się, że wszystko jest poprawnie wypełnione. Każdy krok będzie stanowił osobny etap, a użytkownik będzie mógł przechodzić pomiędzy nimi przy pomocy przycisków "Dalej" oraz "Wstecz".

Lista plików

  1. index.html - plik z kodem HTML.
  2. style.css - plik ze stylami CSS.
  3. script.js - plik z logiką jQuery.

Pełna zawartość każdego pliku

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Formularz Wieloetapowy</title>
</head>
<body>
    <div class="container">
        <form id="multiStepForm">
            <div class="step step-1 active">
                <h2>Krok 1: Podstawowe informacje</h2>
                <label for="name">Imię:</label>
                <input type="text" id="name" name="name" required>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                <button type="button" class="next">Dalej</button>
            </div>
            <div class="step step-2">
                <h2>Krok 2: Adres</h2>
                <label for="address">Adres:</label>
                <input type="text" id="address" name="address" required>
                <label for="city">Miasto:</label>
                <input type="text" id="city" name="city" required>
                <button type="button" class="prev">Wstecz</button>
                <button type="button" class="next">Dalej</button>
            </div>
            <div class="step step-3">
                <h2>Krok 3: Podsumowanie</h2>
                <p>Imię: <span id="summaryName"></span></p>
                <p>Email: <span id="summaryEmail"></span></p>
                <p>Adres: <span id="summaryAddress"></span></p>
                <p>Miasto: <span id="summaryCity"></span></p>
                <button type="button" class="prev">Wstecz</button>
                <button type="submit">Zatwierdź</button>
            </div>
        </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

style.css

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    width: 50%;
    margin: 50px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.step {
    display: none;
}

.step.active {
    display: block;
}

button {
    margin-top: 15px;
    padding: 10px 20px;
    border: none;
    background-color: #007bff;
    color: #ffffff;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}

script.js

$(document).ready(function() {
    var currentStep = 0;
    var steps = $('.step');

    function showStep(stepIndex) {
        steps.removeClass('active');
        $(steps[stepIndex]).addClass('active');
    }

    $('.next').click(function() {
        if (currentStep < steps.length - 1) {
            currentStep++;
            showStep(currentStep);
        }
        updateSummary();
    });

    $('.prev').click(function() {
        if (currentStep > 0) {
            currentStep--;
            showStep(currentStep);
        }
    });

    $('#multiStepForm').on('submit', function(e) {
        e.preventDefault();
        alert('Formularz wysłany!');
    });

    function updateSummary() {
        if (currentStep === 2) {
            $('#summaryName').text($('#name').val());
            $('#summaryEmail').text($('#email').val());
            $('#summaryAddress').text($('#address').val());
            $('#summaryCity').text($('#city').val());
        }
    }

    showStep(currentStep);
});

Uruchomienie

Aby uruchomić projekt, wystarczy otworzyć plik index.html w przeglądarce. Upewnij się, że wszystkie pliki są w tym samym folderze.

Rozszerzenia

Możesz rozszerzyć ten formularz o:

  • Więcej kroków (np. dodanie kroków z wyborem opcji, takich jak radio buttony lub checkboxy).
  • Walidację każdej sekcji przed przejściem do następnej (z wykorzystaniem dodatkowej logiki w script.js).
  • Stylizację przycisków i formularza, aby lepiej pasował do całej strony.

Częste błędy

  • Nieprawidłowe zdefiniowanie klas CSS dla kroków, co uniemożliwia ich widoczność.
  • Nieaktualizowanie podsumowania przed końcowym krokiem.
  • Nieprawidłowe ustawienie jQuery w nagłówku, co prowadzi do błędów w działaniu skryptu.

Podsumowanie

W tym poradniku zaprezentowaliśmy, jak stworzyć formularz wieloetapowy z użyciem jQuery. Stworzenie takiego formularza pozwala na lepsze doświadczenia użytkownika poprzez rozłożenie wprowadzania danych na mniejsze, łatwiejsze do zarządzania kroki. Mamy nadzieję, że to rozwiązanie pomoże Ci w tworzeniu bardziej interaktywnych formularzy.