embed form builder with javascript

Embed a form builder with Javascript

Posted at h in Developers by

In this guide, we’ll show how to embed a form builder with Javascript using the Joyfill Javascript 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 Javascript + 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)

Lastly, we suggest you Review SDK README.

Step 5: Install the form builder

Using a package manager:

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

//yarn
yarn add @joyfill/components

Using a CDN:

<https://cdn.jsdelivr.net/npm/@joyfill/components@latest/dist/joyfill.min.js>

Step 6: Usage

  • Add the Template identifier and User Access Token from the previous setup step to the index.js file.
  • Add the User Access Token from the preview setup step to the api.js file.
  • Important Note: ensure you use the full import path if you’re using JS modules and not the CDN. Full path import Joyfill from '@joyfill/components/dist/joyfill.min.js'

Index.js:


import Joyfill from "@joyfill/components/dist/joyfill.min.js";
import { retrieveTemplate } from './api.js';

const initJoyfill = async () => {

  const identifier = '<REPLACE_YOUR_TEMPLATE_IDENTIFIER>';

  const template = await retrieveTemplate(identifier);

  Joyfill.JoyDoc(
    document.getElementById('joyfill'),
    {
      doc: template,
      mode: 'edit',
      onChange: (changelogs, doc) => {

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

}

initJoyfill();

Index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Joyfill for Javascript Example</title>
    <base href=".">
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="joyfill"></div>
    <script type="module" src="./index.js"></script>
  </body>
</html>

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;
}

And, that’s it! We hope you’ve enjoyed this embed form builder for Javascript guide.

Javascript form builder guide summary

This guide has walked you through embedding a form builder using Javascript with the Joyfill JS forms SDK. By following six clear steps, including creating a Joyfill account, generating a userAccessToken, creating a template, obtaining the template identifier, and installing the form builder, you can quickly deploy a world-class form solution in just 15 minutes.

Joyfill’s embeddable form builder eliminates the need for extensive engineering efforts, resources, and ongoing maintenance associated with building forms from scratch.

For a more hands-on approach, you can explore the provided code examples and review the SDK README. Additionally, the guide directs you to the quickstart docs for those who prefer to skip the tutorial and get started quickly. If you’re interested in more advanced examples and workflows, you can explore the full React example projects available on GitHub for both JS module and CDN usage, as well as the SDK NPM package.

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.

Related Articles

You may also be interested in reading the following related form builder guides:
Embed a form builder with React
Embed a form builder with React Native
Embed a form builder with Swift
Embed a form builder with Kotlin
Embed a form builder with Angular