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
3 – La mise en page de votre PDF
4 – Compatibilités
5 – Personnaliser votre fichier CSV

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).
  – ‘textbutton’ : 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 » textbutton= »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, l’extension détectera si c’est bien une image. Vous pourrez ensuite l’afficher en utilisant la balise HTML :

<img src="[url-file]" width="300" />

Puis dans la construction de votre PDF :

<img src="[url-file-photo]" width="300" />

Si vous utilisez des balises avec des pipes (|)

// Balise de votre formulaire :
[radio radio-choose use_label_element default:1 "CEO|ceo@example.com" "Sales|sales@example.com" "Support|support@example.com"]

// Balise a mettre dans votre PDF
<p>Votre choix : [_raw_radio-choose]</p>

// Cela retournera CEO / Sales / Support
// Si vous ajoutez [radio-choose] en plus (il faut donc les deux balises) cela retournera ceo@example.com / sales@example.com / support@example.com

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>

Personnalisation du fichier CSV

L’extension Send PDF for Contact Form 7 vous permet aussi de générer un fichier CSV avec les données envoyées du formulaire.

Pour activer cela, cliquez sur « NON » pour l’option « Désactiver la génération d’un fichier CSV ?« . Vous pouvez définir à qui on envoi le fichier et le séparateur des données.

Pour personnaliser les champs du fichier CSV, retrouver tout en bas de la page des réglages un tableau de correspondance des champs de votre formulaire :

Vous pouvez cacher les champs inutiles en cochant la case correspondante au début de chaque champ.

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.