diff --git a/src/LiveComponent/assets/dist/live_controller.js b/src/LiveComponent/assets/dist/live_controller.js
index 94c9f8dd0ca..7b682f3e29d 100644
--- a/src/LiveComponent/assets/dist/live_controller.js
+++ b/src/LiveComponent/assets/dist/live_controller.js
@@ -305,7 +305,8 @@ function getModelDirectiveFromElement(element, throwOnMissing = true) {
         return dataModelDirectives[0];
     }
     if (element.getAttribute('name')) {
-        const formElement = element.closest('form');
+        const formId = element.getAttribute('form');
+        const formElement = formId ? document.getElementById(formId) : element.closest('form');
         if (formElement && 'model' in formElement.dataset) {
             const directives = parseDirectives(formElement.dataset.model || '*');
             const directive = directives[0];
diff --git a/src/LiveComponent/assets/src/dom_utils.ts b/src/LiveComponent/assets/src/dom_utils.ts
index 7454cf28c3d..59842a38976 100644
--- a/src/LiveComponent/assets/src/dom_utils.ts
+++ b/src/LiveComponent/assets/src/dom_utils.ts
@@ -161,7 +161,8 @@ export function getModelDirectiveFromElement(element: HTMLElement, throwOnMissin
     }
 
     if (element.getAttribute('name')) {
-        const formElement = element.closest('form');
+        const formId = element.getAttribute('form');
+        const formElement = formId ? document.getElementById(formId) : element.closest('form');
         // require a <form data-model="*"> around elements in order to
         // activate automatic "data binding" via the "name" attribute
         if (formElement && 'model' in formElement.dataset) {
diff --git a/src/LiveComponent/assets/test/dom_utils.test.ts b/src/LiveComponent/assets/test/dom_utils.test.ts
index 2afdbafd132..ff9c3725fce 100644
--- a/src/LiveComponent/assets/test/dom_utils.test.ts
+++ b/src/LiveComponent/assets/test/dom_utils.test.ts
@@ -230,6 +230,19 @@ describe('getModelDirectiveFromInput', () => {
         expect(directive?.action).toBe('user.firstName');
     });
 
+    it('reads name attribute if element lives out of form and use "form" attribute', () => {
+        const container = document.createElement('div');
+        const formElement = htmlToElement('<form data-model="*" id="my-form"></form>');
+        const element = htmlToElement('<input name="user[firstName]" form="my-form">');
+        container.appendChild(element);
+        container.appendChild(formElement);
+        document.body.appendChild(container);
+
+        const directive = getModelDirectiveFromElement(element);
+        expect(directive).not.toBeNull();
+        expect(directive?.action).toBe('user.firstName');
+    });
+
     it('does NOT reads name attribute if form[data-model] is NOT present', () => {
         const formElement = htmlToElement('<form></form>');
         const element = htmlToElement('<input name="user[firstName]">');