GUIDE D'UTILISATION DE WIX
- kebaili yacine
- 24 mai
- 9 min de lecture
Table des matières
1. Introduction à Wix
2. Intégration de code HTML personnalisé
• Méthodes d'intégration de code HTML
• Restrictions et bonnes pratiques
3. Ajout de JavaScript dans Wix
• Intégration de JavaScript via le code personnalisé
• Création d'éléments personnalisés avec JavaScript
1. Introduction à Wix
Wix est une plateforme de création de sites web qui permet de concevoir et de publier des sites professionnels sans connaissances techniques préalables. Cependant, pour les utilisateurs qui souhaitent personnaliser davantage leur site, Wix offre la possibilité d'intégrer du code HTML, d'ajouter du JavaScript et de créer des formulaires personnalisés.
Ce guide vous accompagnera pas à pas dans ces différentes fonctionnalités avancées, en vous permettant d'exploiter pleinement les capacités de Wix.
2. Intégration de code HTML personnalisé
L'intégration de code HTML dans Wix vous permet d'ajouter des fonctionnalités qui ne sont pas disponibles nativement dans l'éditeur Wix.
Méthodes d'intégration de code HTML
a) Ajout de code HTML via les paramètres du site
1. Accédez au tableau de bord de votre site Wix
2. Cliquez sur Paramètres dans le menu de gauche
3. Sélectionnez Code personnalisé dans la section Avancé
4. Cliquez sur + Ajouter un code personnalisé en haut à droite
5. Collez votre extrait de code HTML dans la zone de texte
6. Donnez un nom facilement identifiable à votre code
7. Choisissez où placer votre code :
• Toutes les pages : pour l'ajouter à l'ensemble du site
• Pages spécifiques : pour sélectionner uniquement certaines pages
8. Définissez l'emplacement du code :
• En-tête (Head) : pour les métadonnées et les scripts chargés en premier
• Corps - début (Body - start) : pour un contenu visible en haut de page
• Corps - fin (Body - end) : pour un contenu visible en bas de page
9. Cliquez sur Appliquer
b) Utilisation de l'élément "Code d'intégration"
1. Dans l'éditeur Wix, cliquez sur Ajouter des éléments (symbole +) à gauche
2. Sélectionnez Code d'intégration
3. Choisissez Élément HTML
4. Faites glisser l'élément vers l'emplacement souhaité sur votre page
5. Cliquez sur Paramètres
6. Collez votre code HTML dans la zone prévue
7. Cliquez sur Enregistrer
Restrictions et bonnes pratiques
• Assurez-vous que votre code HTML est compatible HTML5
• Utilisez HTTPS et non HTTP pour toute ressource externe
• Le code HTML visible doit être ajouté via l'élément "Code d'intégration"
• Le code ajouté dans les paramètres du site est invisible pour les visiteurs
• Pour les sites Premium uniquement : certaines fonctionnalités avancées d'intégration de code ne sont disponibles que pour les forfaits payants
• Testez toujours votre code en mode Aperçu avant de publier
Exemple de code HTML simple à intégrer
Copy<div class="conteneur-personnalise">
<h2>Mon titre personnalisé</h2>
<p>Ce paragraphe a été ajouté via du code HTML personnalisé.</p>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
</div>
3. Ajout de JavaScript dans Wix
JavaScript permet d'ajouter des interactions et des fonctionnalités dynamiques à votre site Wix.
Intégration de JavaScript via le code personnalisé
a) Ajouter du JavaScript global
1. Accédez au tableau de bord de votre site Wix
2. Cliquez sur Paramètres dans le menu de gauche
3. Sélectionnez Code personnalisé dans la section Avancé
4. Cliquez sur + Ajouter un code personnalisé
5. Collez votre code JavaScript entre balises <script> et </script>
6. Nommez votre script
7. Choisissez l'emplacement du script :
• En-tête (Head) : pour les scripts qui doivent être chargés avant le contenu
• Corps - fin (Body - end) : recommandé pour la plupart des scripts (optimisation des performances)
8. Cliquez sur Appliquer
b) Ajouter du JavaScript sur une page spécifique
1. Suivez les étapes 1 à 5 ci-dessus
2. Sélectionnez Pages spécifiques sous "Ajouter code aux pages"
3. Choisissez les pages concernées dans le menu déroulant
4. Définissez l'emplacement et appliquez
Création d'éléments personnalisés avec JavaScript
Les éléments personnalisés vous permettent de créer des composants réutilisables avec des fonctionnalités JavaScript avancées.
1. Dans l'éditeur Wix, cliquez sur Ajouter des éléments (symbole +)
2. Sélectionnez Code d'intégration
3. Choisissez Élément personnalisé
4. Faites glisser l'élément vers l'emplacement souhaité
5. Cliquez sur Paramètres
6. Sélectionnez URL du serveur et saisissez l'URL vers votre fichier JavaScript
• L'URL doit commencer par HTTPS
• Le fichier doit être hébergé sur un serveur externe ou avec Velo
7. Saisissez le nom de la balise (défini dans votre code JavaScript)
8. Cliquez sur Enregistrer
Exemple d'élément personnalisé JavaScript
Copyclass CompteurInteractif extends HTMLElement {
constructor() {
super();
this.compteur = 0;
}
connectedCallback() {
this.innerHTML = `
<div style="text-align: center; padding: 20px; border: 1px solid #ccc; border-radius: 5px;">
<h3>Compteur: <span id="valeur">${this.compteur}</span></h3>
<button id="incrementer">Augmenter</button>
<button id="reinitialiser">Réinitialiser</button>
</div>
`;
this.querySelector('#incrementer').addEventListener('click', () => {
this.compteur++;
this.querySelector('#valeur').textContent = this.compteur;
});
this.querySelector('#reinitialiser').addEventListener('click', () => {
this.compteur = 0;
this.querySelector('#valeur').textContent = this.compteur;
});
}
}
customElements.define('compteur-interactif', CompteurInteractif);
Interactions et comportements dynamiques
JavaScript peut être utilisé pour ajouter diverses interactions:
• Animation d'éléments au défilement
• Validation avancée de formulaires
• Création de modalités personnalisées
• Intégration de bibliothèques externes (charts, sliders, etc.)
• Modification dynamique du contenu en fonction des actions de l'utilisateur
Considérations importantes
• Assurez-vous que vos scripts sont compatibles avec les navigateurs modernes
• Évitez de modifier directement les éléments Wix natifs, car cela pourrait causer des problèmes
• Utilisez des sélecteurs uniques pour cibler vos éléments
• Attention aux conflits avec les scripts Wix existants
4. Création de formulaires dans Wix
Utilisation de Wix Formulaires (méthode standard)
Wix Formulaires est la solution native pour créer des formulaires sans code.
a) Ajouter un formulaire standard
1. Dans l'éditeur Wix, cliquez sur Ajouter des éléments (symbole +)
2. Sélectionnez Contact formulaires
3. Choisissez Créer un nouveau formulaire ou un modèle prédéfini
4. Faites glisser le formulaire vers l'emplacement souhaité sur votre page
5. Cliquez sur Modifier le formulaire pour ouvrir le créateur de formulaires
b) Personnaliser les champs du formulaire
1. Dans le créateur de formulaires, cliquez sur l'icône Modifier en haut à gauche pour nommer le formulaire
2. Pour ajouter un champ:
• Cliquez sur + Ajouter un champ
• Sélectionnez le type de champ souhaité
3. Pour modifier un champ existant:
• Cliquez sur le champ
• Modifiez ses propriétés dans le panneau de droite (texte, placeholder, required, etc.)
4. Pour réorganiser les champs:
• Faites glisser les champs vers le haut ou le bas
c) Configurer les paramètres du formulaire
1. Cliquez sur le formulaire dans l'éditeur
2. Cliquez sur Paramètres
3. Personnalisez les options via les différents onglets:
• Mise en page: Disposition des champs, espacement
• Design: Apparence des champs, boutons et couleurs
• Email: Notifications par email après soumission
• Intégrations: Connexion avec d'autres services
• Après envoi: Message de confirmation ou redirection
Création de formulaires personnalisés avec le CMS
Pour des formulaires plus avancés, vous pouvez utiliser le système de gestion de contenu (CMS) de Wix.
a) Créer une collection pour stocker les soumissions
1. Accédez au CMS depuis le tableau de bord
2. Cliquez sur Créer une collection
3. Sélectionnez Commencer de zéro
4. Nommez votre collection (ex: "Soumissions de formulaire")
5. Configurez les autorisations via Plus d'actions > Autorisations et confidentialité
6. Choisissez Collecter le contenu ou Avancé selon vos besoins
b) Ajouter des éléments de saisie sur votre page
1. Dans l'éditeur, cliquez sur Ajouter des éléments
2. Sélectionnez Saisie
3. Choisissez les types d'éléments souhaités (zone de texte, menu déroulant, etc.)
4. Placez les éléments sur votre page
5. Configurez chaque élément via Paramètres
c) Connecter les éléments à votre collection
1. Cliquez sur un élément de saisie
2. Cliquez sur Connecter à une base de données
3. Sélectionnez un dataset existant ou créez-en un nouveau
4. Choisissez votre collection "Soumissions de formulaire"
5. Connectez le champ de saisie à un champ de collection existant ou créez-en un nouveau
6. Répétez pour tous les éléments de saisie
d) Ajouter un bouton d'envoi
1. Ajoutez un bouton à votre page
2. Cliquez sur le bouton et sélectionnez Connecter à une action
3. Choisissez Actions de dataset
4. Sélectionnez votre dataset
5. Choisissez l'action Soumettre
6. Configurez le comportement après soumission
Validation des champs et messages de confirmation
a) Validation standard
1. Cliquez sur un champ dans votre formulaire
2. Dans Paramètres, cochez Champ obligatoire si nécessaire
3. Pour des validations spécifiques (email, téléphone), utilisez les types de champs appropriés
b) Validation JavaScript avancée (pour utilisateurs techniques)
Copydocument.querySelector('#monFormulaire').addEventListener('submit', function(e) {
const email = document.querySelector('#email').value;
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
e.preventDefault();
alert('Veuillez saisir une adresse email valide');
}
});
c) Personnaliser le message de confirmation
1. Sélectionnez votre formulaire
2. Cliquez sur Paramètres
3. Accédez à l'onglet Après envoi
4. Choisissez entre:
• Afficher un message: Personnalisez le texte de confirmation
• Rediriger vers une page: Sélectionnez une page de remerciement
• Télécharger un fichier: Offrez un PDF ou autre fichier après soumission
5. Exploitation des résultats des formulaires
Consultation des soumissions
a) Via le tableau de bord Wix
1. Accédez au tableau de bord de votre site
2. Cliquez sur Formulaires dans le menu de gauche
3. Localisez le formulaire concerné
4. Cliquez sur Voir formulaires reçus
5. Consultez la liste des soumissions avec dates et détails
b) Filtrer et trier les soumissions
1. Dans le tableau des formulaires reçus, cliquez sur la flèche à côté d'un titre de colonne pour trier
2. Utilisez les filtres en haut du tableau pour affiner les résultats
3. Cliquez sur une soumission pour voir tous les détails
c) Gérer les soumissions
Plusieurs actions sont disponibles pour chaque soumission:
• Modifier: Ajuster les données soumises
• Marquer comme spam: Signaler une soumission indésirable
• Placer dans la corbeille: Supprimer temporairement une soumission
• Télécharger en PDF: Obtenir une version PDF de la soumission
Exportation et analyse des données
a) Exporter les données
1. Dans le tableau des formulaires reçus, cochez les cases à gauche des soumissions à exporter
2. Cliquez sur Exporter
3. Sélectionnez les champs à inclure dans l'exportation
4. Cliquez sur Exporter pour télécharger un fichier CSV
b) Analyser les données avec des outils externes
Le fichier CSV exporté peut être utilisé avec:
• Microsoft Excel ou Google Sheets pour l'analyse
• Outils de visualisation comme Tableau ou Power BI
• Services CRM pour le suivi client
c) Utiliser les rapports et analyses intégrés
1. Dans le tableau de bord Wix, accédez à Formulaires
2. Cliquez sur Rapports
3. Consultez les statistiques sur les soumissions:
• Nombre de formulaires reçus par période
• Taux de conversion
• Sources de trafic
• Analyse des champs
Connexion avec d'autres services
a) Intégration avec des services de messagerie
1. Sélectionnez votre formulaire dans l'éditeur
2. Cliquez sur Paramètres
3. Accédez à l'onglet Email
4. Configurez les notifications par email:
• Email de notification pour vous
• Email de confirmation pour le visiteur
b) Connexion avec des services externes
Wix permet de connecter les formulaires à:
• Mailchimp, Constant Contact (listes de diffusion)
• Google Sheets (synchronisation automatique des données)
• Zapier (connexion avec des centaines d'autres services)
• ActiveCampaign, HubSpot (marketing automation)
Pour configurer une intégration:
1. Accédez au tableau de bord Wix
2. Cliquez sur Intégrations dans le menu de gauche
3. Recherchez et sélectionnez le service souhaité
4. Suivez les instructions de configuration
c) Utilisation avancée avec Velo (anciennement Corvid)
Pour les développeurs, Velo permet de:
• Créer des actions personnalisées après soumission de formulaire
• Envoyer les données à des API tierces
• Mettre en place des workflows complexes
• Stocker les données dans des bases de données externes
Exemple de code Velo pour traiter une soumission:
Copyimport wixData from 'wix-data';
import wixUsers from 'wix-users';
$w('#myForm').onSubmit((event) => {
// Éviter le comportement par défaut
event.preventDefault();
// Récupérer les données du formulaire
const formData = {
nom: $w('#nom').value,
email: $w('#email').value,
message: $w('#message').value,
dateSubmission: new Date(),
userID: wixUsers.currentUser.id
};
// Enregistrer dans la collection
wixData.insert('Soumissions', formData)
.then((results) => {
// Afficher un message de succès
$w('#successMessage').show();
// Réinitialiser le formulaire
$w('#myForm').reset();
})
.catch((err) => {
// Gérer les erreurs
console.error(err);
$w('#errorMessage').show();
});
});
6. Conseils et astuces
Optimisation des formulaires
• Limitez le nombre de champs au strict nécessaire
• Organisez les champs dans un ordre logique
• Utilisez des libellés clairs pour chaque champ
• Fournissez des exemples dans les placeholders
• Indiquez clairement les champs obligatoires
• Proposez une validation en temps réel quand c'est possible
Sécurité
• Activez les filtres anti-spam pour protéger vos formulaires
• Évitez de demander des informations sensibles inutiles
• Assurez-vous que les données sont transmises en HTTPS
• Mettez en place une politique de conservation des données
• Respectez le RGPD pour les utilisateurs européens
Performance
• Optimisez vos scripts JavaScript pour ne pas ralentir le chargement
• Utilisez la mise en cache quand c'est possible
• Testez vos formulaires sur différents appareils et navigateurs
• Surveillez régulièrement les performances de vos formulaires
7. Ressources complémentaires
Documentation officielle Wix
Tutoriels vidéo
Communauté
Ce guide complet vous a présenté les principales fonctionnalités avancées de Wix, notamment l'intégration de code HTML, l'ajout de JavaScript, la création de formulaires et l'exploitation des résultats. En suivant ces instructions, vous pourrez personnaliser votre site Wix bien au-delà des fonctionnalités de base, offrant ainsi une expérience unique à vos visiteurs.
N'hésitez pas à consulter la documentation officielle de Wix pour des informations plus détaillées sur des fonctionnalités spécifiques ou à faire appel à un expert Wix si vous avez besoin d'assistance pour des projets complexes.
Comments