Forms

Contact form

Name, email, topic and message in labelled fields with help text, and a submit button. Field wires every id and description.

8 components50 linesServer safeSource on GitHub

Live demo

Full width · the frame has its own viewport, so the breakpoints are real

What it uses

Button Container Field Input Section Select Stack Textarea

Imports

import { Button, Container, Field, Input, Section, Select, Stack, Textarea } from '@the_viveksingh/vivek-ui'

The block

This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.

import {
  Button,
  Container,
  Field,
  Input,
  Section,
  Select,
  Stack,
  Textarea,
} from '@the_viveksingh/vivek-ui'

export default function FormContact() {
  return (
    <Section>
      <Container size="sm">
        <Section.Header
          eyebrow="Contact"
          title="Tell us what you need"
          description="A person replies within one working day."
        />
        <form onSubmit={(event) => event.preventDefault()}>
          <Stack gap={4}>
            <Field label="Your name" required>
              <Input autoComplete="name" />
            </Field>
            <Field label="Work email" required help="We only use it to reply.">
              <Input type="email" autoComplete="email" />
            </Field>
            <Field label="Topic">
              <Select
                options={[
                  { value: 'sales', label: 'Sales' },
                  { value: 'support', label: 'Support' },
                  { value: 'partnership', label: 'Partnership' },
                ]}
                placeholder="Choose one"
              />
            </Field>
            <Field label="Message" required>
              <Textarea rows={5} />
            </Field>
            <div>
              <Button type="submit">Send message</Button>
            </div>
          </Stack>
        </form>
      </Container>
    </Section>
  )
}

← All 62 blocks