craft/src/components/forms/ContactForm.toHtml.test.ts

@@ -41,3 +41,25 @@ describe('ContactForm.toHtml relay wiring', () => {
     expect(html).toContain('Name');
   });
 });
+
+describe('ContactForm.toHtml successMessage', () => {
+  // The published form-sender relay (form-sender/app/submit.php) delivers
+  // success via a full-page 303 redirect to thankYouUrl or a hosted
+  // thanks.php page -- there is no in-page JS to reveal an inline success
+  // element. So successMessage is emitted as a forward-compatible data
+  // attribute for a future AJAX/JS submission mode, not a live DOM element.
+  test('with successMessage set: emits it as an escaped data attribute on the form', () => {
+    const { html } = toHtml({ successMessage: "We'll be in touch!", fields: [] }, '');
+    expect(html).toContain('data-whp-success-message="We'll be in touch!"');
+  });
+
+  test('without successMessage: no data attribute emitted', () => {
+    const { html } = toHtml({ fields: [] }, '');
+    expect(html).not.toContain('data-whp-success-message');
+  });
+
+  test('escapes attribute-breakout attempts in successMessage', () => {
+    const { html } = toHtml({ successMessage: 'x" onerror="alert(1)', fields: [] }, '');
+    expect(html).not.toContain('onerror="alert(1)"');
+  });
+});

craft/src/components/forms/ContactForm.tsx

@@ -211,8 +211,15 @@ ContactForm.craft = {
 
   const { marker, actionAttr, honeypot } = relayFormWiring(props.recipientEmail, props.thankYouUrl, props.formAction);
 
+  // The form-sender relay delivers success via a full-page 303 redirect
+  // (to thankYouUrl or a hosted thanks.php page) -- there is no in-page JS
+  // that reveals an inline success element today. Emit successMessage as a
+  // forward-compatible data attribute so a future AJAX/JS submission mode
+  // can read it, without implying a live mechanism that doesn't exist yet.
+  const successAttr = props.successMessage ? ` data-whp-success-message="${escapeAttr(props.successMessage)}"` : '';
+
   return {
-    html: `${marker}<form action="${actionAttr}" method="POST"${formStyle ? ` style="${formStyle}"` : ''}>
+    html: `${marker}<form action="${actionAttr}" method="POST"${successAttr}${formStyle ? ` style="${formStyle}"` : ''}>
 ${honeypot ? `  ${honeypot}\n` : ''}${fieldsHtml ? `  ${fieldsHtml}\n` : ''}  <button type="submit"${btnStyle ? ` style="${btnStyle}"` : ''}>${escapeHtml(props.submitText || 'Send Message')}</button>
 </form>`,
   };