Form Provider

Properties Overview

• name (String): Unique name for the form.

• action (String): URL where the form data will be posted upon submission.

• headers (Array): Custom headers for the form's submission request.

  • key (String): Header key (e.g., Content-Type).

  • value (String): Header value (e.g., application/json).

• children (ComponentInstance): Specifies the child components inside the form.

• disabled (Boolean): Disables the form when set to true.

• buttonGap (Number): Gap between buttons inside the form.

• button (Array): Components for different form states.

  • Default Button: Button displayed by default.

  • Success Button: Button displayed on successful submission.

  • Error Button: Button displayed on failed submission.

  • Loading Button: Button displayed during submission.

  • Disabled Button: Button displayed when form is disabled.

• success (Object): Configuration for success message or redirect action.

  • action (Enum): Determines whether to show a message or redirect to a URL.

  • message (String): Custom success message. Displays server response if empty.

  • redirect (Link): URL to redirect upon success.

  • style (Object): CSS styles for the success message.

• error (Object): Configuration for error message or redirect action.

  • action (Enum): Determines whether to show a message or redirect to a URL.

  • message (String): Custom error message. Displays server response if empty.

  • redirect (Link): URL to redirect upon error.

  • style (Object): CSS styles for the error message.

Implementation

Basic Setup

1. To integrate the FormProvider component into your project, Copy and use it inside the Framer design environment.

2. Build your form inputs in a stack. You can use Framers default inputs or make use of ours.

3. Design and add your Buttons.

Here is a code example of a completed FormProvider

<FormProvider
  name="complex-form"
  action="https://example.com/submit"
  headers={[
    { key: "Content-Type", value: "application/json" },
  ]}
  buttonGap={10}
  button={[
    <DefaultButton />,
    <SuccessButton />,
    <ErrorButton />,
    <LoadingButton />,
    <DisabledButton />,
  ]}
  success={{
    action: "redirect",
    redirect: "https://example.com/success"
  }}
  error={{
    action: "message",
    message: "Oops! Something went wrong.",
    style: { color: "red" }
  }}
>
  <InputField name="email" placeholder="Enter your email" />
  <SubmitButton />
</FormProvider>

Notes

• Component States: Ensure you provide all five button components to cover different form states: default, success, error, loading, and disabled.

• Form Action: Make sure the action property of the form points to a valid endpoint that can handle form submissions.

• Custom Styles: The success and error messages can be uniquely styled using the style property within their respective objects to match the form’s design.

• Asynchronous Operations: The form handles asynchronous submission and displays different states/buttons accordingly.

Server response object:

{
  message : string
  status: "success" | "error"
  data: any
}