Embedding forms into a web page

ONLYOFFICE forms are available in two main formats. DOCXF is intended for creating form templates from blank or any existing DOCX file. The OFORM format is used for filling out the ready forms.

These instructions help you add an online form to your website, making it available for filling in and downloading as PDF.

Please note that these instructions will only work when JWT is disabled. Starting from version 7.2, JWT is enabled by default, so you need to disable it. More information about token can be found here.

Editing forms
Filling forms

To open an online form in the DOCXF format for editing from your website, follow the steps below:

Find and open the index.html file of your ONLYOFFICE Docs.
Connect it to the Document Server API by specifying the path to the API JavaScript file:
Add the button element to open a form template:
Add the div element where the editor will be opened:
```
<div id="placeholder"></div>
```

Add the script to close the editor in case it is open:

if (this.docEditor) {
    this.docEditor.destroyEditor()
}

const url = "https://example.com/url-to-example-document.docxf";

Create the key to identify the file for co-editing:

Add the script initializing the Document Editor with the configuration for the document you want to open and open the editor in the placeholder element:

this.docEditor = new DocsAPI.DocEditor("placeholder",
{
    "document": {
        "fileType": "docxf",
        "key": key,
        "title": "Form Template",
    },
    "documentType": "word"
});

The full code fragment looks like this:

<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>
<button onclick="open_form_template()">Open Form Template</button>
<script>
    function open_form_template() {
        if (this.docEditor) {
            this.docEditor.destroyEditor()
        }
        const url = "https://example.com/url-to-example-document.docxf";
        const key = filename + ".docxf";
        this.docEditor = new DocsAPI.DocEditor("placeholder",
        {
            "document": {
                "fileType": "docxf",
                "key": key,
                "title": "Form Template",
                "url": url
            },
            "documentType": "word"
        });

Once done, a form template can be opened for editing. After editing this file, you can get the form itself. To do so, click the Save as oform button.

How to open OFORM for filling from website

To make an online form in the OFORM format available for filling in and downloading as PDF from your website, follow the steps below:

Find and open the index.html file of your ONLYOFFICE Docs.

Connect it to the Document Server API by specifying the path to the API JavaScript file:

<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>

Add the button element to open the form:

<button onclick="open_form()">Open Form</button>

Add the script to close the editor in case it is open:

if (this.docEditor) {
    this.docEditor.destroyEditor()
}

Create the full URL address to the form template you need to open:

const url = "https://example.com/url-to-example-document.oform";

Create the key to identify the file
```
const key = filename + ".oform";
```
Please note that the key field is not passed to the configuration of the editors. This field will be automatically generated as a random number. This allows making all sessions of opening the form independent. So, collaboration on the OFORM file is disabled. That’s why anyone can open the form and fill it out without disturbing others.

Add the script initializing the Document Editor with the configuration for the document you want to open and open the editor in the placeholder element:

this.docEditor = new DocsAPI.DocEditor("placeholder",
{
    "document": {
        "fileType": "oform",
        "title": "Form",
        "url": url
    },
    "documentType": "word"
});

The full code fragment looks like this:

Once done, a form can be opened for filling. After filling in the fields (the required ones are highlighted with the red border), you can get a PDF file. To do so, click the Save as PDF button.