ONLYOFFICE 7.0: online forms, password protection in sheets, collaboration improvements and much more
ONLYOFFICE 7.0 released

How to embed fillable ONLYOFFICE forms into a web page

Originally published at: How to embed fillable ONLYOFFICE forms into a web page | ONLYOFFICE Blog

You can easily add an online form to your website, making it available for filling in and downloading as PDF. Read on this post and learn how to do it.

How to embed fillable ONLYOFFICE forms into a web page

A brief intro

We guess you are already familiar with our brand-new forms. If not, here is a quick reminder. Starting from version 7.0 of ONLYOFFICE Docs, you can create, edit and collaborate on online forms, let other users fill them out, and save forms as PDF.

In ONLYOFFICE forms, you work with 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.

How to open DOCXF for editing from website

Find and open the index.html file of your ONLYOFFICE Document Server. Then, connect it to the Document Server API. You need to specify configuration parameters for opening a form template.

<script type="text/javascript" 
        src="http://0.0.0.0:8080/web-apps/apps/api/documents/api.js"></script> 
   // Specify the path to the API JavaScript file.
<button onclick="open_form_template()">Open Form Template</button> 
   // Add a button to open the form.
<div id="placeholder"></div> 
   // Add the element where the editor will be opened.
<script>
function open_form_template() {
    // 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 = window.location.protocol + "//" +
    window.location.hostname + “:” + window.location.port + ”/” + filename + ”.docxf”;
    // Add the key to identify the file for co-editing.
    const key = filename + ”.docxf”;
    // Create DocsAPI object with the document config and open the editor in the placeholder element.
    this.docEditor = new DocsAPI.DocEditor("placeholder",
    {
        “document”: {
            “fileType”: “docxf”,
            “key”: key,
            “title”: “Form Template”,
            “url”: url
        },
        “documentType”: “word”
    });
}
</script>

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

You need to add a button which opens the form for filling. Then, add the open_form_template() function.

<script type="text/javascript" 
        src="http://0.0.0.0:8080/web-apps/apps/api/documents/api.js"></script> 
   // Specify the path to the API JavaScript file.
<button onclick="open_form()">Open Form</button> 
   // Add a button to open the form.
<div id="placeholder"></div> 
   // Add the element where the editor will be opened.
<script>
function open_form_template() {
    // Close the editor in case it is open.
    if (this.docEditor) {
        this.docEditor.destroyEditor()
    }
   // Create the full URL address to the form you need to open.
    const url = window.location.protocol + "//" +
    window.location.hostname + ”:” + window.location.port + ”/” + filename + ”.oform”;
    const key = filename + ”.oform”;
    // Create DocsAPI object with the document config and open the editor in the placeholder element.
    this.docEditor = new DocsAPI.DocEditor("placeholder",
    {
        “document”: {
            “fileType”: “oform”,
            “title”: “Form”,
            “url”: url
        },
        “documentType”: “word”
    });
}
</script>

Take into consideration 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.

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.

How to embed ONLYOFFICE forms into a web page

Useful links

API documentation

How to create fillable forms

OFORM & DOCXF formats explained

Free forms library

7 interesting facts about ONLYOFFICE forms

ONLYOFFICE for developers