Applications 3 steps · 16 fields

Talk proposal (CFP)

Call for papers: talk title, format, level, abstract, reviewer notes and speaker bio.

Launch for free

Get a hosted link and a responses inbox in a minute. No backend, no credit card.

Or set it up yourself

Live preview

Form definition JSON · 174 lines

{  "id": "talk-proposal",  "title": "Submit a talk",  "submit": { "label": "Submit proposal" },  "steps": [    {      "id": "talk",      "title": "Your talk",      "fields": [        {          "key": "title",          "type": "text",          "label": "Talk title",          "validation": { "required": true, "maxLength": 100 }        },        {          "key": "format",          "type": "radio",          "label": "Format",          "options": [            {              "value": "lightning",              "label": "Lightning talk, 5 to 10 minutes"            },            { "value": "talk", "label": "Talk, 25 to 40 minutes" },            {              "value": "workshop",              "label": "Workshop, 2 hours or more"            }          ],          "validation": { "required": true }        },        {          "key": "level",          "type": "radio",          "label": "Audience level",          "layout": "inline",          "options": [            { "value": "beginner", "label": "Beginner" },            { "value": "intermediate", "label": "Intermediate" },            { "value": "advanced", "label": "Advanced" }          ],          "validation": { "required": true }        },        {          "key": "track",          "type": "select",          "label": "Track",          "options": [            { "value": "engineering", "label": "Engineering" },            { "value": "product-design", "label": "Product and design" },            { "value": "leadership", "label": "Leadership and culture" },            { "value": "case-study", "label": "Case studies" },            {              "value": "not-sure",              "label": "Not sure, let the committee decide"            }          ],          "validation": { "required": true }        },        {          "key": "abstract",          "type": "textarea",          "label": "Abstract",          "rows": 6,          "helperText": "Public. This is what attendees read in the schedule.",          "validation": {            "required": true,            "minLength": 100,            "maxLength": 1500          }        }      ]    },    {      "id": "review",      "title": "For reviewers",      "fields": [        {          "key": "outline",          "type": "textarea",          "label": "Outline",          "rows": 5,          "helperText": "Not public. How the talk flows and what people will take away."        },        {          "key": "givenBefore",          "type": "radio",          "label": "Have you given this talk before?",          "layout": "inline",          "options": [            { "value": "no", "label": "No, it’s new" },            { "value": "yes", "label": "Yes" }          ],          "validation": { "required": true }        },        {          "key": "recording",          "type": "text",          "label": "Link to a recording",          "placeholder": "https://",          "show": [{ "field": "givenBefore", "eq": "yes" }]        },        {          "key": "firstTalk",          "type": "radio",          "label": "Is this your first conference talk?",          "layout": "inline",          "show": [{ "field": "givenBefore", "eq": "no" }],          "options": [            { "value": "yes", "label": "Yes" },            { "value": "no", "label": "No" }          ]        },        {          "key": "travel",          "type": "radio",          "label": "Will you need help with travel costs?",          "layout": "inline",          "options": [            { "value": "yes", "label": "Yes" },            { "value": "no", "label": "No" },            { "value": "maybe", "label": "Maybe" }          ],          "validation": { "required": true }        }      ]    },    {      "id": "speaker",      "title": "About you",      "fields": [        {          "key": "name",          "type": "text",          "label": "Full name",          "validation": { "required": true }        },        {          "key": "email",          "type": "email",          "label": "Email",          "inputMode": "email",          "validation": { "required": true }        },        {          "key": "company",          "type": "text",          "label": "Company or affiliation"        },        {          "key": "bio",          "type": "textarea",          "label": "Short bio",          "rows": 4,          "helperText": "Public. Third person, two or three sentences.",          "validation": { "required": true, "maxLength": 600 }        },        {          "key": "profile",          "type": "text",          "label": "Website or social profile",          "placeholder": "https://"        },        {          "key": "coSpeaker",          "type": "text",          "label": "Co-speaker name and email",          "helperText": "Leave empty if you’re presenting alone."        }      ]    }  ]}

Use it with the npm packages

Copy the JSON into a file in your app, install the renderer and pass the definition to it. The same JSON works with @formhaus/vue.

npm i @formhaus/core @formhaus/react

tsx

import { FormRenderer } from '@formhaus/react';
import '@formhaus/core/style.css';
import definition from './form.json';

export function Form() {
  return (
    <FormRenderer
      definition={definition}
      onSubmit={(values) => console.log(values)}
    />
  );
}

See Getting started for validation, steps and custom components.

Talk proposal (CFP)

Use it with the npm packages ​

Use it with the npm packages