diff --git a/src/components/contact/Header.vue b/src/components/contact/Header.vue
index 90dfd983bc0..527962e27ae 100644
--- a/src/components/contact/Header.vue
+++ b/src/components/contact/Header.vue
@@ -35,9 +35,17 @@
                                     :id="f.id"
                                     type="text"
                                     class="form-control"
+                                    :class="{ 'is-invalid': errors[f.id] }"
                                     :name="f.id"
                                     required
+                                    @input="clearError(f.id)"
                                 />
+                                <div
+                                    v-if="errors[f.id]"
+                                    class="field-error"
+                                >
+                                    {{ errors[f.id] }}
+                                </div>
                             </div>
                         </div>
 
@@ -54,18 +62,25 @@
                                 v-if="f.type === 'textarea'"
                                 :id="f.id"
                                 class="form-control"
+                                :class="{ 'is-invalid': errors[f.id] }"
                                 :name="f.id"
                                 rows="4"
                                 required
+                                @input="clearError(f.id)"
                             />
                             <input
                                 v-else
                                 :id="f.id"
                                 :type="f.type"
                                 class="form-control"
+                                :class="{ 'is-invalid': errors[f.id] }"
                                 :name="f.id"
                                 required
+                                @input="clearError(f.id)"
                             />
+                            <div v-if="errors[f.id]" class="field-error">
+                                {{ errors[f.id] }}
+                            </div>
                         </div>
                         <button
                             type="submit"
@@ -87,6 +102,7 @@
     import identify from "~/utils/identify"
     import { useGtm } from "@gtm-support/vue-gtm"
     import { $fetch } from "~/utils/fetch"
+    import { useFormErrors } from "~/composables/useFormErrors"
     import Squared from "~/components/layout/Squared.vue"
 
     const props = defineProps<{ routePath: string }>()
@@ -127,13 +143,16 @@
         },
     ]
 
+    const { errors, clearError, validate } = useFormErrors(
+        Object.fromEntries(fields.map((f) => [f.id, f.label])),
+    )
+
     async function onSubmit() {
         const form = formRef.value as HTMLFormElement
         message.value = ""
 
-        if (!form.checkValidity()) {
-            form.reportValidity()
-            message.value = "Invalid form: Please review the fields."
+        if (!validate(form)) {
+            message.value = "Please correct the highlighted fields below."
             return
         }
 
diff --git a/src/components/partners/BecomeAPartner.vue b/src/components/partners/BecomeAPartner.vue
index 29d044f7ec5..73a08cfa2db 100644
--- a/src/components/partners/BecomeAPartner.vue
+++ b/src/components/partners/BecomeAPartner.vue
@@ -38,9 +38,19 @@
                                         :id="fields[0].id"
                                         type="text"
                                         class="form-control"
+                                        :class="{
+                                            'is-invalid': errors[fields[0].id],
+                                        }"
                                         :name="fields[0].id"
                                         required
+                                        @input="clearError(fields[0].id)"
                                     />
+                                    <div
+                                        v-if="errors[fields[0].id]"
+                                        class="field-error"
+                                    >
+                                        {{ errors[fields[0].id] }}
+                                    </div>
                                 </div>
 
                                 <div class="form-row">
@@ -59,9 +69,19 @@
                                             :id="f.id"
                                             type="text"
                                             class="form-control"
+                                            :class="{
+                                                'is-invalid': errors[f.id],
+                                            }"
                                             :name="f.id"
                                             required
+                                            @input="clearError(f.id)"
                                         />
+                                        <div
+                                            v-if="errors[f.id]"
+                                            class="field-error"
+                                        >
+                                            {{ errors[f.id] }}
+                                        </div>
                                     </div>
                                 </div>
 
@@ -82,18 +102,28 @@
                                         v-if="f.type === 'textarea'"
                                         :id="f.id"
                                         class="form-control"
+                                        :class="{ 'is-invalid': errors[f.id] }"
                                         :name="f.id"
                                         rows="4"
                                         :required="f.required"
+                                        @input="clearError(f.id)"
                                     />
                                     <input
                                         v-else
                                         :id="f.id"
                                         :type="f.type"
                                         class="form-control"
+                                        :class="{ 'is-invalid': errors[f.id] }"
                                         :name="f.id"
                                         :required="f.required"
+                                        @input="clearError(f.id)"
                                     />
