Log inSign up
andreterron avatar
Public
HTTP (deprecated)
Fork
1 Like
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Sign up with GitHub
Readme

Receive form responses

Live demo: https://andreterron-form_demo.web.val.run/

Create a form that posts to your val:

<form action="https://andreterron-form_handler.web.val.run" method="post">
     <label for="username">Val Town username:</label>
     <input name="username" type="text">
     <button type="submit">Submit</button>
</form>

And get your results stored as an array:

Create val
// set by andreterron.form_handler at 2023-08-10T21:04:43.364Z
let formResponses = [{
  "username": "andreterron",
},
{
  "username": "stevekrouse",
}];

Usage

  1. Fork this val and click the 🔒 to set it as "Unlisted"
  2. Open the val menu → Endpoints → "Copy web endpoint"
  3. Use that url as the action attribute of your form

Check out the example val: https://www.val.town/v/andreterron.form_demo

Storage of form submissions

This val saves to another val (@me.formResponse), which has a 100kb limitation (250kb for pro users), if you want to store them in a more scalable solution, check out our guides

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
let { formResponses } = await import("https://esm.town/v/andreterron/formResponses");
export async function form_handler(req: Request) {
const data: any = Object.fromEntries((await req.formData()).entries());
//
formResponses = (formResponses ?? []).concat(
data,
);
console.email(data, "Form response received!");
//
return html(`<div
style="display:flex;
font-family: sans-serif;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
flex-direction: column;">
<span style="font-size: 32px; font-weight: bold;">Thanks for submitting the form!<span>
</div>`);
}
andreterron-form_handler.web.val.run
October 23, 2023