Gathering detailed insights and metrics for formsnap
Installations
npm install formsnapDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Min. Node Version
>=18
Node Version
20.18.1
NPM Version
10.8.2
Releases
Unable to fetch releases
Contributors
1
validate.email 🚀
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Download Statistics
Total Downloads
1,103,367
Last Day
6,851
Last Week
37,253
Last Month
159,526
Last Year
1,008,631
Maintainers
1
Package Meta Information
Latest Version
2.0.0
Package Id
formsnap@2.0.0
Unpacked Size
60.91 kB
Size
12.75 kB
File Count
43
NPM Version
10.8.2
Node Version
20.18.1
Published on
Dec 13, 2024
Total Downloads
Cumulative downloads
Total Downloads
1,103,367
Last Day
18.7%
6,851
Compared to previous day
Last Week
1.2%
37,253
Compared to previous week
Last Month
19.5%
159,526
Compared to previous month
Last Year
964.7%
1,008,631
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
2
Formsnap
The goal of this library is to make working with the already incredible sveltekit-superforms even more pleasant, by wrapping it with accessible form components.
Installation
1npm i formsnap sveltekit-superforms <your-schema-library>
Usage
You'll handle the initial Superforms setup just as you normally would, where you define a schema and return the form from your load function.
1. Define a Zod schema
1// schemas.ts 2import { z } from "zod"; 3export const settingsFormSchema = z.object({ 4 email: z.string().email(), 5 bio: z.string().max(250).optional(), 6 marketingEmails: z.boolean().default(true), 7 language: z.enum(["en", "es", "fr"]).default(["en"]), 8 theme: z.enum(["light", "dark"]).default(["light"]), 9});
2. Return the form from your load function
1// +page.server.ts 2import { superValidate } from "sveltekit-superforms"; 3import { zod } from "sveltekit-superforms/adapters"; 4import type { PageServerLoad } from "./$types"; 5import { settingsFormSchema } from "./schemas"; 6 7export const load: PageServerLoad = async () => { 8 return { 9 form: await superValidate(zod(settingsFormSchema)), 10 }; 11};
3. Construct the form in your page
1<script lang="ts"> 2 import { Field, Label, FieldErrors, Control, Description, Fieldset, Legend } from "formsnap"; 3 import { settingsFormSchema } from "./schemas"; 4 import { superForm } from "sveltekit-superforms"; 5 import { zodClient } from "sveltekit-superforms/adapters"; 6 7 export let data; 8 9 const form = superForm(data.form, { 10 validators: zodClient(settingsFormSchema), 11 }); 12 13 const { form: formData, enhance } = form; 14</script> 15 16<form method="POST" use:enhance> 17 <Field {form} name="email"> 18 <Control let:attrs> 19 <Label>Email</Label> 20 <input type="email" {...attrs} bind:value={$formData.email} /> 21 </Control> 22 <Description>We'll provide critical updates about your account via email.</Description> 23 <FieldErrors /> 24 </Field> 25 26 <Field {form} name="bio"> 27 <Control let:attrs> 28 <Label>Bio</Label> 29 <textarea bind:value={$formData.bio} {...attrs} /> 30 </Control> 31 <FieldErrors /> 32 </Field> 33 34 <Field {form} name="language"> 35 <Control let:attrs> 36 <Label>Language</Label> 37 <select {...attrs} bind:value={$formData.language}> 38 <option value="en">English</option> 39 <option value="es">Spanish</option> 40 <option value="fr">French</option> 41 </select> 42 </Control> 43 <FieldErrors /> 44 </Field> 45 46 <Field {form} name="marketingEmails"> 47 <Control let:attrs> 48 <Label>Receive marketing emails from us</Label> 49 <input type="checkbox" {...attrs} bind:checked={$formData.marketingEmails} /> 50 </Control> 51 <FieldErrors /> 52 </Field> 53 54 <Fieldset {form} name="theme"> 55 <Legend>Select your theme</Legend> 56 {#each ["light", "dark"] as theme} 57 <Control let:attrs> 58 <input {...attrs} type="radio" bind:group={$formData.theme} value={theme} /> 59 <Label>{theme}</Label> 60 </Control> 61 {/each} 62 <FieldErrors /> 63 </Fieldset> 64 65 <button type="submit">Submit</button> 66</form>
Check out Formsnap.dev for more documentation.
No vulnerabilities found.
No security vulnerabilities found.