Ce tutoriel vous permettra de comprendre et de bien utiliser l’extension Send PDF for Contact Form 7 en lien avec l’extension de formulaire Contact Form 7.
L’extension Send PDF for Contact Form 7 va vous permettre de récupérer les données postées via votre formulaire pour les insérer dans un PDF construit et préparé par vos soins.
Nous allons découvrir ensemble cette extension en 3 étapes :
1 – Le choix du formulaire
2 – Les paramètres généraux
2 – La mise en page de votre PDF
Avant de commencer à vous expliquer les options de cette extension, j’imagine que vous avez déjà créé votre formulaire avec Contact Form 7, et là je ne vais pas vous expliquer comment 🙂
N’oubliez pas de remplir l’option « Email (2) » de votre formulaire Contact Form 7. En effet, l’envoi du PDF et du CSV pour l’option « destinataire » va se faire sur l’e-mail entré sur « Utiliser E-mail (2) ».
Le choix du formulaire
Pour cette partie, c’est simple. Vous avez la liste de vos formulaires déjà créés, il vous suffit de choisir celui que vous souhaitez utiliser pour générer un PDF.
Les paramètres généraux
Nous avons choisis notre formulaire, nous allons maintenant définir quelques options :
- Désactiver la génération d’un fichier PDF : à tout moment je peux arrêter la génération d’un PDF pour ce formulaire, cochez « Non ».
- A qui envoyer le PDF ? Le PDF généré peut être envoyé à l’expéditeur, au destinataire ou bien au deux.
- Désactiver l’insertion dans une base de données ? : les données postées sont enregistrées dans une table. Vous pourrez ensuite récupérer les données dans un fichier csv (on verra cela plus bas).
- Vider la table ? Vous pouvez vider toutes les données insérées dans la table en cochant la case et en enregistrant les modifications.
- Désactiver la génération d’un fichier CSV ? A chaque envoi du formulaire, un fichier csv peut être aussi généré et envoyé en pièces jointes ( 1 fichier / envoi )
- A qui envoyer le CSV ? Le CSV généré peut être envoyé à l’expéditeur, au destinataire ou bien au deux.
- Entrer un nom pour les PDF générés : le nom que portera votre PDF en pièces jointes. Chaque PDF généré dans votre dossier /uploads/ se nommera ainsi : nom-du-pdf.pdf
(en réalité le nom sera nom-du-pdf-56cc7d7167724.pdf Le numéro, appelé plus bas [reference], est généré en php par la fonction uniqid(), une fois le PDF créé, il est copié et renommé en nom-du-pdf.pdf) - Compléter le nom de votre PDF avec les balises de votre formulaire : vous pouvez personnaliser le nom de votre PDF avec les balises de votre formulaire, par exemple [nom]-[prenom] ce qui générera le nom de votre PDF comme ceci : mon-document-john-doe.pdf
—> Important : si vous utilisez des balises du formulaire, n’utilisez pas la redirection direct après envoi du formulaire, cela ne fonctionnera pas. Utilisez plutôt la redirection vers une page.
Vous pouvez utiliser aussi les balises [reference] et [date], le format de la date sera à définir. - Changer le dossier de téléchargement ? Par défaut, le nom du dossier de téléchargement est /wp-content/uploads/*ANNEE*/*MOIS*/, avec cette option, tous les fichiers PDF, CSV et images seront déposés vers /wp-content/uploads/sendpdfcf7_uploads/
- Supprimer tous les fichiers dans le dossier de téléchargement ? Cocher cette case si vous souhaitez vider le dossier /sendpdfcf7_uploads/
- Supprimer chaque fichier PDF après l’envoi de l’e-mail ? Une fois l’e-mail envoyé, cochez cette case si vous ne voulez pas conserver les fichiers.
- Autres fichiers à joindre ? Vous pouvez en plus de votre PDF envoyer d’autres pièces jointes. Il suffit de rentrer dans le champs les URL vers celle-ci. Une pièce par ligne.
- A qui envoyer les autres pièces jointes ? Les autres pièces jointes peuvent être envoyées à l’expéditeur, au destinataire ou bien au deux.
- Sélection d’une page à afficher après l’envoi du formulaire : après soumission du formulaire, vous pouvez rediriger les visiteurs vers une autre page (par exemple une page de remerciement).
- Envoyer l’e-mail sans pièces attachées ? Vous avez la possibilité de ne pas envoyer les pièces jointes par e-mail mais plutôt de proposer un téléchargement après redirection (option ci-dessus) ou de juste de générer les PDF.
- Utiliser un lien dans la page de redirection pour télécharger le PDF ? Vous pouvez afficher un lien de téléchargement du PDF sur la page de redirection (option nécessaire à renseigner), cette option nécessite l’insertion des données en base de données (option à activer)
- Entrer le texte pour le lien : Mettez un texte pour le code court [wpcf7pdf_download] à placer sur votre page de redirection. Plusieurs options sont disponibles pour le code court :
– ‘class’ : vous pouvez définir une class CSS (par défaut : ‘btn btn-large btn-primary’)
– ‘target’ : choisissez votre sortie du lien (par défaut : ‘_blank’)
– ‘type’ : choisissez le type ‘button’ ou ‘text’ (par défaut : ‘button’)
– ‘dashicons’ : utilisez un icone pour agrémenter votre texte (par défaut : ‘dashicons-download’). Mettez ‘none’, si vous n’en voulez pas (voir ce lien pour les icones).
– ‘text’ : entrez le texte à afficher pour télécharger votre PDF (par défaut ‘Télécharger votre PDF’)
Exemple : [wpcf7pdf_download dashicons= »dashicons-admin-tools » text= »Voici votre PDF »] - Rediriger directement vers le PDF après l’envoi du formulaire ? : vous pouvez définir l’action après l’envoi du formulaire, l’ouvrir ou non et dans la même fenêtre ou dans une autre. Cette option désactive la page de redirection sélectionnée.
- Sélectionnez un format de date et heure : vous pouvez insérer un code court [date] et [time] dans votre e-mail ou dans le corps du fichier PDF avec le format que vous souhaitez.
- Désactiver les retours à la ligne automatique : Cela désactive le remplacement de saut de ligne automatique (n et r)
- Désactiver le formulaire d’autocomplétions : Cela désactive la saisie automatique des champs
- Activer l’affichage des données avec la case à cocher ou les boutons radio de votre fichier PDF : possibilité d’afficher sur votre PDF les cases à cocher ou radio.
- Activer les formulaires PDF à remplir (Ne fonctionne pas si votre PDF est protégé) : tous les champs seront apparents
- Protéger votre PDF : Protégez l’ouverture de votre PDF via un mot de passe soit généré à la volée, soit un mode de passe unique pour tous les PDF. Utilisez la balise [pdf-password] dans vos emails pour communiquer ce mot de passe.
La mise en page de votre PDF
C’est la partie la plus complexe. Il faut maintenant créer la présentation de votre PDF. L’extension Send PDF for Contact Form 7 utilise la librairie mPDF, on peut donc insérer du HTML pour créer notre document.
- Image d’entête : vous pouvez insérer une image pour votre entête du document PDF. Vous pouvez choisir le centrage (gauche, centre, droite) et corriger sa taille.
- Image d’arrière plan : vous pouvez mettre en ligne une image pour l’arrière plan de votre PDF avec un choix pour une seule ou toutes les pages.
- CSS personnalisé : entrez du code CSS pour personnaliser encore plus votre PDF.
- Taille de page & orientation : choisissez le format et l’orientation de votre PDF.
- Ajouter un fichier CSS : personnalisez votre PDF avec un fichier CSS (un exemple est fourni).
- Marges globales du PDF : personnalisez vos marges pour le PDF
- Choix du séparateur pour les cases à cocher ou les boutons radio : ajouter un sépateur avant ou après vos checkbox/Boutons radio.
- Pour personnaliser votre PDF, utilisez ces balises :
- [addpage] est une simple balise pour forcer un saut de page n’importe où dans votre PDF.
- Utilisez la balise [date] pour écrire la date où vous voulez dans votre PDF.
- [reference] est une simple balise qui est utilisé pour créer des PDF uniques.
- [ID] est une balise pour récupérer l’ID de la base de données si vous avez autorisé l’enregistrement dans les options.
La génération du PDF passe par la fonction de WordPress wpautop(), ce qui signifie qu’il change les doubles sauts de ligne dans le texte en paragraphes HTML ( <p> … </ p> )
Vous pouvez utiliser les tags issus de votre formulaire. Si vous avez choisis une image d’entête, elle sera automatiquement mise dans votre document. Par défaut, l’extension vous propose les champs et tags simples comme ceux d’une première création de formulaire.
Si vous utilisez des balises [file] et qu’elles sont destinées à afficher les images téléversées par les utilisateurs, entrez-les dans le champs dédié. Elles seront replacées par l’URL des images dans votre PDF. Il suffit ensuite d’utiliser la balise HTML :
<img src="[url-file]" width="300" />pour afficher l’image et non l’URL.
Voici un exemple de test. Dans le champ « Les balises [file] sont pour des images ? »
[file-photo]Puis dans la construction de votre PDF :
<img src="[url-file-photo]" width="300" />
Si vous utiliez des comptes utilisateurs, vous pouvez aussi insérer leur avatar. La balise [avatar] retourne son URL.
<img src="[avatar]" width="50" height="50" />Vous pouvez aussi utiliser FontAwesome
<p><span class="fa"></span>Votre nom : [your-name]</p>
<p><span class="fa"></span>Votre prénom : [your-firstname]</p>
<p><span class="fa"></span> Votre email : [your-email]</p>
Vous souhaitez aussi afficher l’image dans l’e-mail envoyé ? Veillez à ce que la case « Supprimer tous les fichiers dans le dossier de téléchargement ? » ne soit pas cochée, et changez votre balise, uniquement dans la partie e-mail de CF7, comme ceci : [file] par [url-file]
N’oubliez pas, si vous utilisez des dates elle sont retournées en format US, pour les retourner en FR utilisez le tags : [_format_VOTRE-TAG-DE-DATE « d/m/Y »] au lieu de [VOTRE-TAG-DE-DATE].
Lors de votre premier enregistrement des paramètres, un aperçu est généré, vous pouvez visualiser l’aspect général en cliquant sur le bouton « Prévisualiser votre PDF« .
A noter que vous pouvez dans les e-mails d’envoi (à l’expéditeur ou au destinataire) utiliser les tags [reference] pour afficher la référence, [date] pour afficher la date du jour et [url-pdf] pour afficher le lien vers le PDF (ce lien sera complet ex: nom-du-pdf-56cc7d7167724.pdf).
Compatibilité avec Contact Form 7 Signature Addon
L’extension Send PDF for Contact Form 7 est compatible avec Contact Form 7 Signature Addon. Ajoutez la balise [signature] dans le champ « Les balises [file] sont pour des images ? » puis dans la construction du PDF :
// Important : NE PAS mettre 'url-' avant le shortcode
<img src="[signature]" width="250" />Compatibilité avec Signature Field For Contact Form 7 – CF7Sign
L’extension Send PDF for Contact Form 7 est compatible avec Signature Field For Contact Form 7 – CF7Sign. Ajoutez la balise [sign] dans le champ « Les balises [file] sont pour des images ? » puis dans la construction du PDF :
// Important : mettre 'url-' avant le shortcode
<img src="[url-sign]" width="250" />Compatibilité avec Conditional Fields for Contact Form 7
L’extension Send PDF for Contact Form 7 est compatible avec Conditional Fields for Contact Form 7 et sa version PRO. Ajoutez les mêmes balises préparées dans vos e-mails que dans la construction du PDF. Par exemple :
<table>
<tr><td>Type de support</td><td>[support-type]</td></tr>
[technical-support-selected]
<tr><td>operating-system</td><td>[operating-system]</td></tr>
[os-selected]
<tr><td>version</td><td>[version]</td></tr>
[/os-selected]
[os-other-selected]
<tr><td>other-os</td><td>[other-os]</td></tr>
<tr><td>other-version</td><td>[other-version]</td></tr>
[/os-other-selected]
[/technical-support-selected]
[sales-support-selected]
<tr><td>continent</td><td>[continent]</td></tr>
[/sales-support-selected]
</table>Voilà vous savez tout et je pense que vous maîtrisez maintenant cette extension. J’espère qu’il correspondra à vos attentes.
Vous pouvez télécharger l’extension Send PDF for Contact Form 7 ici.
Note : Vous avez trouvé un bug ? Vous avez une idée d’amélioration ? Faîtes le moi savoir sur cette page.
D’abord merci pour ce plugin, il m’a rendu une fière chandelle! j’ai juste un soucis sur l’entête, j’ai choisis un logo et bien vérifié le chemin mais lorsque je prévisualise ou que je le passe en prod à la place de ma photo logo j’ai une petite croix rouge sur fond blanc comme s’il ne trouvait pas le chemin..
Pourriez vous m’aider.
Merci par avance pour votre aide.
Bonjour,
Pouvez-vous me donner le chemin vers votre image ?
Aucun bug n’est à déclarer jusqu’alors sur ce sujet.
Cordialement
Bonsoir,
Merci pour ce superbe plugin bien utile.
J’ai juste une problématique. Le changement de font ne semble pas pris en compte.
Le changement de font est fonctionnel uniquement lorsque je clique sur « prévisualisez votre PDF »
Lorsque je fait un test depuis mon site la font ne change pas – reste sur la font de base.
Merci par avance pour votre aide
Bonjour,
« Send pdf » est vraiment très bien.
Petite question, je souhaiterais changer la reference du pdf dans le fichier csv de sorte qu’il corresponde à une donnée qui m’est propre. Est-ce possible ?
Bonjour,
J’ai un problème simple : la preview de mon PDF est parfaite, mais quand je le génère via le formulaire, la marge du header n’est plus prise en compte (le contenu se place trop haut et est se superpose au header).
Merci d’avance pour votre aide
hello, how can I change the border of the pdf ?, I would like to make it full width
Bonjour,
Merci pour ce plugin qui est très utile pour mettre en place un formulaire d’inscription en ligne dans mon association.
Je voulais utiliser les champs conditionnels présents dans le formulaire pour faire apparaître un texte ou un autre en fonction des réponse dans le pdf.
J’ai essayé ceci :
[group categorie1] text1 [/group]
[group categorie2] text2 [/group]
mais les champs ne sont pas remplacés.
J’ai également essayé d’utiliser du javascript mais je me suis aperçue que le JS n’étais pas interprété par mPDF.
Je voulais donc savoir si il y avait une solution.
Merci d’avance pour votre aide.
Bonjour Florent,
Bon travail; ce plugin est très utile!
J’ai une petite question: quel est le niveau de securité pour le fichier PDF protégé par un mot de passe? Est-ce qu’il y a un algorithme d’encodage utilisé?
Merci,
Catalin
Bonjour,
L’encodage du mot de passe se fait avec la fonction $mpdf->SetProtection();
Plus d’infos : https://mpdf.github.io/reference/mpdf-functions/setprotection.html
Cordialement
Hi everybody,
i really like this plugin, but i have a problem using images in the PDF – document.
I tried to use images in the pdf – document, that are uploaded by the user in the contact form. This was my way to try it:
1. Added a file – field in the contact form:
[file* filename]
The Tag [filename] then appears in the Plugins Amin – Page right above the html area where you can edit the structure of the document.
2. I Wrote this tag « [filename] » in the input field on the plugin – page, where it says: « The [file] tags are for images?… » so i can use it in the document.
3. Then Wrote this in the html – textarea:
«
Result: In the preview, the « temporary Image » is shown. In the PDF – dokument, that is send by the plugin, there is only a little black « X » at the position of the image.
I hope you can help me using the user – uploaded images. 🙂
Hi!
Try this :
« The [file] tags are for images? » [file-photo][file-doc][identite]
And in the html – textarea :
File 1 : [file-photo]
URL 1 : [url-file-photo
Code HTML IMG : img src= »[url-file-photo] » width= »300″
File 2 : [file-doc]
URL 2 : [url-file-doc]
Code HTML IMG :img src= »[url-file-doc] » width= »300″
File 3 : [identite]
URL 3 : [url-identite]
Code HTML IMG : img src= »[url-identite] » width= »300″
Thanks
Hello, I will explain what we trying to do (but I can’t…)
We have a form where we are asking people to write stories in one of the boxes of the form.
Afterwards we give all the stories to a jury for them to select the best one, thats why we want the pdf to be nicely justificated and with line high 20px.
The point is that I am not able to (program the css?) give a proper justification to the text, neither line high to the stories. On the other hand I don’t know whether it is possible or not.
This is what is currently working without any problem, but not justificated:
Title: [title]
Pseudonym: [pseudonym]
[story]
This is one of the last tries that I did but it doesn’t work. I think it is useful for you to realise what I am trying to do (I would like the story to come up in the pdf properly justify and with doble line) Here is my wrong way to do it:
TÍTULO DEL RELATO: [titulo]
PSEUDÓNIMO: [pseudonimo]
{
text-align: justify; line-high 20px;} [story]
Very sorry but I don´t speak French…just Spanish and a broken English…
Thank you very much!!
Le plugin cesse de fonctionner lorsque le plugin Répétable Champs est actif, les champs du PDF sont vides.
Bonjour,
Est-il possible d’exclure du PDF les lignes dont les balises contact form 7 ( [balise] ) sont vides ?
Cordialement,
Pierre Thiollent.
Bonjour,
Perso j’ai utilisé un bout de code CSS (ci-dessous) pour masquer les lignes vides dans mon affichage final.
/* div:empty {
display: none;
} */
Bonjour,
Je dois dire que ce plugin tombe à point nommé pour mon usage !
Je rencontre juste un souci entre le PDF prévisualisé et celui effectivement généré : le logo d’entête se retrouve derrière le texte avec le PDF généré alors que la prévisualisation est parfaite…
J’ai également un souci avec le CSV généré : tous les accents sont mal encodés. Ils apparaissent correctement dans le PDF ainsi que dans les e-mail.
Sûrement une question d’encodage…
Dernier souci : pour la mise en page du PDF, il est indiqué que du simple code HTML peut nous permettre de modifier la trame du document mais la balise par exemple n’a aucun effet.
L’entête que permet de gérer la partie admin ne permet pas de mixer texte et image, faut-il donc passer par le HTML pour y parvenir ?
J’aurai encore sans doute une tonne d’autres questions et je n’ai pas trouvé de forum utilisateurs mais je vais juste me contenter, pour cette fois, de vous féliciter pour ce travail et vous souhaiter de bonnes fêtes de fin d’année.
Aventurier.
This plugin is really nice! Can you tell me where to find the css to change the line-height on the pdf? I would like to have less space between lines. Thank you
Sorry for writing in English, my French is not good enough to explain what I need.
I would like to use Send PDF for CF7 in conjunction with the Conditional Fields for CF7 plugin. So that if for example a field contained ‘Yes’ a paragraph of text would be displayed in the PDF, and if it contained ‘No’ a different pragraph would be displayed.
I can get this working in the emails CF7 sends, but not in the PDF (which just prints the field name).
Is there some way I can make this work with your plugin?
Hello and please help me for this issue. After installed this plugin, WordPress don’t let me update my template php files. Thnx in advance
Hi!. After installed and activated this plugin works fine, but WordPress don’t let me update php files inside my theme and freezes my website. Thnx in advance
Hi this plugin is great…
However I want to link to the pdf’s using a dynamic link. i.e the contact forms are displayed in a table ousing cf7db and I want to ad the download pdf option to each form in the table?
but I cant seem to find a where the refference is to pass into this
Hi,
sorry for writing in English, I don’t speak french…
First at all, thank you for this awesome plugin, great work! I’ve just one question, how can I customize the font-family and font-size of the generated PDF-Document? I can’t find anything in my settings.
Kind regards,
Thomas
Hi!
Can you install this version : https://github.com/Florent73/send-pdf-for-contact-form-7 ?
This version have the font selector.
Thanks
Bonjour Florent,
Merci pour ce plugin très utile !
Une petite question : je ne parviens pas à trouver comment mettre en forme les données issues des checkboxes.
Les éléments cochés sont affichés en liste, séparés par des virgules.
Comment pourrais-je changer le style de ces éléments, afin de les mettre chacun sur une ligne, avec éventuellement un petit icône devant chacun ?
Je ne parviens pas à trouver l’accesseur css pour ces éléments :/
Merci 😉
Bonjour j’espère que vous pourrez me répondre dès que je devrai finir un travail.
Hi Florent, J’ai créé un module, et mis en place, au moins je pense correctement tout.
Mais quand je vais dans les paramètres de création PDF, je reçois un PDF blanc même si j’ai correctement réglé tous les paramètres.
Le mail 2 arrive au client final, mais le fichier pdf arrive tout blanc, seul le logo peut être vu, même dans l’aperçu de la page des paramètres, pourquoi?
vous pouvez essayer le formulaire vous-même à cette adresse: http://www.brokerissimo.com/3098-2/
bonjour,
Je dois en effet generer un pdf personnalisé pour chaque utilisateur enregistrés et leur envoyer par mail. C’est le meme modele (lettre avec signature du directeur) mais il faut juste inserer leur nom à l’interieur.
Je pensais creer un compte chacun sur le site wordpress puis d eleur page perso il n’ont plus qu’a telecharger le pdf personnalisé à leur nom.
Pensez vous que cela soit possible avec ce plugin ? Voyez vous une autre solution ?
Merci
Bonjour,
Je vous prépare cela dans la prochaine version.
Si j’ai bien compris, les données Profil Utilisateur (Nom, Prénom, Adresse, etc..) pourrons être rajouté dans le PDF.
Cordialement
Bonjour,
Félicitations pour le plugin, je le trouve très intéressant.
Je viens de trouver un petit bug qui se produit quand la même personne (même session) soumet le formulaire plus d’une fois, avec des données différentes.
Le fichier PDF généré a le même nom et est donc toujours le même.
J’ai essayé de passer outre en changeant le code ici mais ne peut pas être la meilleure solution:
fichier send-pdf.php, ligne 288:
// On enregistre un ID en session
if ( isset( $_SESSION[‘pdf_uniqueid’] ) && empty($_POST)) {
unset( $_SESSION[‘pdf_uniqueid’] );
}
Bonjour Florent,
Est-il possible d’utiliser Send PDF for Contact Form 7 avec la version 3.7.2 max de Contact Form 7 svp ? Dans cette version, les class WPCF7_Submission et WPCF7_ContactForm ne sont pas disponibles. Auriez-vous une solution ?
Merci pour votre plugin et j’espère pouvoir l’utiliser prochainement !
Alexandre
Bonjour,
Mon extension reste à jour par rapport aux versions de Contact Form 7 pour la sécurité.
Essayer l’une des première version de l’extension mais côté sécurité et bugs vous serez en porte-à-faux.
Cordialemenr
C’est mieux que ce que j’espérais. Inline css fonctionne bien.
Le problème que j’avais était un serveur lent qui traînait desservant le nouveau pdf par quelques minutes. Mais ça fonctionne très bien.
(Traduit de l’anglais.)
Aimez votre plugin. Merci.
Où puis-je ajouter un style CSS? J’ai essayé en ligne et les étiquettes de style en tant que blocs séparés au-dessus du code HTML.
N’a pas fonctionné. Qu’est-ce que je rate?
C’est mieux que ce que j’espérais. Inline css fonctionne bien.
Le problème que j’avais était un serveur lent qui traînait desservant le nouveau pdf par quelques minutes. Mais ça fonctionne très bien.
Bonjour !
J’aimerai savoir s’il est possible d’ajouter une étape intermédiaire avant le téléchargement du PDF généré ?
Je m’explique, dans mon cas, je souhaite générer des attestations payantes, donc avoir la possibilité d’ajouter une étape qui correspond au paiement AVANT de générer et de permettre à l’utilisateur de télécharger le PDF….
Avez vous pensé à une solution de ce type ? ou bien, est-ce qu’il existe déjà cette option avec votre plugin ?
Merci d’avance pour votre retour.
Bonjour,
Votre demande n’est pas disponible pour le moment. Cela mériterais une amélioration dans ce sens, pourquoi pas !
Cordialement
Bonjour Florent,
Merci pour votre réponse, n’hésitez pas à m’informer si vous mettez à jour votre plugin dans ce sens.
Bonne continuation.
Bonjour, top le plugin mais voila quand je veut intégrer une image telecharger par l’utilisateur, a la generation du pdf je peut voir le nom de limage ou alors une petite croix rouge… comment faire
Bonjour,
Super plugin ! il correspond avec à ce que je voudrais faire !
Cependant, je rencontre un problème:
Lorsque je veux mettre une image depuis mon site, elle apparait comme fichier manquant sur le pdf alors que l’adresse est ok ( vérifié dans firefox) et apparait dans le générateur de pdf.
Si je prends une image d’un autre site, c’est ok !
étrange …
Merci pour votre aide
style tag wont work in pdf layout how should i apply style on layout form????
how to style the pdf layout ?? in my form style tag not work .