Plain JS Embedding

Prerequisites

• A published form made in the GetFormally.com form builder

Embedding

GetFormally.com 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="https://form-data.getformally.com/formally.min.js"></script>
<link href="https://form-data.getformally.com/styles.min.css" />

SDK

The Plain JS SDK is under development. Feedback to formally@getformally.com is appreciated.

Licence

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

<div data-formally="your-form-id" data-formallylicence="YOUR_LICENCE"></div>
<script src="https://form-data.getformally.com/formally.min.js"></script>
<link href="https://form-data.getformally.com/styles.min.css" />

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>
</div>
<script src="https://form-data.getformally.com/formally.min.js"></script>
<link href="https://form-data.getformally.com/styles.min.css" />

onSubmit and onSubmitComplete handler

import { WindowAPI as FormallyWindowAPI } from 'formally';

const formId = 'your-form-id';

((window as any)[`formally-${formId}`] as FormallyWindowAPI) = {
  onSubmit: (props) => {
    console.log(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.