Plain JS Embedding

Start of documentation content

Formally supports non-React integration through a plain JavaScript API.


  • A published form made in the form builder

Embedding will provide a snippet of HTML for you to use.

Generally speaking the HTML will resemble this...

<div data-formally="your-form-id"></div>
<script src=""></script>
<link href="" />


The Plain JS SDK is under development. Feedback to is appreciated.


Provide a data-formallylicence attribute with the licence string. Ie,

<div data-formally="your-form-id" data-formallylicence="YOUR_LICENCE"></div>
<script src=""></script>
<link href="" />

Default values

Default values can be provided as JSON inside the <div> tag as,

<div data-formally="your-form-id" data-formallylicence="YOUR_LICENCE">
  <script type="application/json" data-formallydefaultvalues>
      "field-id": "default value"
<script src=""></script>
<link href="" />

onSubmit and onSubmitComplete handler

import { WindowAPI as FormallyWindowAPI } from 'formally';

const formId = 'your-form-id';

((window as any)[`formally-${formId}`] as FormallyWindowAPI) = {
  onSubmit: (props) => {
    alert('onSubmit handler');

    return {
      type: 'success',
      localisedMessage: '',
  onSubmitComplete: (submitResponse, props) => {
    console.log(submitResponse, props);
    alert('onSubmitComplete handler');

Storing unsubmitted answers in storage

Formally can save unsubmitted answers in browser storage (localStorage).

Answers will be saved automatically if you're using "data-formally" however if you're using JSON then you can provide a key.

Provide a data-formallycachekey attribute with a value that is unique to your form (ie, data-formallycachekey="dog-form"). This will be used for a localStorage key.