Forms all around the world.
<form edge="key">
<input placeholder="Your email" name="email" type="email" />
<button type="submit">Join waitlist</button>
</form>
Temporary link: edgeforms.fluriumteam.workers.dev
- Join waitlist: text, email
- Contact form: text, long-text, email
- Survey: different fields
- Resume upload: text, radio, file
- Newsletter: email
- Fill form to check: dropdown, range, radio
I want to support innovative ways to make form submitions as well as already stable ones.
This is innovative way. HTMX become more and more popular tool with it's philosofy: server just send html and swap it inside of DOM. Inspired by it, EdgeForms will create similar library.
So when user submit form:
- page doesn't refresh.
- js send request to EdgeForms.
- EdgeForms proccess submition.
- and returns new html based on result of submition.
You can still style elements inside of form by just using selector:
form[edge] input {
padding: 1rem;
}
With tailwind:
form[edge] input {
@apply p-4;
}
The benefits:
- your form have validation on EdgeForms
- no redirects and page refeshes
- simple
- one source of truth
- more customizable validation
Downfalls:
- requires js
- need to copy form, so it's not empty at first render (may be optimized by compilation step or some cli tool)
Just submit forms in regular way with action
and method
on form. Html will look like this:
<form ction="/simple/tsnc-lbyb-klyy-zk52" method="post">
<input placeholder="Your email" name="email" type="email" />
<button type="submit">Join waitlist</button>
</form>
It will redirect to page with status of submission (success or fail).
- less customizable
- redirects
- doesn't require js
Regular API which will return JSON. It will allow get full control and easily integrate with frameworks like React. Add small library to make calls to API more typesafe.
- Honeypot: hidden empty field, if not empty then it's bot.
To use in Svelte with typescript: create any file with .d.ts
extension.
Add code below:
import { HTMLFormAttributes } from "svelte/elements"
declare module "svelte/elements" {
export interface HTMLFormAttributes {
edge?: string
}
}
export {}