Developers
Start building
Themes/Theme SDK/Modules/forms/Parts

Parts

The parts of @poltura/theme-sdk/forms.

On this page
import { … } from '@poltura/theme-sdk/forms';

FormField

One field of the surrounding form with its label, control, help and error; nothing while hidden.

FormField(props: FormFieldProps): ReactElement | null

Props: FormFieldProps

Example

import { FormField, StoreForm, SubmitButton } from '@poltura/theme-sdk/forms';

export function ShortContact() {
  return (
    <StoreForm handle="contact">
      <FormField id="email" />
      <FormField id="message" />
      <SubmitButton />
    </StoreForm>
  );
}

FieldControl

The platform control of one field: input, text area, choices, checkbox, date or file picker.

FieldControl(props: FieldControlProps): ReactElement

Props: FieldControlProps

Example

import { FieldControl, FormField } from '@poltura/theme-sdk/forms';

export function FramedMessage() {
  return (
    <FormField id="message">
      {(state) => (
        <div className="rounded border p-3">
          <FieldControl field={state.field} value={state.value} error={state.error} onChange={state.setValue} />
        </div>
      )}
    </FormField>
  );
}

SubmitButton

The surrounding form's send button, which moves to the next step on multi-step forms.

SubmitButton(props: SubmitButtonProps): ReactElement

Props: SubmitButtonProps

Example

import { FormField, StoreForm, SubmitButton } from '@poltura/theme-sdk/forms';

export function Callback() {
  return (
    <StoreForm handle="callback">
      <FormField id="phone" />
      <SubmitButton>Call me back</SubmitButton>
    </StoreForm>
  );
}

FormTrigger

A button that opens a published form in a dialog or side panel, loading it on hover.

FormTrigger(props: FormTriggerProps): ReactElement

Props: FormTriggerProps

Example

import { FormTrigger } from '@poltura/theme-sdk/forms';

export function QuoteButton() {
  return (
    <FormTrigger handle="quote" display="drawer" width="wide">
      Request a quote
    </FormTrigger>
  );
}

FormPopup

Opens a merchant's form by itself after a delay, as often as frequency allows; draws nothing.

FormPopup(props: FormPopupProps): ReactElement | null

It never opens in the editor, on checkout, or while the store holds visitor popups back.

Props: FormPopupProps

Example

import { FormPopup } from '@poltura/theme-sdk/forms';

export function NewsletterPrompt() {
  return <FormPopup handle='newsletter' delaySeconds={20} frequency='days' />;
}

NewsletterTrigger

A button that opens the newsletter sign-up in a dialog or side panel; nothing when the newsletter is off.

NewsletterTrigger(props: NewsletterTriggerProps): ReactElement | null

Props: NewsletterTriggerProps

Example

import { NewsletterTrigger } from '@poltura/theme-sdk/forms';

export function JoinButton() {
  return <NewsletterTrigger display="drawer">Join the list</NewsletterTrigger>;
}
Last updated