Compléter un PDF existant depuis un formulaire WordPress

Récemment pour un cas client, j’ai eu la demande suivante :
« Nous disposons d’un fichier PDF avec des champs à remplir par les clients. Nous souhaitons que les clients remplissent un formulaire sur notre site et qu’à la fin de celui-ci, il soit capable de générer le PDF en question mais complété avec les informations renseignées dans le formulaire »

Autant vous dire que j’ai creusé pas mal de temps avant de trouver la solution miracle, qui fonctionne plutôt bien et cela gratuitement avec notre CMS favoris : WordPress !

Voyons comment 🙂

1 – Prérequis

– Votre installation WordPress (logique hein…)
– Votre PDF
Formidable Forms
Formidable PRO2PDF
– Le site PDF Escape, qui va nous permettre de créer des champs éditables sur le PDF.

2 – Préparation du fichier PDF

Rendez-vous sur le site PDF Escape, puis on choisit la première option « Free Online ».

Ensuite on sélectionne « Upload PDF to PDFEscape ».
Une fois le PDF chargé, on va choisir l’option « Form Field » à gauche et on ne choisira que celle-ci pour tous les champs d’ailleurs.

Pour sélectionner un champ qui devra être complété dans la première boite de dialogue, il faut choisir le type de champ, moi je prends un champ texte.

Une fois le type de champ sélectionné, pour l’appliquer sur l’endroit qui sera complété, il faut cliquer puis faire glisser avec la souris toute la zone ou le texte sera écrit. En gros, comme quand vous voulez sélectionner plusieurs éléments sur votre ordinateur.

Puis, quand votre zone vous semble bonne, tout en haut de la page, vous pouvez apercevoir une petite clé à molette, cliquez dessus.

Le champ que j’ai sélectionné se nomme « Numéro de dossier » , donc veillez à le noter également dans les propriétés via la molette dans la case « Name », cela nous sera utile pas la suite 😉

Une fois tous les champs configurés, cliquez sur la flèche verte dans la barre de gauche « Save & Download PDF… »

3 – Création du formulaire avec Formidable Forms.

Je pars du principe que l’extension Formidable Forms est installée et activée sur votre WordPress.
Si vous connaissez les constructeurs de contact form pour WordPress vous allez vite comprendre.

Dans mon cas (pour l’exemple), je vais créer uniquement un champ « Texte » que je vais appeler « Numéro de dossier » (comme sur mon PDF et qui correspond également au texte écrit sur mon PDF).
Et c’est tout, à vous après d’adapter la création de votre formulaire en fonction des éléments que vous souhaitez remplir dans le PDF ;).
Je nomme mon formulaire pour ne pas le confondre, et j’enregistre !

4 – Correspondance des champs du formulaire sur le fichier PDF.

Attaquons nous maintenant à dire que quand la case du formulaire « Numéro de dossier » est renseignée, à l’envoi de celui-ci cela devra être écrit dans le champ « Numéro de dossier » sur mon fichier PDF !

Rendez-vous sur le plugin Formidable PRO2PDF.
Dans l’onglet « Export », plus bas, dans le second encadré:
– Name of Field Map : Renseigner ici le nom du fichier PDF généré (on pourra voir dans un tuto plus poussé comment renommer en fonction de l’utilisateur le fichier PDF).
– Select PDF file to work with : ici à vous d’envoyer le fichier PDF crée à l’étape 2 !
– Select form to work with : Choisir le formulaire que nous venons de créer à l’étape 3.

Enregistrer les changements.

Maintenant, en bas vous pouvez voir un espace ou nous allons « mapper » tous les champs crées dans notre formulaire vers les champs crées sur le PDF.
Sur la capture on peut voir que mon champ formulaire 21 « Numéro de dossier », je veux que ces informations partent sur le PDF dans le champ « untitled5 ».

Si vous ne renommez pas comme il faut vos champs comme expliqué lors de l’étape de la création des champs du PDF, vous aurez des champs « UntitledX » comme vous pouvez le voir 🙂

Une fois vos réglages enregistrés, vous pouvez constater que « Formidable PRO2PDF » vous génère un shortcode, enregistrez le !

5 – Réglages du formulaire et téléchargement du fichier PDF.

Nos champs formulaire > fichier PDF sont correctement mappés, nous allons appliquer un réglages sur notre formulaire « Formidable Forms » afin de lui dire que lorsque nous validons le formulaire, je veux qu’il génère le fichier PDF et le fasse télécharger.

Pour se faire, on se rend sur le formulaire crée, puis dans Réglages > Général.

