Como incorporar formulários preenchíveis do ONLYOFFICE em uma página da web

Você pode facilmente adicionar um formulário online ao seu site, disponibilizando-o para preenchimento e download em PDF. Leia este post e aprenda como fazer.

Uma breve introdução

Nós achamos que você já está familiarizado com nossos formulários. Se não, aqui está um lembrete rápido. A partir da versão 7.0 do ONLYOFFICE Docs, você pode criar, editar e colaborar em fóruns on-line, permitir que outros usuários os preencham.

A partir da versão 8.0, mudamos para o PDF como padrão da indústria, aproveitando todas as vantagens do nosso formato nativo. Assim, no ONLYOFFICE forms, trabalha com dois formatos principais. O DOCX F destina-se à criação de modelos de formulário a partir de um ficheiro DOCX em branco ou existente. Os formulários prontos são salvos e distribuídos em PDF.

Como abrir o DOCX para edição a partir do site

Encontre e abra o index.html arquivo do seu servidor de documentos ONLYOFFICE. Em seguida, conecte-o à API do servidor de documentos. É necessário especificar parâmetros de configuração para abrir um modelo de formulário.

<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>

Uma vez feito isso, um modelo de formulário pode ser aberto para edição. Depois de editar este arquivo, você pode obter o próprio formulário. Para fazer isso, clique no botão “Salvar como pdf”.

Como abrir PDF para preenchimento do site

É necessário adicionar um botão que abra o formulário para preenchimento. Em seguida, adicione o 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 + ”.pdf”;
    const key = filename + ”.pdf”;
    // Create DocsAPI object with the document config and open the editor in the placeholder element.
    this.docEditor = new DocsAPI.DocEditor("placeholder",
    {
        “document”: {
            “fileType”: “pdf”,
            “title”: “Form”,
            “url”: url
        },
        “documentType”: “pdf”
    });
}
</script>

Leve em consideração que a key o campo não é passado para a configuração dos editores. Este campo será gerado automaticamente como um número aleatório. Isto permite tornar independentes todas as sessões de abertura do formulário. Portanto, a colaboração no arquivo PDF está desativada. É por isso que qualquer pessoa pode abrir o formulário e preenchê-lo sem incomodar os outros.

Uma vez feito, um formulário pode ser aberto para preenchimento. Depois de preencher os campos (os obrigatórios são destacados com a borda vermelha), é possível imprimir ou baixar o formulário em PDF.