Contact Form 7 Quote Form

<div class="form-wrapper-wide">
    <div class="form-container">
        <!-- Step Indicators -->
        <div id="stepIndicators">
            <div class="step active">
                <span class="step-number">1</span>
                <p class="step-label">Get Your Quote</p>
            </div>

            <div class="step-line"></div>

            <div class="step">
                <span class="step-number">2</span>
                <p class="step-label">Complete the form</p>
            </div>

            <div class="step-line"></div>
            
            <div class="step">
                <span class="step-number">3</span>
                <p class="step-label">Wait for Call</p>
            </div>
        </div>

        <!-- Step 1: Vehicle registration number and postcode -->
        <section id="step1">
            <div class="input-field vrm">
                <label for="vehicle_reg_number">Vehicle Registration</label>
                [text vehicle_reg_number id:vehicle_registration_number]
            </div>

            <div class="input-field postcode">
                <label for="customer_postcode">Postcode</label>
                [text customer_postcode id:customer_postcode]
            </div>

            <div id="get-quote">
                [submit "Get Quote"]
            </div>
        </section>

        <!-- Loader element -->
        <div id="loader" style="display: none;">
            <img src="/wp-content/uploads/2024/02/Dual-Ball-1s-200px.svg" />
        </div>

        <!-- Step 2: Vehicle details -->
        <section id="step2" style="display: none;">
            <div class="quote-details">
                <p class="quote-text">
                    We will accept your <span id="vehicle-make"></span>, <span id="vehicle-model"></span>
                    <br> for £<span id="vehicle-valuation"></span>
                </p>
            </div>
            <div class="display-buttons">
                <button id="accept-quote">Accept Quote</button>
            </div>

        </section>

        <div id="hidden-fields" style="display: none;">
            [hidden vehicle-make]
            [hidden vehicle-model]
            [hidden vehicle-valuation]
            <!-- Add other hidden fields here -->
        </div>

        <!-- Step 3: Customer details -->
        <section id="step3" style="display: none;">
            <div class="input-field">
                <label for="customer_name">Full Name</label>
                [text customer_name id:customer_name]
            </div>

            <div class="input-field">
                <label for="customer_email">Email Address</label>
                [text customer_name id:customer_email]
            </div>

            <div class="input-field">
                <label for="customer_address">Address</label>
                [text customer_name id:customer_address]
            </div>

            <!-- Include other input fields for customer details -->

            <div class="display-buttons">
                <button id="submit-quote">Submit</button>
            </div>
        </section>

        <!-- Step 4: Summary -->
        <section id="step4" style="display: none;">
            <p>Success! Wait for our call to scrap your car.</p>
            <div id="restart-quote">
                [submit "Restart Quote"]
            </div>
        </section>
    </div>
</div>