+                                    <div
+                                        v-if="errors[f.id]"
+                                        class="field-error"
+                                    >
+                                        {{ errors[f.id] }}
+                                    </div>
                                 </div>
 
                                 <div class="form-group">
@@ -139,14 +169,24 @@
                                         <input
                                             id="consent"
                                             type="checkbox"
+                                            :class="{
+                                                'is-invalid': errors.consent,
+                                            }"
                                             name="consent"
                                             required
+                                            @change="clearError('consent')"
                                         />
                                         <label for="consent"
                                             >I agree to receive other
                                             communications from Kestra.</label
                                         >
                                     </div>
+                                    <div
+                                        v-if="errors.consent"
+                                        class="field-error"
+                                    >
+                                        {{ errors.consent }}
+                                    </div>
                                     <p class="mt-3">
                                         By clicking submit below, you consent to
                                         allow Kestra to store and process the
@@ -177,6 +217,7 @@
     import identify from "~/utils/identify"
     import { useGtm } from "@gtm-support/vue-gtm"
     import { $fetch } from "~/utils/fetch"
+    import { useFormErrors } from "~/composables/useFormErrors"
 
     const props = defineProps<{ routePath: string }>()
 
@@ -235,13 +276,16 @@
         },
     ]
 
+    const { errors, clearError, validate } = useFormErrors(
+        Object.fromEntries(fields.map((f) => [f.id, f.label])),
+    )
+
     async function onSubmit() {
         const form = formRef.value as HTMLFormElement
         message.value = ""
 
-        if (!form.checkValidity()) {
-            form.reportValidity()
-            message.value = "Invalid form: Please review the fields."
+        if (!validate(form)) {
+            message.value = "Please correct the highlighted fields below."
             return
         }
 
diff --git a/src/components/partners/style/form.scss b/src/components/partners/style/form.scss
index c97fb0c371e..799106215a4 100644
--- a/src/components/partners/style/form.scss
+++ b/src/components/partners/style/form.scss
@@ -38,6 +38,20 @@
         outline: none;
         border-color: var(--ks-border-active);
     }
+
+    &.is-invalid,
+    &.is-invalid:focus {
+        border-color: var(--ks-border-alert-danger);
+        // Suppress Bootstrap's validation icon and the padding it reserves.
+        background-image: none;
+        padding-right: 12px;
+    }
+}
+
+.field-error {
+    margin-top: 6px;
+    font-size: $font-size-sm;
+    color: var(--ks-content-alert-danger);
 }
 
 .checkbox-options {
@@ -79,6 +93,10 @@
                 font-size: 12px;
             }
         }
