ONLYOFFICE : apprendre comment intégrer des formulaires à remplir dans une page Web

Cet article explique comment intégrer un formulaire dans une page Web. Par exemple, vous avez une page Web et vous voulez qu'elle affiche un formulaire qui peut être rempli et téléchargé en tant que PDF. Il faut que chacun puisse ouvrir le formulaire et le remplir sans déranger les autres, et donc sans avoir à collaborer sur le dossier. Nous vous montrons l'exemple de la suite bureautique open source ONLYOFFICE et de sa fonctionnalité de formulaires récemment introduite.

Avec formulaires ONLYOFFICE, vous pouvez créer, modifier et éditer de manière collaborative des documents avec des champs à remplir en ligne et de les envoyer à d'autres personnes pour qu'elles les remplissent.

Il est possible de créer des modèles de formulaires de toutes pièces ou à partir de fichiers DOCX existants. Vous pouvez insérer divers champs (champ de texte, boîte combo, liste déroulante, case à cocher, bouton radio, image) et modifier leurs propriétés, et en même temps les éditer comme n'importe quel document bureautique ordinaire. Consultez ce tutoriel pour apprendre à créer des formulaires étape par étape.

Vous pouvez enregistrer le fichier au format DOCXF pour créer, modifier et collaborer sur le fichier avec votre équipe. Le document final peut être enregistré aux formats OFORM ou PDF. Le premier est un format conçu pour l'envoi en ligne de formulaires à remplir. Dans ce format, l'utilisateur ne peut remplir que les champs obligatoires, le texte lui-même ne peut pas être modifié. L'enregistrement du fichier dans le format PDF permet de remplir le document avec les logiciels standard.

Trouvez et ouvrez le fichier index.html du serveur de documents ONLYOFFICE. Puis connectez-le à l'API du serveur de documents. Vous devez spécifier les paramètres de configuration pour ouvrir le modèle de formulaire (fichier DOCXF).

<script type="text/javascript" 
        src="http://0.0.0.0:8080/web-apps/apps/api/documents/api.js"></script>
<button onclick="open_form_template()">Open Form Template</button>
<div id="placeholder"></div>
<script>
function open_form_template() {
    // Close the editor in case it is open.
    if (this.docEditor) {
        this.docEditor.destroyEditor()
    }
    // Add the link 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 and open the editor.
    this.docEditor = new DocsAPI.DocEditor("placeholder",
    {
        “document”: {
            “fileType”: “docxf”,
            “key”: key,
            “title”: “Form Template”,
            “url”: url
        },
        “documentType”: “word”
    });
}
</script>

Une fois fait, un modèle de formulaire peut être ouvert pour être édité. Après avoir modifié ce document, vous pouvez enregistrer le formulaire. Pour ce faire, cliquez sur le bouton « Enregistrer comme OFORM ».

Vous devez ajouter un bouton nommé Open Form qui ouvre le formulaire à remplir. Ensuite, ajoutez la fonction open_form_template().

<script type="text/javascript" 
        src="http://0.0.0.0:8080/web-apps/apps/api/documents/api.js"></script>
<button onclick="open_form()">Open Form</button>
<div id="placeholder"></div>
<script>
function open_form_template() {
    // Close the editor in case it is open.
    if (this.docEditor) {
        this.docEditor.destroyEditor()
    }
    // Add the link 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 and open the editor.
    this.docEditor = new DocsAPI.DocEditor("placeholder",
    {
        “document”: {
            “fileType”: “oform”,
            “title”: “Form”,
            “url”: url
        },
        “documentType”: “word”
    });
}
</script>

Maintenant, un formulaire peut être ouvert pour être rempli. Après avoir saisi les valeurs dans les champs (ceux qui sont obligatoires sont mis en évidence par une bordure rouge), vous pouvez obtenir un fichier PDF à partir de l'éditeur. À cet effet, cliquez sur le bouton « Télécharger comme ».

Il faut tenir compte du fait que le champ clé n'est pas transmis à la configuration des éditeurs dans la méthode d'ouverture d'un formulaire à remplir. Ce champ sera automatiquement généré comme un nombre aléatoire. Cela permet de rendre indépendantes toutes les sessions d'ouverture du formulaire. Ainsi, la collaboration sur le fichier du formulaire est désactivée. Personne ne pourra remplir votre copie du formulaire avec vous.

Les formulaires ainsi que les éditeurs pour les documents texte, les feuilles de calcul et les présentations peuvent être ajoutés à votre propre solution. ONLYOFFICE peut être intégré avec WOPI ou API. Les développeurs de la solution proposent aussi les connecteurs prêts à l'emploi pour Nextcloud, ownCloud, Alfresco, Confluence, eXo, Moodle, xWIKI, Seafile, Chamilo, Nuxeo et autres.

Outre la version en ligne de ONLYOFFICE Docs, les formulaires peuvent également être traités dans les applications de bureau, qui sont disponibles sur tous les systèmes Windows, Linux et macOS. De même, les applications mobiles peuvent être utilisées pour remplir rapidement les formulaires en déplacement.

Pour mieux comprendre ce que sont les formulaires et comment se présentent les documents remplis, une bibliothèque de formulaires gratuite est disponible sur le site Web onlyoffice.

Nous tenons à remercier Malick pour la mise au gabarit et escartefigue pour la relecture orthographique.