open-form create

npx open-form create event-registration
npx open-form create event-registration --title "Event Registration"
npx open-form create event-registration --theme editorial
npx open-form create event-registration --locale zh-TW

Writes forms/<id>/index.tsx with a small starter form and forms/<id>/theme/index.ts, the form's own look, and prints its preview path, /f/<id>. Without --theme the look file is empty, which is the plain base look. With --theme, it holds that theme's tokens: colors and the dark palette, fonts, radius, width, spacing and color scheme, plus the web fonts those tokens name. The theme's other web fonts, such as a code font or a font for another script, are copied to theme/fonts/ without an import, ready for any CSS borrowed from the theme. The theme's CSS and components aren't copied; your agent takes only the parts the form uses. See Themes.

The id must be kebab-case: lowercase letters, digits and -. It becomes the folder name and the public URL. create stops if forms/<id> already exists.

Flags

The starter

import { defineForm, Email, Form, Submit, Text, Textarea } from '@open-form-build/core';
import theme from './theme/index.ts';

export const config = defineForm({
  title: 'Event Registration',
  description: 'Tell us a little about yourself.',
});

export default function EventRegistrationForm() {
  return (
    <Form theme={theme}>
      <Text name="name" label="Name" required autoComplete="name" />
      <Email name="email" label="Email" required />
      <Textarea name="message" label="Message" maxLength={2000} />
      <Submit>Send</Submit>
    </Form>
  );
}

import { defineTheme } from '@open-form-build/core';

export default defineTheme({});

The component is named after the id with Form at the end (contact-form becomes ContactForm), so it never collides with a component it imports, such as Form or Email, or with a global like Date. A default export named like an Open Form component would render itself, so check, dev and build stop with an error asking for another name.

Replace the body with your own questions, or let your agent take it from here. Agents following /create-form can scaffold with create or write the files directly.