Contact Sections
contact-form
stable Bibliothèque Contenu inline (instance)Capter un lead
Section contact avec formulaire (nom, email, message) et colonne coordonnées, action vers /api/contact, bilingue.
Instances sur le site
Global 0 instance en page composable
Aperçu
Comment l'utiliser
| Champ | Nature | Type | Requis | Bilingue | Bornes / valeurs |
|---|---|---|---|---|---|
background | Présentation | enum | Non | · | paper · paper-2 · paper-3 · ink |
kicker | Contenu | text | Non | fr / en | · |
h2 | Contenu | text | Oui | fr / en | · |
body | Contenu | richtext | Non | fr / en | · |
name_label | Contenu | text | Non | fr / en | · |
email_label | Contenu | text | Non | fr / en | · |
message_label | Contenu | text | Non | fr / en | · |
submit_label | Contenu | text | Non | fr / en | · |
form_action | Contenu | text | Non | · | · |
hint | Contenu | text | Non | fr / en | · |
details | Contenu | array | Non | · | · |
Déclinaisons · 9
Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé.
-
contact-form · colonne unique
généréecontact-form--single-col -
contact-form · deux colonnes
généréecontact-form--two-col -
contact-form · en ligne
généréecontact-form--inline -
contact-form · split avec média
généréecontact-form--split-with-media -
contact-form · multi-étapes
généréecontact-form--multi-step -
contact-form · carte encadrée
généréecontact-form--boxed-card -
contact-form · deux étapes
généréecontact-form--two-step -
contact-form · compact en ligne
généréecontact-form--compact-inline -
contact-form · pleine largeur
généréecontact-form--full-width
Comparer les déclinaisons · 9
Chaque déclinaison, résumée par son écart d'axes face à la démo par défaut du type : seuls les axes qui changent une valeur sont listés. Ouvre-la dans le builder pour l'assembler dans une page.
-
contact-form · colonne unique
généréecontact-form--single-collayout:single-colOuvrir dans le builder -
contact-form · deux colonnes
généréecontact-form--two-collayout:two-colOuvrir dans le builder -
contact-form · en ligne
généréecontact-form--inlinelayout:inlineOuvrir dans le builder -
contact-form · split avec média
généréecontact-form--split-with-medialayout:split-with-mediaOuvrir dans le builder -
contact-form · multi-étapes
généréecontact-form--multi-steplayout:multi-stepOuvrir dans le builder -
contact-form · carte encadrée
généréecontact-form--boxed-cardlayout:boxed-cardOuvrir dans le builder -
contact-form · deux étapes
généréecontact-form--two-steplayout:two-stepOuvrir dans le builder -
contact-form · compact en ligne
généréecontact-form--compact-inlinelayout:compact-inlineOuvrir dans le builder -
contact-form · pleine largeur
généréecontact-form--full-widthlayout:full-widthOuvrir dans le builder
Sections liées
Même famille
booking-embed stable Section de prise de rendez-vous intégrant le widget Cal.com (CalEmbed) avec une copy de réassurance, pour réserver un audit ou un appel.
DéfilementIllustration au traitListe +3 9 décl.cta-form-inline stable Bande CTA avec mini-formulaire inline (email et bouton), pour capter un lead ou une inscription newsletter à l'instant d'intention.
SurvolBoutonsFormulaire +3 13 décl.Même catégorie
booking-embed stable Section de prise de rendez-vous intégrant le widget Cal.com (CalEmbed) avec une copy de réassurance, pour réserver un audit ou un appel.
DéfilementIllustration au traitListe +3 9 décl.Similaires
cta-newsletter-footer stable Capture email compacte multi-colonne de type pré-footer : titre, champ, bouton et mention RGPD sur une ligne. Sombre par défaut pour clore la page sur l’abonnement.
Illustration au traitBoutonsFormulaire +3 17 décl.newsletter-signup-section stable Section d'inscription newsletter pleine largeur (réutilise NewsletterSignup), fonds au choix dont ink pour un climax de page.
BoutonsCentré 17 décl.footer-cta-band stable Bande CTA finale pleine largeur (titre, sous-titre, un à deux boutons), pensée comme le climax juste avant le footer. Sombre par défaut pour trancher avec la page.
Boutons2 colonnesScindé 27 décl.cta-split-visual stable Bandeau CTA asymetrique 2 colonnes : texte kicker/titre/body/boutons a gauche, visuel SVG decoratif a droite. Distinct des CTA centres.
Apparition au scrollDéfilementIllustration au trait +4 17 décl.pricing-single-highlight stable Offre mono-produit en grand format : une carte large centrée avec prix d'ancrage, liste de bénéfices, garantie et CTA fort. Idéal landing mono-offre.
Liste2 colonnesMédia à droite +1 18 décl.newsletter-band stable Bande newsletter fond sombre : titre éditorial large à gauche, formulaire capture email à droite.
Apparition au scrollSurvolDéfilement +4 12 décl.Code
Données de la section (à placer dans sections[])
{
"type": "contact-form",
"background": "paper",
"kicker_fr": "Parlons de votre projet",
"kicker_en": "Let's talk about your project",
"h2_fr": "Dites-nous ce que vous voulez <i>câbler</i>",
"h2_en": "Tell us what you want to <i>wire</i>",
"body_fr": "Décrivez votre contexte en deux lignes. On revient vers vous sous 24h avec une première lecture, pas un argumentaire.",
"body_en": "Describe your context in two lines. We reply within 24h with a first read, not a sales pitch.",
"name_label_fr": "Nom",
"name_label_en": "Name",
"email_label_fr": "Email",
"email_label_en": "Email",
"message_label_fr": "Votre projet en deux lignes",
"message_label_en": "Your project in two lines",
"submit_label_fr": "Envoyer le message →",
"submit_label_en": "Send message →",
"form_action": "/api/contact",
"hint_fr": "Vos données restent privées · jamais revendues",
"hint_en": "Your data stays private · never resold",
"details": [
{
"label_fr": "Email",
"label_en": "Email",
"value": "bonjour@waimia.com",
"href": "mailto:bonjour@waimia.com"
},
{
"label_fr": "Réponse",
"label_en": "Response",
"value": "Sous 24h ouvrées"
},
{
"label_fr": "Base",
"label_en": "Based in",
"value": "Montpellier · à distance partout"
}
]
}/library/section/contact-form.json
Chemin du détail machine
/library/section/contact-form.json