Use Laravel precognition and update form a11y

content/collections/pages/contact-form.md

@@ -2,17 +2,18 @@
 id: 5c526dbf-9dd7-4c52-98d8-54e00ebddfb6
 blueprint: page
 title: 'Contact form'
-updated_by: 9be3d58e-745d-4669-9a70-21c4c5049b89
-updated_at: 1627566855
+updated_by: ceaa75bd-bc37-4a8b-b0f2-b7af70e58b0e
+updated_at: 1698695250
 seo_noindex: false
 seo_nofollow: false
 seo_canonical_type: entry
 sitemap_change_frequency: weekly
 sitemap_priority: 0.5
 page_builder:
   -
+    id: QGsYdcyd
     title: 'A contact form'
-    text: 'This form works with static caching. Both the receiver and the owner of the website will receive a styled e-mail. Forms are dynamic, so just add a field to the forms blueprint and it will work.'
+    text: 'Both the receiver and the owner of the website will receive a styled e-mail. Forms are dynamic, work with conditional logic and use Laravel Precognition for validation and submission.'
     form: contact
     type: form
     enabled: true

lang/en/strings.php

@@ -2,7 +2,7 @@
 
 return [
     // Contact form
-    'form_error' => 'There are errors with your form input. Please fix them and try again.',
+    'form_error' => 'There are problems with your form input:',
     'form_honeypot' => 'Fax',
     'form_mail_body_owner' => 'A contact form has been sent.',
     'form_mail_body_sender' => 'Thanks for your message. We will contact you as soon as possible.',

package.json

@@ -13,7 +13,8 @@
     "@alpinejs/focus": "^3.13.0",
     "@alpinejs/morph": "^3.13.0",
     "@alpinejs/persist": "^3.13.0",
-    "alpinejs": "^3.13.0"
+    "alpinejs": "^3.13.0",
+    "laravel-precognition-alpine": "^0.5.2"
   },
   "devDependencies": {
     "@csstools/postcss-oklab-function": "^3.0.5",

public/build/manifest.json

@@ -1,11 +1,11 @@
 {
   "resources/css/site.css": {
-    "file": "assets/site-d829b46c.css",
+    "file": "assets/site-c4c8bdf1.css",
     "isEntry": true,
     "src": "resources/css/site.css"
   },
   "resources/js/site.js": {
-    "file": "assets/site-c558eb30.js",
+    "file": "assets/site-ffb206ad.js",
     "isEntry": true,
     "src": "resources/js/site.js"
   }

resources/blueprints/forms/contact.yaml

@@ -9,24 +9,50 @@ tabs:
             field:
               display: Name
               type: text
-              validate: required
+              validate:
+                - required
+                - 'min:2'
               localizable: true
-              width: 50
+              width: 66
+              instructions_position: above
+              listable: hidden
+              visibility: visible
+              replicator_preview: true
+              input_type: text
+              antlers: false
+              hide_display: false
           -
             handle: email
             field:
               display: 'Email address'
               type: text
-              validate: required|email
+              validate:
+                - required
+                - email
               localizable: true
-              width: 50
+              width: 66
+              instructions_position: above
+              listable: hidden
+              visibility: visible
+              replicator_preview: true
+              input_type: text
+              antlers: false
+              hide_display: false
           -
             handle: message_body
             field:
               display: Message
               type: textarea
-              validate: required
+              validate:
+                - required
+                - 'min:5'
               localizable: true
+              instructions_position: above
+              listable: hidden
+              visibility: visible
+              replicator_preview: true
+              antlers: false
+              hide_display: false
           -
             handle: consent
             field:

resources/js/site.js

@@ -1,22 +1,11 @@
 import Alpine from 'alpinejs'
 import collapse from '@alpinejs/collapse'
+import focus from '@alpinejs/focus'
 import morph from '@alpinejs/morph'
 import persist from '@alpinejs/persist'
-import focus from '@alpinejs/focus'
-
-// Global get CSRF token function (used by forms).
-window.getToken = async () => {
-    return await fetch('/!/statamic-peak-tools/dynamic-token/refresh')
-        .then((res) => res.json())
-        .then((data) => {
-            return data.csrf_token
-        })
-        .catch((error) => {
-            this.error = 'Something went wrong. Please try again later.'
-        })
-}
+import precognition from 'laravel-precognition-alpine';
 
 // Call Alpine.
 window.Alpine = Alpine
-Alpine.plugin([collapse, focus, morph, persist])
+Alpine.plugin([collapse, focus, morph, persist, precognition])
 Alpine.start()