forms

ai/prompt.ts

@@ -6,6 +6,7 @@ Generate the full HTML markup, including:
 - Abundant, contextually-relevant links (href="https://example.com/...") to other pages within the same expansive web, encouraging exploration
 - Interactive elements to engage the user's curiosity
 - Fanciful, wondrous content that sparks the imagination
+- If you create a form, make sure that its method is GET and a full absolute URL is specified for the action attribute
 
 Every header should contain a descriptive hyperlink. Use URL hierarchy and parameters creatively to contextualize the user's journey.
 

components/BrowserShape.tsx

@@ -181,7 +181,7 @@ export class BrowserShapeUtil extends BaseBoxShapeUtil<BrowserShape> {
         if (event.source !== iframe?.contentWindow) {
           return;
         }
-        if (event.data.type === "linkClick") {
+        if (event.data.type === "navigate") {
           const { href } = event.data;
 
           const newX = shape.x;

public/bootstrap.js

@@ -1,6 +1,16 @@
 window.addEventListener("click", (e) => {
   if (e.target.tagName === "A") {
     e.preventDefault();
-    window.parent.postMessage({ type: "linkClick", href: e.target.href }, "*");
+    window.parent.postMessage({ type: "navigate", href: e.target.href }, "*");
+  }
+});
+
+window.addEventListener("submit", (e) => {
+  if (e.target.tagName === "FORM") {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const queryParams = new URLSearchParams(formData).toString();
+    const newHref = `${e.target.action}?${queryParams}`;
+    window.parent.postMessage({ type: "navigate", href: newHref }, "*");
   }
 });