patx/miadruck

Enhance SEO with social meta tags and form feedback

Commit fe59fc3 · Harrison Erd · 2026-01-09T18:49:33-05:00

Changeset
fe59fc3c9eda2416ace6370591529911bc4c2ef6
Parents
1b2be46669827a163f8793e177521412e5a69b42

View source at this commit

Enhance SEO with social meta tags and form feedback

Added Open Graph and Twitter meta tags for social sharing. Implemented success message display after form submission.

Comments

No comments yet.

Log in to comment

Diff

diff --git a/index.html b/index.html
index 9fba6fd..344e20a 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,19 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>Mia Druck | South Florida Real Estate</title>
+  <!-- Social share preview -->
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Mia Druck | South Florida Real Estate" />
+  <meta property="og:description" content="Move with Mia — Buying • Selling • Rentals in South Florida." />
+  <meta property="og:image" content="https://lh3.googleusercontent.com/p/AF1QipOsCr_6xoDSkLUG33nLrJ9QwA2n9Q4NUIPw0qkt=s1200" />
+  <meta property="og:image:width" content="1200" />
+  <meta property="og:image:height" content="630" />
+  <meta property="og:url" content="https://miadruck.com/" />
+
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Mia Druck | South Florida Real Estate" />
+  <meta name="twitter:description" content="Move with Mia — Buying • Selling • Rentals in South Florida." />
+  <meta name="twitter:image" content="https://lh3.googleusercontent.com/p/AF1QipOsCr_6xoDSkLUG33nLrJ9QwA2n9Q4NUIPw0qkt=s1200" />
 
   <!-- Fonts (optional, remove if you want fully offline) -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -706,7 +719,7 @@
 
           <!-- CONTACT PANEL -->
           <div id="panel-contact">
-            <form class="form" action="https://formspree.io/f/mpqqaadn" method="POST">
+            <form class="form" id="heroContactForm" action="https://formspree.io/f/mpqqaadn" method="POST">
               <div class="row2">
                 <label>
                   First Name
@@ -739,6 +752,25 @@
               <button class="send" type="submit">Send</button>
             </form>
 
+            <!-- Success replaces form (prevents multiple submissions) -->
+            <div id="contactSuccess" class="hide" style="
+              padding:18px;
+              border-radius:16px;
+              border:1px solid rgba(0,0,0,.10);
+              background:rgba(var(--accent2-rgb), .10);
+              text-align:center;
+            ">
+              <div style="font-family:Poppins,Inter,system-ui;font-weight:900;font-size:20px;">
+                ✅ Your message has been sent!
+              </div>
+              <div class="muted" style="margin-top:8px;font-weight:700; line-height:1.45;">
+                Thanks for reaching out — Mia will get back to you shortly.
+              </div>
+              <div class="muted" style="margin-top:10px;font-weight:800;">
+                If you need a faster response, call:
+                <a href="tel:9545527330" style="color:var(--accent); font-weight:900;">(954) 552-7330</a>
+              </div>
+            </div>
           </div>
 
         </div>
@@ -1079,6 +1111,46 @@
       if (b) b.value = v;
     }
 
+    // ---------------------------
+    // Formspree AJAX submit -> replace form with success (deters duplicates)
+    // ---------------------------
+    (function () {
+      const form = document.getElementById("heroContactForm");
+      const success = document.getElementById("contactSuccess");
+      if (!form || !success) return;
+
+      form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+
+        const btn = form.querySelector('button[type="submit"]');
+        const oldText = btn ? btn.textContent : "Send";
+        if (btn) { btn.disabled = true; btn.textContent = "Sending…"; }
+
+        try{
+          const fd = new FormData(form);
+
+          const res = await fetch(form.action, {
+            method: "POST",
+            headers: { "Accept": "application/json" },
+            body: fd
+          });
+
+          if (res.ok){
+            // Replace form with success message (prevents multiple submits)
+            form.classList.add("hide");
+            success.classList.remove("hide");
+            form.reset();
+          } else {
+            alert("Sorry — something went wrong sending your message. Please try again or call Mia.");
+            if (btn) { btn.disabled = false; btn.textContent = oldText; }
+          }
+        } catch (err){
+          alert("Network error — please try again or call Mia.");
+          if (btn) { btn.disabled = false; btn.textContent = oldText; }
+        }
+      });
+    })();
+
     // ---------------------------
     // Mobile hamburger toggle
     // ---------------------------