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

  • Nader

    Bonsoir, j’ai appliqué à la lettre mais il ne m’affiche même pas les 3 boutons avec le libellé « choisissez un fichier » , dès que j’enlève class= »hide », ils réapparaissent !
    C’est quoi le problème ? Cordialement

    • seeyar

      Bonsoir, vérifiez que la class hide ne soit pas déjà utilisée par votre thème ( voir votre fichier style. Css) et que votre js se charge bien.

      Cordialement

      • Nader

        Merci,
        J’ai mis ce petit bout de code alert(‘Debut du chargement de la page’); dans multiupload.js et il l’exécute. J’ai vérifié le style.css comme vous me l’avez dit mais toujours rien ! En fait, c’est dès l’affichage du bouton dans le formulaire quand j’écris [file file-01], il y a le bouton « Choisissez un fichier » sinon avec [file file-01], il n’y a rien ! comme si Contact Form 7 ne supportait pas cela …

        • Nader

          Zut je voulais dire sinon avec « [file file-01] », il n’y a rien ! comme si Contact Form 7 ne supportait pas cela …

          • Nader

            Décidément, à chaque fois l’affichage disparait, le p avec class = hide et ses guillemets…..

  • Nader

    ça marche ! j’ai remplacé coco par hide pour la class comme vous m’avez dit …..Merci beaucoup !

    • seeyar

      bravo ;)

  • Benjea07

    Bonjour,
    je ne comprends pas à quoi se réfère les class.
    A quel code CSS font elles allusion?
    De même, les href= »# » me renvoient au début de page…
    Cordialement