Contact form 7: créer un champ multi-upload

# Site web, # Tutoriels

contactform7-multiupload

Nous verrons comment créer et intégrer un champ multi-upload de fichier avec le célèbre plugin Contact Form 7 sous WordPress.

1. Code html

Nous prendrons l'exemple de 3 uploads qui auront respectivement pour shortcode:

Vous êtes libre de rajouter autant d'uploads que vous le souhaitez.

Créer un formulaire et ajouter ce code avant le shortcode submit:

contactform7-multiupload-1

 

Pour l'instant notre formulaire ne ressemble pas à grand chose, cf ci-dessous.

contactform7-multiupload-4

Nous allons embellir ce champs pour ne voir apparaître qu'un seul bouton upload et d'appeler les suivant en cliquant sur ajouter fichier. Ceci se fera grâce à un code JS, objet du paragraphe suivant.

 

2.Code JS

  • Créer un fichier texte sur votre bureau et renommez le en multiupload.js. Mettez y ce code dedans:

  • Mettre ensuite multiupload.js dans un dossier js à la racine de votre thème, utilisez Filezilla pour le créer.

contactform7-multiupload-3

 

 

  • Il nous faut ensuite appeler multiupload.js dans notre thème. Pour ce faire copier-coller cette ligne dans votre header.php

 

Résultat:Untitled

 

3.Bonus: ajouter image + et -

Nous allons soigner un peu plus la mise en forme en ajoutant des images + et - en couleur.

Pour ce faire, ajouter simplement vos images moins.jpg et plus.jpg dans le dossier image (vu plus haut à coté de votre dossier js).

Ensuite modifier votre formulaire en ajoutant les balises img, le code devient:

 

Résultat:

contactform7-multiupload-8