// src/routes/contact/+page.server.js
export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const email = data.get('email');
    const message = data.get('message');

    // ...save it server-side (DB, email service, etc.)...
    console.log('Received from', email, ':', message);

    return { success: true };
  },
};


<!-- src/routes/contact/+page.svelte -->
<script>
  import { enhance } from '$app/forms';

  // `form` holds the action's return value after submission.
  let { form } = $props();
</script>

<h1>Contact</h1>

{#if form?.success}
  <p>Thanks — your message was sent!</p>
{:else}
  <form method="POST" use:enhance>
    <input name="email" type="email" placeholder="Your email" required />
    <textarea name="message" placeholder="Your message" required></textarea>
    <button>Send</button>
  </form>
{/if}

<!--
  Notes:
  - The form is a standard <form method="POST"> posting to the default
    action in +page.server.js — it works even with NO JavaScript
    (progressive enhancement), SvelteKit's signature data-out pattern.
  - use:enhance (from $app/forms) upgrades it when JS is available:
    submits via fetch with no full-page reload, and exposes the action's
    return value as the `form` prop.
  - The action reads fields via request.formData().get('name') — the
    name attributes on the inputs are what it looks up.
  - The action runs ONLY on the server (.server.js), the right place for
    saving data / using secret keys.
-->