Contact Form

Requirements

• Render exactly one form containing a labeled text input with name="name", a labeled email input with name="email", and a labeled textarea with name="message". Use one label per field, nesting the control or associating it with for/htmlFor and id.
• Include a button with type="submit" and the label Submit. All three fields must be required; use native required and type="email" validation.
• Initialize all fields to empty strings. Use controlled, reactive state: React value/onChange, Vue v-model, or Angular state value/input bindings or a form model. Do not read field values only at submission with DOM queries or FormData.
• Prevent the default form navigation. On a valid submit, capture the current name, email, and message in an object with those keys in that order.
• Show JSON.stringify(submittedValues) as plain text in a pre element with data-testid="submission". Do not render this element before the first valid submit.
• Keep input values after submission. Further edits must not change the displayed submission until the next valid submit, which replaces the previous snapshot.
• Preserve the entered text exactly, including whitespace, multiline messages, and Unicode. Render user input safely through framework text interpolation.
• Empty required fields or an invalid email must prevent submission. Custom error messages, reset buttons, network requests, persistence, and email delivery are outside scope.
• The starter has only an empty form/text input and minimal framework wrapper. Add all other markup, state, bindings, and submission behavior yourself. Styling is flexible.

Examples

Input: Initial render
Output: Three empty fields and a Submit button; no submission.

Input: Name: Ada Lovelace; Email: ada@example.com; Message: Hello!; then Submit
Output: {"name":"Ada Lovelace","email":"ada@example.com","message":"Hello!"}

Input: Edit Message after submission
Output: The fields update; the last submitted JSON stays unchanged until Submit is selected again.