Skip to main content

YepCode Form Installation

Let's get started by embedding the simplest version of a YepCode 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 YepCodeForm ReactJS component

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

  • yepcode-team-id: Your team ID, available on your workspace URL https://cloud.yepcode.io/<yepcode-team-id>
  • yepcode-process-id: Your process ID, available on your process URL https://cloud.yepcode.io/<yepcode-team-id>/processes/<yepcode-process-id>. For example, fd7f9a83-2d3d-1af8-6c3f-b9caa68531b1

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://yepcode.io/sdk/forms.js"></script>

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

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

This is the simplest version of a form:

<div
data-yepcode-form-team="<yepcode-team-id>"
data-yepcode-form-process="<yepcode-process-id>"
></div>

Method 2: Embed a form using YepCodeForm ReactJS component

info

It supports ReactJS versions 17 and 18

  • Install as an NPM package using your favourite package manager:
yarn add @yepcode/react-forms

or

npm install --save @yepcode/react-forms
  • Import the component and render it in your ReactJS app:
import YepCodeForm from "@yepcode/react-forms";

const MyComponent = () => {
return (
<YepCodeForm
team={"<yepcode-team-id>"}
processId={"<yepcode-process-id>"}
/>
);
};
note

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

import dynamic from "next/dynamic";

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

const MyComponent = () => {
return (
<YepCodeForm
team={"<yepcode-team-id>"}
processId={"<yepcode-process-id>"}
/>
);
};