diff --git a/resources/js/components/FormSubmission.vue b/resources/js/components/FormSubmission.vue
index 828a6f7..69ae4b6 100644
--- a/resources/js/components/FormSubmission.vue
+++ b/resources/js/components/FormSubmission.vue
@@ -1,4 +1,5 @@
 <script>
+import { useEventListener } from '@vueuse/core'
 import '/public/vendor/statamic/frontend/js/helpers.js'
 Vue.prototype.Statamic = window.Statamic
 
@@ -28,6 +29,14 @@ export default {
         if (csrfField && token && token !== 'STATAMIC_CSRF_TOKEN') {
             csrfField.value = token
         }
+
+        // Recursively open up any `details` accordions that have errors in them
+        useEventListener(this.$el, 'invalid', (event) => {
+            let current = event.target
+            while(current = current.parentElement.closest('details')) {
+                current.open = true
+            }
+        }, true)
     },
 
     methods: {