index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Quote Form</title>
</head>
<body>

    <!-- Header with Logo and Company Name -->
    <header>
        <div id="header-container">
            <img src="images/logo.png" alt="Company Logo" id="company-logo">
            <label for="company-logo" id="logo-label">PA's Go-To for Solar Panel Cleaning & Maintenance!</label>
        </div>
    </header>
    
    <!-- Quote Form -->
    <section id="quote-form-section">
        <form id="quote-form" action="https://formspree.io/f/mqazjvne" method="POST">
            <h2>Get A Free Quote Today!</h2>
            
            <!-- Required Fields -->
            <div class="form-row">
                <div class="form-group">
                    <label for="name">Full Name*</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="address">Address*</label>
                    <input type="text" id="address" name="address" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="zip">Zip Code*</label>
                    <input type="text" id="zip" name="zip" required>
                </div>
                <div class="form-group">
                    <label for="phone">Phone Number*</label>
                    <input type="tel" id="phone" name="phone" required>
                </div>
            </div>

            <div class="form-row">

                <div class="form-group">
                    <label for="email">Email*</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div id="toggle-optional-fields-container">
                    <label for="toggle-optional-fields">Have more information? Click here!</label>
                    <button type="button" id="toggle-optional-fields">Show</button>
                </div>
            </div>
            




            <!-- Optional Fields -->
            <div id="optional-fields" style="display: none;">

                <div class="form-row">
                    <div class="form-group">
                        <label for="arrays">Number of Solar Arrays</label>
                        <input type="number" id="arrays" name="arrays">
                    </div>
                    <div class="form-group">
                        <label for="stories">Number of Stories</label>
                        <input type="number" id="stories" name="stories">
                    </div>
                </div>

                <div class="form-row">


                    <div class="form-group">
                        <label for="description" class="textarea-label">Additional Information</label>
                        <textarea id="description" name="description" rows="1" cols="50"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="system">System Model</label>
                        <select id="system" name="system">
                            <option value="">Select System Model</option>
                            <option value="System1">System 1</option>
                            <option value="System2">System 2</option>
                            <option value="System3">System 3</option>
                            <option value="OTHER">Other (Specify)</option>
                        </select>
                    </div>
 
                </div>

                <div id="other-system" class="form-row" style="display: none;">
                    <label for="otherSystem">Specify Other System</label>
                    <input type="text" id="otherSystem" name="otherSystem">
                </div>

 
            </div>

            <!-- Spam Protection -->
            <input type="text" name="_gotcha" style="display:none">

            <!-- Submit Button -->
            <input type="submit" value="Submit">
        </form>
    </section>

    <!-- Image and Text Description Section -->
    <section class="image-section">
        <div class="image-container">
            <img src="images/image1.png" alt="Image 1">
            <img src="images/image2.png" alt="Image 2">
        </div>
        <div class="image-container">
            <img src="images/image3.png" alt="Image 3">
            <img src="images/image4.png" alt="Image 4">
        </div>
        <div class="image-container">
            <img src="images/image5.png" alt="Image 5">
            <img src="images/image6.png" alt="Image 6">
        </div>
    </section>


    <!-- JavaScript for Form Submission Handling and Optional Fields Toggle -->
    <script>
        document.getElementById('quote-form').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent default form submission

            fetch(this.action, {
                method: this.method,
                body: new FormData(this),
                headers: { 'Accept': 'application/json' }
            }).then(response => {
                if (response.ok) {
                    alert('SUCCESS! Your quote request has been sent.');
                    this.reset();
                    document.getElementById('optional-fields').style.display = 'none'; // Hide optional fields after form reset
                    document.getElementById('other-system').style.display = 'none'; // Hide OTHER input after form reset
                } else {
                    alert('FAILED... Please try again later.');
                }
            }).catch(error => {
                alert('FAILED... Please try again later.');
            });
        });

        // JavaScript to toggle "Specify Other System" input
        document.getElementById('system').addEventListener('change', function() {
            const otherSystem = document.getElementById('other-system');
            if (this.value === 'OTHER') {
                otherSystem.style.display = 'block';
            } else {
                otherSystem.style.display = 'none';
            }
        });

        // JavaScript to toggle optional fields visibility
        document.getElementById('toggle-optional-fields').addEventListener('click', function() {
            const optionalFields = document.getElementById('optional-fields');
            if (optionalFields.style.display === 'none') {
                optionalFields.style.display = 'block';
                this.textContent = 'Hide';
            } else {
                optionalFields.style.display = 'none';
                this.textContent = 'Show';
            }
        });
    </script>

</body>
</html>