Support formmethod and formaction in ViewTransitions (#9084)

* Support formmethod and formaction in ViewTransitions

* Adding a changeset

* Update .changeset/new-pets-fail.md

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

* Be less clever

---------

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

6 files changed, 69 insertions, 5 deletions

diff --git a/.changeset/new-pets-fail.md b/.changeset/new-pets-fail.md
new file mode 100644
index 000000000..ed791a6a5
--- /dev/null
+++ b/.changeset/new-pets-fail.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Supports `formmethod` and `formaction` for form overrides
diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro
index 2e8b93c2f..089d8d8e5 100644
--- a/packages/astro/components/ViewTransitions.astro
+++ b/packages/astro/components/ViewTransitions.astro
@@ -88,11 +88,14 @@ const { fallback = 'animate', handleForms } = Astro.props;
 				}
 
 				const form = el as HTMLFormElement;
+				const submitter = ev.submitter;
 				const formData = new FormData(form);
 				// Use the form action, if defined, otherwise fallback to current path.
-				let action = form.action ?? location.pathname;
+				let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname;
+				const method = submitter?.getAttribute('formmethod') ?? form.method;
+
 				const options: Options = {};
-				if (form.method === 'get') {
+				if (method === 'get') {
 					const params = new URLSearchParams(formData as any);
 					const url = new URL(action);
 					url.search = params.toString();
diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/form-three.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/form-three.astro
new file mode 100644
index 000000000..9d27534de
--- /dev/null
+++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/form-three.astro
@@ -0,0 +1,20 @@
+---
+import Layout from '../components/Layout.astro';
+let formData: FormData | undefined;
+if(Astro.request.method === 'POST') {
+	formData = await Astro.request.formData();
+}
+---
+<Layout>
+	{
+		Astro.request.method === 'GET' ? (
+			<h2>Contact Form</h2>
+			<form action="/contact" method="get">
+				<input type="hidden" name="name" value="Testing">
+				<button id="submit" type="submit" formmethod="post" formaction="/form-three">Submit</button>
+			</form>
+		) : (
+			<div id="three-result">Got: {formData?.get('name')}</div>
+		)
+	}
+</Layout>
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js
index ac0af3be2..20ea8adbc 100644
--- a/packages/astro/e2e/view-transitions.test.js
+++ b/packages/astro/e2e/view-transitions.test.js
@@ -1004,4 +1004,16 @@ test.describe('View Transitions', () => {
 			'There should be only 1 page load. No additional loads for the form submission'
 		).toEqual(1);
 	});
+
+	test('forms are overridden by formmethod and formaction', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/form-three'));
+
+		let locator = page.locator('h2');
+		await expect(locator, 'should have content').toHaveText('Contact Form');
+
+		// Submit the form
+		await page.click('#submit');
+		const result = page.locator('#three-result');
+		await expect(result, 'should have content').toHaveText('Got: Testing');
+	});
 });
diff --git a/packages/astro/package.json b/packages/astro/package.json
index ac93f13fc..3470a589d 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -186,7 +186,7 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.1.0",
-    "@playwright/test": "^1.37.1",
+    "@playwright/test": "1.40.0-alpha-nov-13-2023",
     "@types/babel__generator": "^7.6.4",
     "@types/babel__traverse": "^7.20.1",
     "@types/chai": "^4.3.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 29ceae7f2..0ca2231f2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -667,8 +667,8 @@ importers:
         specifier: ^0.1.0
         version: 0.1.0(prettier-plugin-astro@0.12.0)(prettier@3.0.3)(typescript@5.1.6)
       '@playwright/test':
-        specifier: ^1.37.1
-        version: 1.39.0
+        specifier: 1.40.0-alpha-nov-13-2023
+        version: 1.40.0-alpha-nov-13-2023
       '@types/babel__generator':
         specifier: ^7.6.4
         version: 7.6.6
@@ -8061,6 +8061,14 @@ packages:
       playwright: 1.39.0
     dev: true
 
+  /@playwright/test@1.40.0-alpha-nov-13-2023:
+    resolution: {integrity: sha512-qb5AzKN2pf14C4AT90ps3VGbDhx1/9LnzzT+D2TBZQ/vRUUvacvxxhjieelFKvw+FN4BIXFnEs2bNecc37Jyww==}
+    engines: {node: '>=16'}
+    hasBin: true
+    dependencies:
+      playwright: 1.40.0-alpha-nov-13-2023
+    dev: true
+
   /@preact/preset-vite@2.6.0(preact@10.18.1):
     resolution: {integrity: sha512-5nztNzXbCpqyVum/K94nB2YQ5PTnvWdz4u7/X0jc8+kLyskSSpkNUxLQJeI90zfGSFIX1Ibj2G2JIS/mySHWYQ==}
     peerDependencies:
@@ -14360,6 +14368,12 @@ packages:
     hasBin: true
     dev: true
 
+  /playwright-core@1.40.0-alpha-nov-13-2023:
+    resolution: {integrity: sha512-EVClUNNwgSh7y161ACuTQ6ULzb51dgBVbvLSGBd6lBtcb5DZ3gwG6TZLU6UrE4KNSeMxZTBsXlFlrasR6L6G3w==}
+    engines: {node: '>=16'}
+    hasBin: true
+    dev: true
+
   /playwright@1.39.0:
     resolution: {integrity: sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==}
     engines: {node: '>=16'}
@@ -14370,6 +14384,16 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /playwright@1.40.0-alpha-nov-13-2023:
+    resolution: {integrity: sha512-/jHChcF6JXbFaL1YpZvNlXaFDfCJiXPyzooNo4TTp4yUG0vtq0b7r8jSOwmC1AcByIr4tIYkC0nOjn2TjvPlYw==}
+    engines: {node: '>=16'}
+    hasBin: true
+    dependencies:
+      playwright-core: 1.40.0-alpha-nov-13-2023
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /port-authority@2.0.1:
     resolution: {integrity: sha512-Hz/WvSNt5+7x+Rq1Cn6DetJOZxKtLDehJ1mLCYge6ju4QvSF/PHvRgy94e1SKJVI96AJTcqEdNwkkaAFad+TXQ==}
     dev: false