Forms

"use client"
import { FormActions, FormFields, FormSuccess, PandaFormRoot, usePandaForm } from "@pandaidx/widgets/client"

const StepHeading = () => {
  const { step, stepCount, stepInfo, submitted } = usePandaForm()
  if (submitted) return null
  return (
    <header className="mb-8">
      <p className="text-sm opacity-60">{step + 1} / {stepCount}</p>
      {stepInfo.title ? <h2 className="text-4xl">{stepInfo.title}</h2> : null}
      {stepInfo.description ? <p className="mt-2 opacity-70">{stepInfo.description}</p> : null}
    </header>
  )
}

export const QuizForm = ({ formId }: { formId: string }) => (
  <PandaFormRoot formId={formId} size="lg" fieldVariant="underline" buttonWidth="auto">
    <StepHeading />
    <FormFields />
    <FormActions nextLabel="OK" />
    <FormSuccess />
  </PandaFormRoot>
)
// Step titles and descriptions come from the form (dashboard builder or create_form `steps`). The same form works inline, in a dialog or behind a floating video badge.

<PandaFormRoot spot="contact" buttonWidth="auto">
  <FormProgress />
  <FormStep step={1}>
    <div className="grid gap-4 md:grid-cols-2"><FormField name="name" /><FormField name="email" /></div>
  </FormStep>
  <FormStep step={2}>
    <FormField name="phone" />
    <FormField name="message" />
  </FormStep>
  <div className="flex items-center gap-4"><FormBack /><FormSubmit nextLabel="Continue" /></div>
  <FormLegal />
  <FormSuccess />
</PandaFormRoot>
// Steps come from the form (create_form `step` per field, or the dashboard builder's row Step); FormStep only places them.

"use client"
import { usePandaForm } from "@pandaidx/widgets/client"

// Every Panda form has a required name and email: render both (your inputs or FormField).
export const QuickLead = () => {
  const { fields, values, setValue, errors, submit, submitting, submitted, failure } = usePandaForm()
  if (submitted) return null
  const field = (mapping: string) => fields.find((entry) => entry.crmFieldMapping === mapping)
  return (
    <div className="flex flex-col gap-2">
      {["name", "email"].map((mapping) => {
        const input = field(mapping)
        return input ? <input key={input.id} placeholder={input.label} value={String(values[input.id] ?? "")} onChange={(event) => setValue(input.id, event.target.value)} aria-invalid={Boolean(errors[input.id])} /> : null
      })}
      <button type="button" disabled={submitting} onClick={() => void submit()}>Send</button>
      {failure ? <p role="alert">{failure}</p> : null}
    </div>
  )
}
// <PandaFormRoot spot="newsletter"><QuickLead /><FormSuccess /></PandaFormRoot>