Embed a form builder with React

In this guide, we'll show how to embed a form builder with React using the Joyfill React forms SDK, and offer a world-class form solution in minutes.

You can think of Joyfill as a sort of Stripe or Twilio, but for forms.

How to embed a form builder with React + Joyfill

Step 1: Create Joyfill Account
Step 2: Generate Your userAccessToken
Step 3: Create Your First Template
Step 4: Get your template identifier
Step 5: Install

If you don't need a tutorial and just want to get started, please consider reading the quickstart docs instead.

Why Joyfill’s embeddable form builder?

Forms require a lot more engineering time, resources, and ongoing maintenance than you would first expect. Building a flexible, reliable, and scalable form solution is hard, time-consuming, and comes with a lot of unknown features. Conditional logic, revision management, multi-device compatibility, user collaboration, field validation, export engine, template library, just to name a few.

This is where we come in. With Joyfill you can deploy a form builder in under 15 minutes, and we take care of all of the above and more.

The Prerequisites

Just follow the steps below and you'll be up and running shortly.

Step 1: Create Joyfill Account

To begin working with Joyfill, go to Joyfill's Platform and create an account (jump to step 2 if you already have an account). By creating an account you will add yourself as the first user to your newly created Joyfill Organization and be placed inside the Joyfill Manager.

Step 2: Generate Your userAccessToken

Once you're inside the Joyfill Manager you will want to select from the top navigation bar “Settings & Users” > “Manager Users” > and click the "Access Tokens" button next to your user. Once the modal appears select "Add Access Token". Copy and securely store your access token for later use.

Step 3: Create Your First Template

Create your first template within the Joyfill Manager by going to the Template Library tab in the top navigation and click the "Add Template".

We recommend following this guide Create Your First Template when creating your first template. This makes it easy to experiment with the different parts of the Joyfill Platform easily.

Step 4: Get your template identifier

Inside the Joyfill Manager you will want to select from the top navigation bar Template Library and under your Templates table list within the column ID copy that for pasting into our example React/JS guides.

Embed the form builder

By now you should have the following items:

• Completed the Setup Guide
• A User Access Token (see setup guide)
• A Template Identifier (see setup guide)

Requirements

• React and React DOM v17+
• Review SDK README

Step 5: Install the form builder

//npm
npm install --save @joyfill/components

//yarn
yarn add @joyfill/components

Step 6: Usage

• Add the Template identifier from the previous setup step to the App.js file.
• Add the User Access Token from the preview setup step to the api.js file.

App.js:

import React, { useState, useEffect } from 'react';
import { retrieveTemplate } from './api.js';

/**
 * Import JoyDoc SDK
 */
import { JoyDoc } from '@joyfill/components';

function App() {

  const [ template, setTemplate ] = useState(null);

  /**
   * Add your template identifier
   */
  const identifier = '<REPLACE_WITH_TEMPLATE_IDENIFIER>';

  /**
   * Retrieve template via the Joyfill API 
   */
  useEffect(() => {

    const handleRetrieveTemplate = async () => {
      const response = await retrieveTemplate(identifier);
      setTemplate(response);
    };

    handleRetrieveTemplate();

  }, []);

  return (
    <JoyDoc
      mode="edit"
      doc={template}
      onChange={(changelogs, data) => {

        /**
         * Changelogs represent the individual change that was made
         * Data represents the entire data structure with all new changes applied.
         */
        console.log('>>>>>>>: ', changelogs, data);

      }}
    />
  );
}

export default App;

api.js:

const userAccessToken = "<REPLACE_USER_ACCESS_TOKEN>";
const apiBaseUrl = "https://api-joy.joyfill.io";

export const retrieveTemplate = async (identifier) => {

  //See API Doc Here: https://docs.joyfill.io/reference/retrieve-a-template
  const response = await fetch(`${apiBaseUrl}/v1/templates/${identifier}`, {
    method: 'GET',
    mode: 'cors',
    headers: {
      Authorization: `Bearer ${userAccessToken}`,
      'Content-Type': 'application/json'
    },
  });

  const data = await response.json();
  return data;
}

React form builder guide summary

Hopefully, this guide was comprehensive enough and conveyed the simplicity of Joyfill’s form SDK to help you add our next-gen form builder to your React application. This guide provides instructions on incorporating a form builder into React applications using the Joyfill React forms SDK. This simplifies the process of creating a robust form solution within a matter of minutes. Initially, Joyfill is introduced as a form platform for react developers. This guide emphasizes the benefits of using Joyfill's embeddable form builder, highlighting the time, resources, and maintenance it saves compared to building a form solution from scratch. It also provides detailed steps for each prerequisite and installation, along with code snippets for usage in React applications. Additionally, it lists the requirements for using the Joyfill SDK and provides links to relevant documentation and example projects for further exploration.

Try it yourself

If you’re looking for a full react example project that shows many more of the Joyfill SDK capabilities and workflows then head over to our full example project and try it for yourself.

• Joyfill React Example
• SDK NPM Package