Compléter un PDF existant depuis un formulaire WordPress

Catégorie :

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.

J’ai depuis, trouvé une nouvelle méthode, par les mêmes créateurs que PRO2PDF, mais avec un plugin plus à jour qui est plus facile d’utilisation !

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.

 Articles par catégories
Nos articles sont utiles ?

Vous pouvez faire une donation :)

1 mois offert sur votre abonnement !
10% de remise avec le code BIENVENUE

Bénéficiez d'une remise de 20% !

20% de remise sur mon offre de maintenance de site Wordpress/WooCommerce !

Cet article a 22 commentaires

  1. Jerome

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

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

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

  3. jerome espere

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

      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. jerome espere

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

      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. jerome espere

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

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

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

    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

  7. sylvain

    Bonjour, bravo pour ce tuto simple mais complet et compréhensible.

    j’aurais juste une petite question. comment valider le téléchargement du pdf final uniquement sans l’envoyer à une quelconque adresse.

    merci

  8. Guillaume

    Bonjour, déjà Josselyn merci, deuxième fois que tes articles m’aide beaucoup, et sont les seuls a m’apporter des solutions.
    Mais du coup, j’ai encore un problème, à l’étape 5, après MESSAGES > Sur soumission , j’entre le short code de « Formidable PRO2PDF » , ensuite j’ai bien une boite qui s’ouvre, mais pas de « Divers » ni même de « Clé de formulaire », il y a sans doute eu des modifications du plugin entre ton article et aujourd’hui, mais as tu une solution ? J’ai essayer de faire sans, mais du coup ça me fait télécharger mon PDF vierge, donc sans intérêt.

    Merci !

    1. Josselyn

      Bonjour, content de t’avoir aidé.
      Hélas la je ne pourrais pas plus t’aider, je n’utilise plus ce plugin et en effet il y a du avoir pas mal de changements depuis la rédaction de l’article qui date (14 février 2018)

      1. Conrad

        Bonjour Josselyn,

        Super ton article. Dis, puisque tu n’utilise plus ce plugin en aurais-tu un autre à nous conseiller ou une configuration différente pour faire ce que tu indiques dans l’article.

        Merci

        1. Josselyn

          hello Conrad, le fait que je ne l’utilise plus ne veut pas dire que cela ne doit plus fonctionner…
          C’est le but de ce plugin, de ce fait je ne vois pas pourquoi cela ne fonctionnerait plus 😉
          Juste que je n’ai pas eu besoin de l’utiliser à nouveau depuis la rédaction de cet article !

  9. benjamin c

    Bonjour,
    Je souhaiterais faire tout comme ton tuto mais à la fin envoyer le formulaire par mail au propriétaire du site.
    Saurais tu comment faire ?
    Merci d’avance

    1. Josselyn

      Bonjour Benjamin,
      As-tu lu ce que j’ai mis récemment sur cet article ? Il y a désormais un plugin plus facile d’utilisation, je te conseil de jeter un coup d’oeil tu devrais arriver à faire ce que tu veux plus facilement !

  10. yan_s556

    Hello,

    bravo pour ton post, c’est vraiment super et ça nous a bien servi.
    J’aimerai découvrir comment transmettre le formulaire par email vers plusieurs adresse email?
    je n’ai pas vu le lien vers ce complément de tuto?

    en tout merci à toi.
    Good job

    1. Josselyn

      Bonjour,

      C’est normal car le tutoriel n’existe pas.

  11. Pedro

    Bonjour Josselyn,
    Pourrais tu partager l’info de comment avec le nouveau plugin on peut partager le fichier pdf par mail?

Laisser un commentaire