Formpaste

Formulario de reservas en SvelteKit

Añade un formulario de reservas a tu sitio SvelteKit sin ruta de servidor. Recopila una fecha y hora preferidas en un componente de Svelte, y las solicitudes llegan a tu bandeja de entrada para confirmar. Sin backend propio.

Como construirlo

  1. Crea un formulario en tu panel de Formpaste y copia su clave de acceso.
  2. Copia el componente de Svelte de arriba en una página o componente de SvelteKit.
  3. Reemplaza YOUR_ACCESS_KEY_HERE con tu clave de acceso y despliega.

Prompt para tu agente de programación con IA

Add a Formpaste booking request form to my SvelteKit app. Use a Svelte component with name, email, preferred date, preferred time, and notes that POSTs as application/x-www-form-urlencoded (URLSearchParams) to https://api.formpaste.com/submit with a hidden access_key input. No server route. This requests a booking, it does not manage a calendar.

O conecta el servidor MCP de Formpaste con Claude Code, Codex, Cursor, Claude Desktop, VS Code o cualquier cliente mcp-remote. Ver la guía de configuración.

Puntos claves de SvelteKit

SvelteKit te da rutas de servidor y form actions, pero para un formulario no las necesitas. Un formulario de Formpaste es un componente de Svelte que hace POST directamente a Formpaste, así que no hay una acción +page.server.ts ni una ruta +server.ts que escribir. Funciona con SSR o con un build estático de adapter-static.

Sin ruta de servidor ni form action

No necesitas una acción +page.server.ts ni un endpoint +server.ts. El componente hace POST directamente al endpoint de Formpaste, lo que mantiene la app desplegable en cualquier sitio, incluido un build totalmente estático de adapter-static.

Es un componente de Svelte

SvelteKit es Svelte, así que el formulario es un componente de un solo archivo con bind:value y un manejador on:submit|preventDefault. Usa el código de Svelte del selector de arriba, funciona igual dentro de SvelteKit.

La mejora progresiva es opcional

Los form actions de SvelteKit con use:enhance son excelentes para tus propios endpoints, pero aquí el endpoint es Formpaste. Un simple fetch con on:submit|preventDefault es más sencillo y no necesita código de servidor tuyo.

SSR o estático, el mismo formulario

Como el formulario hace POST a un endpoint externo, funciona ya sea que despliegues con SSR o como sitio estático. Ningún código de servidor tuyo se ejecuta al momento del envío.

Que debes acertar

Un formulario solicita una reserva, no gestiona un calendario

Esto recopila una fecha y hora preferidas y te las envía por correo para confirmar. No verifica disponibilidad ni evita el doble reservado. Si necesitas disponibilidad en tiempo real, usa una herramienta de programación y deja que este formulario maneje las solicitudes más simples.

Especifica la zona horaria

Incluye tu zona horaria en la etiqueta o en una nota para que una hora solicitada no sea ambigua. Una reserva con tres horas de diferencia no le sirve a nadie.

Confirma antes de que sea real

Trata cada envío como una solicitud hasta que respondas para confirmar. Configura el reply-to al solicitante para que confirmar sea una sola respuesta.

Cómo funciona

Tres pasos simples para que los envíos de formularios lleguen a tu bandeja de entrada.
Crea tu formulario, apunta la URL de action al endpoint de Formpaste y añade tu clave de acceso.

1

Crea tu formulario

Regístrate, verifica tu correo y crea una clave de acceso en tu panel.

2

Copia el código

Pega el fragmento de arriba en tu proyecto. Elige CSS o Tailwind para que combine con tu sitio.

<script lang="ts">
  let status: "idle" | "sending" | "ok" | "error" = "idle";

  async function onSubmit(e: SubmitEvent) {
    status = "sending";
    const form = new FormData(e.target as HTMLFormElement);
    const res = await fetch("https://api.formpaste.com/submit", { method: "POST", body: new URLSearchParams(form as any) });
    status = res.ok ? "ok" : "error";
  }
</script>

{#if status === "ok"}
  <p>Thanks - your message was sent.</p>
{:else}
  <form on:submit|preventDefault={onSubmit} class="mx-auto flex w-full max-w-md flex-col gap-4 rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-950">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
  <label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Nombre
    <input type="text" name="name" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
  </label>
  <label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Correo electrónico
    <input type="email" name="email" placeholder="tu@ejemplo.com" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
  </label>
  <label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Fecha preferida
    <input type="text" name="date" placeholder="YYYY-MM-DD" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
  </label>
  <label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Hora preferida
    <input type="text" name="time" placeholder="ej. 2pm" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
  </label>
  <label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Notas
    <textarea name="notes" class="min-h-28 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100"></textarea>
  </label>
    <button type="submit" class="w-full rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-gray-800 disabled:opacity-60 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200" disabled={status === "sending"}>Solicitar reserva</button>
    {#if status === "error"}<p>Something went wrong. Please try again.</p>{/if}
  </form>
{/if}
3

Añade tu clave de acceso

Reemplaza el marcador por tu clave de acceso para empezar a recibir envíos.

<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

Formulario de reservas en SvelteKit FAQ

Pega un formulario. Recibe envíos.

Al instante, sin configurar ningún backend, servidor ni base de datos. 250 envíos/mes gratis, sin tarjeta de crédito.

Empezar gratisLeer la documentación

Otros formularios de SvelteKit

Generación de leads
Multi-paso
Boletín