Add contact form to footer and simplify footer content

Replace footer note with a contact form that emails contact@schoolcompare.co.uk
via FormSubmit.co. Keep only the data source attribution. Update CSP to allow
form submissions to FormSubmit.co and add responsive styling for the form.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

backend/app.py

@@ -72,7 +72,7 @@ class SecurityHeadersMiddleware(BaseHTTPMiddleware):
             "connect-src 'self' https://cdn.jsdelivr.net https://*.tile.openstreetmap.org https://unpkg.com https://www.google-analytics.com https://analytics.google.com https://*.google-analytics.com; "
             "frame-ancestors 'none'; "
             "base-uri 'self'; "
-            "form-action 'self';"
+            "form-action 'self' https://formsubmit.co;"
         )
 
         # HSTS (only enable if using HTTPS in production)

frontend/index.html

@@ -346,8 +346,26 @@
     </div>
 
     <footer class="footer">
+        <div class="footer-content">
+            <div class="footer-contact">
+                <h3>Contact Us</h3>
+                <p>Have questions, feedback, or suggestions? We'd love to hear from you.</p>
+                <form action="https://formsubmit.co/contact@schoolcompare.co.uk" method="POST" class="contact-form">
+                    <input type="hidden" name="_subject" value="SchoolCompare Contact Form">
+                    <input type="hidden" name="_captcha" value="false">
+                    <input type="text" name="_honey" style="display:none">
+                    <div class="form-row">
+                        <input type="text" name="name" placeholder="Your Name" required class="form-input">
+                        <input type="email" name="email" placeholder="Your Email" required class="form-input">
+                    </div>
+                    <textarea name="message" placeholder="Your Message" required class="form-input form-textarea"></textarea>
+                    <button type="submit" class="btn btn-primary">Send Message</button>
+                </form>
+            </div>
+            <div class="footer-source">
                 <p>Data source: <a href="https://www.compare-school-performance.service.gov.uk/" target="_blank">UK Government - Compare School Performance</a></p>
-        <p class="footer-note">Primary school (KS2) data for England. Data from 2019-2020, 2020-2021, 2021-2022 unavailable due to COVID-19 disruption.</p>
+            </div>
+        </div>
     </footer>
 
     <script src="/static/app.js"></script>

frontend/styles.css

@@ -1197,14 +1197,82 @@ body {
 
 /* Footer */
 .footer {
-    text-align: center;
-    padding: 2rem;
     margin-top: 3rem;
     border-top: 1px solid var(--border-color);
     color: var(--text-muted);
     font-size: 0.85rem;
 }
 
+.footer-content {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.footer-contact {
+    margin-bottom: 2rem;
+}
+
+.footer-contact h3 {
+    font-family: 'Playfair Display', serif;
+    font-size: 1.25rem;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+}
+
+.footer-contact > p {
+    color: var(--text-muted);
+    margin-bottom: 1rem;
+}
+
+.contact-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.contact-form .form-row {
+    display: flex;
+    gap: 0.75rem;
+}
+
+.contact-form .form-input {
+    flex: 1;
+    padding: 0.75rem 1rem;
+    font-family: inherit;
+    font-size: 0.9rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    background: var(--bg-card);
+    color: var(--text-primary);
+    transition: var(--transition);
+}
+
+.contact-form .form-input:focus {
+    outline: none;
+    border-color: var(--accent-teal);
+    box-shadow: 0 0 0 3px rgba(45, 106, 100, 0.1);
+}
+
+.contact-form .form-input::placeholder {
+    color: var(--text-muted);
+}
+
+.contact-form .form-textarea {
+    min-height: 100px;
+    resize: vertical;
+}
+
+.contact-form .btn {
+    align-self: flex-start;
+}
+
+.footer-source {
+    text-align: center;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--border-color);
+}
+
 .footer a {
     color: var(--accent-teal);
     text-decoration: none;
@@ -1214,9 +1282,14 @@ body {
     text-decoration: underline;
 }
 
-.footer-note {
+@media (max-width: 768px) {
-    margin-top: 0.5rem;
+    .contact-form .form-row {
-    font-size: 0.75rem;
+        flex-direction: column;
+    }
+
+    .contact-form .btn {
+        align-self: stretch;
+    }
 }
 
 /* Loading State */