Comment intégrer des formulaires ONLYOFFICE dans une page web

Vous pouvez facilement ajouter un formulaire en ligne à votre site Web, afin qu’il puisse être rempli et téléchargé au format PDF. Lisez ce billet de blog et apprenez comment le faire.

Une brève présentation

Nous supposons que vous connaissez déjà nos tout nouveaux formulaires. Si ce n’est pas le cas, voici un petit rappel. À partir de la version 7.0 d’ONLYOFFICE Docs, vous pouvez créer, éditer et collaborer sur des formulaires en ligne, et laisser d’autres utilisateurs les remplir.

Dès la version 8.0, nous avons adopté le format PDF comme standard de l’industrie tout en conservant tous les avantages de notre format d’origine. Ainsi, dans les formulaires ONLYOFFICE, vous travaillez avec deux formats principaux. DOCXF est destiné à créer des modèles de formulaires à partir de fichiers DOCX vierges ou existants. Les formulaires prêts sont sauvegardés et distribués au format PDF.

Ouvrir le fichier DOCXF pour l’éditer à partir d’une page web

Trouvez et ouvrez le fichier index.html de votre ONLYOFFICE Document Server. Ensuite, connectez-le à l’API de Document Server. Vous devez spécifier les paramètres de configuration pour ouvrir un modèle de formulaire.

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

Une fois cela fait, un modèle de formulaire peut être ouvert pour être édité. Après avoir édité ce fichier, vous pouvez obtenir le formulaire lui-même. Pour ce faire, cliquez sur le bouton “Enregistrer en pdf”.

Comment ouvrir un fichier PDF pour le remplir à partir d’un site web

Vous devez ajouter un bouton 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> 
   // 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>

Il faut tenir compte du fait que le champ clé n’est pas transmis à la configuration des éditeurs. Ce champ sera automatiquement généré sous la forme d’un nombre aléatoire. Cela permet de rendre indépendantes toutes les sessions d’ouverture du formulaire. Ainsi, la collaboration sur le fichier PDF est désactivée. Tout le monde peut donc ouvrir le formulaire et le remplir sans déranger les autres.

Une fois cette opération effectuée, un formulaire peut être ouvert pour être rempli. Après avoir rempli les champs (les champs obligatoires sont mis en évidence par une bordure rouge), il est possible d’imprimer ou de télécharger le formulaire PDF.