+
+        &.is-invalid {
+            border-color: var(--ks-border-alert-danger);
+        }
     }
 
     label {
diff --git a/src/components/preview-access/Features.vue b/src/components/preview-access/Features.vue
index b413a204ab8..452c2a2f9e3 100644
--- a/src/components/preview-access/Features.vue
+++ b/src/components/preview-access/Features.vue
@@ -78,9 +78,14 @@
                             name="firstname"
                             type="text"
                             class="form-control"
+                            :class="{ 'is-invalid': errors.firstname }"
                             id="firstname"
                             required
+                            @input="clearError('firstname')"
                         />
+                        <div v-if="errors.firstname" class="field-error">
+                            {{ errors.firstname }}
+                        </div>
                     </div>
                     <div class="col-6">
                         <label for="lastname">
@@ -91,9 +96,14 @@
                             name="lastname"
                             type="text"
                             class="form-control"
+                            :class="{ 'is-invalid': errors.lastname }"
                             id="lastname"
                             required
+                            @input="clearError('lastname')"
                         />
+                        <div v-if="errors.lastname" class="field-error">
+                            {{ errors.lastname }}
+                        </div>
                     </div>
                     <div class="col-12 mt-3">
                         <label for="email">
@@ -104,9 +114,14 @@
                             name="email"
                             type="email"
                             class="form-control"
+                            :class="{ 'is-invalid': errors.email }"
                             id="email"
                             required
+                            @input="clearError('email')"
                         />
+                        <div v-if="errors.email" class="field-error">
+                            {{ errors.email }}
+                        </div>
                     </div>
                     <div class="col-12 mt-4 pb-5 d-flex justify-content-center">
                         <button type="submit" class="btn btn-primary w-100">
@@ -126,6 +141,7 @@
     import identify from "~/utils/identify"
     import { useGtm } from "@gtm-support/vue-gtm"
     import { $fetch } from "~/utils/fetch"
+    import { useFormErrors } from "~/composables/useFormErrors"
     import calendarMonthImage from "./images/calendar_month.png"
     import smallCloudImage from "./images/small_cloud.png"
     import hammerWrenchImage from "./images/hammer_wrench.png"
@@ -141,6 +157,12 @@
     const validMessage = ref("")
     const message = ref("")
 
+    const { errors, clearError, validate } = useFormErrors({
+        firstname: "first name",
+        lastname: "last name",
+        email: "company email",
+    })
+
     const hubSpotFormId = "230d0ed2-2484-4e9e-86c6-135a6398fac5"
 
     const onSubmit = async (e: Event) => {
@@ -148,9 +170,9 @@
         e.stopPropagation()
         const form = formRef.value as HTMLFormElement
         const hsq = ((window as any)._hsq = (window as any)._hsq || [])
-        if (!form.checkValidity()) {
+        if (!validate(form)) {
             valid.value = false
-            message.value = "Invalid form, please review the fields."
+            message.value = "Please correct the highlighted fields below."
         } else {
             hsq.push([
                 "identify",
@@ -228,6 +250,20 @@
 </script>
 
 <style scoped lang="scss">
+    .form-control.is-invalid,
+    .form-control.is-invalid:focus {
+        border-color: var(--ks-border-alert-danger);
+        // Suppress Bootstrap's validation icon and the padding it reserves.
+        background-image: none;
+        padding-right: $input-padding-x;
+    }
+
+    .field-error {
+        margin-top: 6px;
+        font-size: $font-size-sm;
+        color: var(--ks-content-alert-danger);
+    }
+
     .livedemo {
         & img {
             width: 180px;
diff --git a/src/composables/useFormErrors.ts b/src/composables/useFormErrors.ts
new file mode 100644
index 00000000000..616f4a9ddaa
--- /dev/null
+++ b/src/composables/useFormErrors.ts
@@ -0,0 +1,24 @@
+import { ref } from "vue"
+import { getFormErrors } from "~/utils/formValidation"
+
+// Per-field validation state for the HubSpot-backed forms: `validate` records
+// a specific message per invalid field and focuses the first one, `clearError`
+// dismisses a field's message as the user edits it.
+export function useFormErrors(labels: Record<string, string> = {}) {
+    const errors = ref<Record<string, string>>({})
+
+    function clearError(id: string) {
+        delete errors.value[id]
+    }
+
+    function validate(form: HTMLFormElement): boolean {
+        errors.value = getFormErrors(form, labels)
+        if (Object.keys(errors.value).length === 0) {
+            return true
+        }
+        ;(form.querySelector(":invalid") as HTMLElement | null)?.focus()
+        return false
+    }
+
+    return { errors, clearError, validate }
+}
diff --git a/src/utils/formValidation.test.ts b/src/utils/formValidation.test.ts
new file mode 100644
index 00000000000..e4106bb5ef4
--- /dev/null
+++ b/src/utils/formValidation.test.ts
@@ -0,0 +1,102 @@
+import { describe, expect, it } from "vitest"
+import { getFieldError, getFormErrors } from "~/utils/formValidation"
+
+const validity = (overrides: Partial<ValidityState> = {}): ValidityState =>
+    ({
+        valid: false,
+        valueMissing: false,
+        typeMismatch: false,
+        badInput: false,
+        customError: false,
+        patternMismatch: false,
+        rangeOverflow: false,
+        rangeUnderflow: false,
+        stepMismatch: false,
+        tooLong: false,
+        tooShort: false,
+        ...overrides,
+    }) as ValidityState
+
+const field = (
+    type: string,
+    overrides: Partial<ValidityState>,
+    validationMessage = "",
+) => ({ type, validity: validity(overrides), validationMessage })
+
+describe("getFieldError", () => {
+    it("returns an empty string for a valid field", () => {
+        expect(getFieldError(field("email", { valid: true }))).toBe("")
+    })
+
+    it("names the field when a labeled required field is empty", () => {
+        expect(
+            getFieldError(field("text", { valueMissing: true }), "First Name"),
+        ).toBe("Please enter your first name.")
+    })
+
+    it("falls back to a generic required message without a label", () => {
+        expect(getFieldError(field("text", { valueMissing: true }))).toBe(
+            "Please fill out this field.",
+        )
+    })
+
+    it("asks for a valid email address on a malformed email", () => {
+        expect(
+            getFieldError(field("email", { typeMismatch: true }), "Email"),
+        ).toBe("Please enter a valid email address.")
+    })
+
+    it("asks to check a required checkbox", () => {
+        expect(getFieldError(field("checkbox", { valueMissing: true }))).toBe(
+            "Please check this box to continue.",
+        )
+    })
+
+    it("falls back to the browser message for other constraint failures", () => {
+        expect(
+            getFieldError(field("text", { tooShort: true }, "Too short.")),
+        ).toBe("Too short.")
+    })
+})
+
+describe("getFormErrors", () => {
+    it("collects one specific message per invalid named field", () => {
+        const form = {
+            elements: [
+                {
+                    name: "firstname",
+                    willValidate: true,
+                    ...field("text", { valueMissing: true }),
+                },
+                {
+                    name: "email",
+                    willValidate: true,
+                    ...field("email", { typeMismatch: true }),
+                },
+                {
+                    name: "company",
+                    willValidate: true,
+                    ...field("text", { valid: true }),
+                },
+                // Unnamed and non-validating controls are skipped.
+                {
+                    name: "",
+                    willValidate: true,
+                    ...field("text", { valueMissing: true }),
+                },
+                {
+                    name: "hidden",
+                    willValidate: false,
+                    ...field("text", { valueMissing: true }),
+                },
+            ],
+        } as unknown as HTMLFormElement
+
+        expect(
+            getFormErrors(form, { firstname: "First Name", email: "Email" }),
+        ).toEqual({
+            firstname: "Please enter your first name.",
+            email: "Please enter a valid email address.",
+        })
+    })
+})
diff --git a/src/utils/formValidation.ts b/src/utils/formValidation.ts
new file mode 100644
index 00000000000..e099945f688
--- /dev/null
+++ b/src/utils/formValidation.ts
@@ -0,0 +1,50 @@
+// Builds specific, human-readable validation messages from the browser's
+// native ValidityState, shared by the site's HubSpot-backed forms.
+
+interface ValidatableField {
+    name: string
+    type: string
+    willValidate: boolean
+    validity: ValidityState
+    validationMessage: string
+}
+
+export function getFieldError(
+    field: Pick<ValidatableField, "type" | "validity" | "validationMessage">,
+    label?: string,
+): string {
+    const validity = field.validity
+    if (validity.valid) return ""
+
+    if (validity.valueMissing) {
+        if (field.type === "checkbox") {
+            return "Please check this box to continue."
+        }
+        return label
+            ? `Please enter your ${label.toLowerCase()}.`
+            : "Please fill out this field."
+    }
+
+    if (validity.typeMismatch && field.type === "email") {
+        return "Please enter a valid email address."
+    }
+
+    return field.validationMessage || "Please review this field."
+}
+
+export function getFormErrors(
+    form: HTMLFormElement,
+    labels: Record<string, string> = {},
+): Record<string, string> {
+    const errors: Record<string, string> = {}
+    for (const element of Array.from(form.elements)) {
+        const field = element as unknown as ValidatableField
+        if (!field.name || !field.willValidate || field.validity.valid) {
+            continue
+        }
+        if (!errors[field.name]) {
+            errors[field.name] = getFieldError(field, labels[field.name])
+        }
+    }
+    return errors
+}
diff --git a/src/utils/newsletterSubmit.js b/src/utils/newsletterSubmit.js
index 4459c99aa13..3c2e9d11dd1 100644
--- a/src/utils/newsletterSubmit.js
+++ b/src/utils/newsletterSubmit.js
@@ -1,6 +1,7 @@
 import posthog from "posthog-js"
 import identify from "~/utils/identify.js"
 import { submitHubspotForm } from "~/utils/hubspot"
+import { getFieldError } from "~/utils/formValidation"
 import { useGtm } from "@gtm-support/vue-gtm"
 
 const hubSpotFormId = "433b234f-f3c6-431c-898a-ef699e5525fa"
@@ -16,7 +17,7 @@ export default function ({ newsletter, valid, message }, e) {
 
     if (!form.checkValidity()) {
         valid.value = false
-        message.value = "Invalid form, please review the fields."
+        message.value = getFieldError(form.email, "email address")
     } else {
         valid.value = true
         form.classList.add("was-validated")