Factorial Code Form Installation

Let’s get started by embedding the simplest version of a Factorial Code form, and later we’ll explore the full form configuration.

Embedding the Form

There are two methods to embed a form on any external webpage:

Using our JavaScript SDK that replaces DOM elements with forms
Using the FcodeForm ReactJS component

In both cases, you’ll need two mandatory parameters:

fcode-team-slug: Your team slug, available on your workspace URL https://code.factorialhr.com/platform/<fcode-team-slug>
fcode-process-slug: Your process slug, shown in the Slug field of the process Dashboard. For example, send-welcome-email

Use the process slug, not the process ID: the slug is the same in every workspace, so moving a form from one workspace to another (for example from staging to production) only requires changing the team slug. The process ID is a UUID that differs per workspace.

One optional parameter is worth knowing about from the start:

fcode-process-version: A process version tag or version alias to run instead of the current version. See pinning a form to a process version.

Method 1: Embed a Form using our JavaScript SDK

The first step is to place this snippet into the head tag of your website.

<script defer="defer" src="https://code.factorialhr.com/sdk/forms.js"></script>

It can be loaded globally on your website or just on the webpages where you want to embed forms.

Init forms using data attributes
Init forms using Fcode.initForm function

By default, the SDK looks for any DOM element containing the data attributes data-fcode-form-team and data-fcode-form-process and replaces each element with the full form rendering.

This is the simplest version of a form:

<div
  data-fcode-form-team="<fcode-team-slug>"
  data-fcode-form-process="<fcode-process-slug>"
></div>

Another approach to embed a form with our SDK is by calling a function exposed by the SDK. This function receives the DOM element selector and a JSON with the configuration:

<div id="my-fcode-form"></div>
<script>
  Fcode.initForm("#my-fcode-form", {
    team: "<fcode-team-slug>",
    process: "<fcode-process-slug>",
  });
</script>

If you prefer to provide the DOM element itself, that is also supported:

<div id="my-fcode-form"></div>
<script>
  Fcode.initForm(document.getElementById("my-fcode-form"), {
    team: "<fcode-team-slug>",
    process: "<fcode-process-slug>",
  });
</script>

Method 2: Embed a form using `FcodeForm` ReactJS component

Install as an NPM package using your favourite package manager:

yarn add @factorialco/fcode-react-forms

pnpm install --save @factorialco/fcode-react-forms

Import the component and render it in your ReactJS app:

import FcodeForm from "@factorialco/fcode-react-forms";

const MyComponent = () => {
  return (
    <FcodeForm
      team={"<fcode-team-slug>"}
      processId={"<fcode-process-slug>"}
    />
  );
};

The processId prop takes the process slug (it also accepts a process ID, for backwards compatibility).

If you are using a Server-Side Rendering framework like NextJS, use dynamic components with no SSR:

import dynamic from "next/dynamic";

const FcodeForm = dynamic(() => import("@factorialco/fcode-react-forms"), {
  ssr: false,
});

const MyComponent = () => {
  return (
    <FcodeForm
      team={"<fcode-team-slug>"}
      processId={"<fcode-process-slug>"}
    />
  );
};

Rendering with f0 components

If your app already runs Factorial’s f0 design system, the @factorialco/rjsf-f0 package renders the form with real f0 components — inputs, selects, checkboxes, buttons — instead of the SDK’s own theme:

pnpm install --save @factorialco/rjsf-f0

Pass the theme as rjsfTheme and set theme: "none" in the options:

import FcodeForm from "@factorialco/fcode-react-forms";
import { Theme as F0RjsfTheme } from "@factorialco/rjsf-f0";
import "@factorialco/rjsf-f0/styles.css";

const MyComponent = () => {
  return (
    <FcodeForm
      team={"<fcode-team-slug>"}
      processId={"<fcode-process-slug>"}
      rjsfTheme={F0RjsfTheme}
      options={{ theme: "none", locale: "en" }}
    />
  );
};

theme: "none" stops the SDK from injecting its standalone stylesheet, which resets inherited styles and would fight your app’s own.

The package only ships the layout rules for the parts the form composes, so your app is still responsible for f0 itself: render F0Provider above the form and import @factorialco/f0-react/dist/styles.css. Its peer dependencies are react, react-dom, @rjsf/core 6, @rjsf/utils 6 and @factorialco/f0-react 4.39+ — @rjsf/core and @rjsf/utils have to be direct dependencies of your app, because the theme leaves them external.

Some fields are not f0 yet: file fields keep the native <input type="file">, range renders as a number input, and the sourceCode field keeps its Monaco editor.