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.jsfile. - Add the User Access Token from the preview setup step to the
api.jsfile. - 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.