Ici dans la boite « Messages » « Sur soumission », on va venir coller le shortcode enregistré précédemment.

Dans la boite juste en dessous, dans « Divers » « Clé de formulaire » on viens écrire l’ID de notre « Formidable PRO2PDF », vous avez cet ID dans le shortcode précédent : form= »VOTREID ».

Mettez à jour, il ne vous reste plus qu’à insérer le formulaire dans votre page Web et vos clients pourront récupérer le PDF complété :).

Le tutoriel est fait pour découvrir rapidement cette fonctionnalité.
Si vous avez un besoin précis, comme envoyer le fichier par mail au client ou à vous, changer le nom du fichier généré etc etc..
N’hésitez pas à le mentionner en commentaire.
Si vous le souhaitez également et s’il y a de la demande je peux réaliser ce tutoriel en vidéo.

Compléter un PDF existant depuis un formulaire WordPress
4.7 (93.33%) 12 votes

Cet article a 11 commentaires

  1. bonjour
    Super ton tuto mais pour moi cela ne marche pas. Tout est ok jusqu’a l »étape 4!
    Je me pose plein de questions !!
    à l’étape 4, je n’ai pas mes champs de mon pdf généré dans la section PDF from field name.
    Le fichier généré, on le reçois lors de la soumission du formulaire ?

    as tu fais un autre tuto comme j’ai vu que tu en avais parlé sur un forum ?
    merci
    bonne journée

  2. re-bonjour

    bon cela ne marche toujours pas mais j’ai réussis à avancer un peu.
    Mais en fait, moi j’aurai besoin de recevoir le PDF après que le client remplisse le formulaire .(le client n’en a pas besoin )
    Est ce possible ?

    1. Je pourrais te faire une petite explication début de semaine pro !

  3. bonjour
    peut on rajouter un système de paiement avant d’envoyer le pdf ?
    je voudrais que le client remplisse le formulaire, qu’il paye et que je reçoive le pdf.
    merci
    bonne journée

    1. Bonjour,
      Avec la version pro de Formidable Forms, il semble que l’on doit pouvoir, vu que l’on a du PayPal et Stripe ajoutés 😉

  4. bonjour
    je n’arrive toujours pas a faire marcher le plugin correctement.
    A l’étape 3 tu dis : ‘je vais créer uniquement un champ « Texte » que je vais appeler « Numéro de dossier » ‘.
    C’est peut être ici que je me trompe , tu le met ou exactement le nom « Numéro de dossier » ?
    dans le champ Field Key ?
    merci de ton aide
    Bonne journée

    1. Bonjour,
      Non cette étape consiste juste à créer le champ de type texte dans Formidable Forms. En gros tu crées ici les champs qui sont visibles dans le PDF que tu souhaites remplir.
      Le matchage des zones du PDF et des champs crées dans Formidable Forms se font à l’étape 4

      1. bonjour
        oui mais il faut bien mettre le même nom que dans le fichier pdf pour le matchage. Et c’est justement ce nom dans mon formulaire que je ne suis pas sur de le mettre au bon endroit !! OULA bizarre cette phrase 🙂

        1. Pas forcément vu qu’après tu vas aussi pouvoir faire matcher à la main.
          Teste sur un champ sur le PDF et sur le formulaire Formidable Form, vas-y tranquillement !

  5. Bonjour,
    Tout d’abord merci bcp pour ce tuto car c’est exactement ce dont j’avais besoin.
    Par contre j’ai qqs soucis :
    1)les cases à cocher ou boutons radio ne s’affichent pas dans mon fichier pdf final (même si la correspondance des champs ds FormidablePRO2pdf est ok)
    2)Lorsque j’ai rempli mon formulaire html et que je valide, je clique sur download et le pdf qui apparait m’affiche des données anciennes pas celles que je viens de rentrer)
    3)Dans Formidable PRO2pdf il est écrit « You can generate only 1 PDF form, because your server has to have pdftk installed for PDF generation. Please install it. Alternatively, you can activate Formidable PRO2PDF if you want to use more forms. » Donc ma question est est ce que je suis obligée d’installer PDFtk chez mon hébergeur que si je veux utiliser plusieurs formulaires? ( sachant que je ne veux utiliser qu’un seul formulaire).
    Merci bcp pour votre aide!

  6. Bonjour,

    Merci pour cet article très utile.
    Cela dit, j’aimerai savoir comment faire pour envoyer le fichier par mail à la personne et à moi même, et aussi comment personnaliser le nom du fichier ?

    Merci d’avance

Laisser un commentaire

×
×

Panier