Intégrer le formulaire sur votre site#
Le widget Contact Forms s’intègre sur n’importe quel site web grâce à un simple snippet HTML. Il utilise le Shadow DOM pour garantir un affichage cohérent sans conflit avec vos styles existants.
Snippet de base#
<div id="ys-contact-form"></div>
<script src="https://yannick.services/forms/widget/v1.js"
data-form-id="VOTRE_FORM_ID"
data-lang="fr">
</script>Placez ce code à l’endroit exact où vous souhaitez voir apparaître le formulaire.
Shadow DOM : isolation garantie#
Le widget s’encapsule dans un Shadow DOM. Concrètement :
- Aucun conflit CSS — Les styles de votre site n’affectent pas le formulaire, et inversement
- Aucune dépendance — Le widget est autonome, pas besoin de jQuery ou autre librairie
- Rendu cohérent — Le formulaire a la même apparence sur tous les sites
Options de personnalisation#
Ajoutez des attributs data-* au snippet pour personnaliser le widget :
| Attribut | Description | Valeur par défaut |
|---|---|---|
data-form-id | Identifiant de votre formulaire (obligatoire) | — |
data-lang | Langue de l’interface (fr ou en) | fr |
data-theme | Thème visuel (light, dark, auto) | auto |
data-accent-color | Couleur d’accent (hex, ex. #2563eb) | Bleu par défaut |
data-button-text | Texte du bouton d’envoi | « Envoyer » |
data-success-message | Message affiché après envoi réussi | « Message envoyé ! » |
data-redirect-url | URL de redirection après envoi | Aucune |
Exemple personnalisé#
<div id="ys-contact-form"></div>
<script src="https://yannick.services/forms/widget/v1.js"
data-form-id="abc123"
data-lang="fr"
data-theme="light"
data-accent-color="#059669"
data-button-text="Nous contacter"
data-success-message="Merci, nous revenons vers vous sous 24h.">
</script>Intégration sur les CMS populaires#
WordPress#
- Éditez la page souhaitée
- Ajoutez un bloc HTML personnalisé
- Collez le snippet
- Publiez
Wix / Squarespace#
- Ajoutez un bloc Embed ou Code HTML
- Collez le snippet
- Publiez
Hugo / Jekyll / sites statiques#
Collez le snippet directement dans votre template ou fichier Markdown (dans un shortcode si nécessaire).
API REST#
Pour les intégrations avancées, vous pouvez interagir avec l’API directement :
# Récupérer la configuration publique d'un formulaire
curl https://api.yannick.services/forms/{form-id}/config
# Soumettre un message (le widget le fait automatiquement)
curl -X POST https://api.yannick.services/forms/{form-id}/submit \
-H "Content-Type: application/json" \
-d '{
"name": "Jean Dupont",
"email": "jean@exemple.fr",
"message": "Bonjour, je souhaite un devis.",
"captcha_token": "..."
}'Responsive et accessible#
Le widget est entièrement responsive et suit les bonnes pratiques d’accessibilité :
- Adapté mobile, tablette et desktop
- Labels et ARIA attributes pour les lecteurs d’écran
- Navigation clavier complète
- Contraste conforme WCAG 2.1 AA
