Test contact
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
/* ===========================
PREMIUM SIMPLE (STABLE)
=========================== */
.contact .field__input,
.contact .text-area,
.contact select.field__input {
border-radius: 12px;
border-color: rgba(0,0,0,.22);
background: #fff;
}
.contact .field__input:focus,
.contact .text-area:focus,
.contact select.field__input:focus {
border-color: rgba(153,27,27,.55);
box-shadow: 0 0 0 3px rgba(153,27,27,.10);
outline: none;
}
.contact__button .button {
border-radius: 999px;
box-shadow: 0 10px 22px rgba(153,27,27,.18);
transition: transform .15s ease, box-shadow .15s ease;
background: linear-gradient(135deg, #450A0A 0%, #991B1B 100%);
color: #fff;
border: none;
}
.contact__button .button:hover {
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(153,27,27,.26);
}
.contact__button .button:active {
transform: translateY(0);
box-shadow: 0 8px 18px rgba(153,27,27,.18);
}
/* ===========================
FIX SPÉCIFIQUE "MOTIF"
(police + label + flèche)
=========================== */
#ContactForm-motif.field__input,
#ContactForm-motif.field__input option {
font-family: inherit !important;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
}
#ContactForm-motif.field__input{
padding-top: 2.2rem;
padding-bottom: .8rem;
line-height: 1.2;
height: auto;
}
#ContactForm-motif + .field__label{
top: .65rem;
transform: none;
pointer-events: none;
}
#ContactForm-motif{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 3.2rem !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5' fill='none' stroke='%23991B1B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1.2rem center;
background-size: 16px 16px;
}
html:dir(rtl) #ContactForm-motif{
background-position: left 1.2rem center;
padding-right: 2rem !important;
padding-left: 3.2rem !important;
}
/* ===========================================================
MOSKERA — COUCHE DE DÉVIATION (self-service avant formulaire)
=========================================================== */
.mka-help {
--red:#991B1B; --red-dark:#450A0A; --red-light:#FEF2F2; --gold:#C9A961;
--bg:#fff; --bg-soft:#FAFAF9; --border:#EAEAEA; --text-soft:#4B5563;
--radius:14px; --radius-lg:20px;
--shadow:0 1px 3px rgba(0,0,0,.03), 0 4px 12px rgba(0,0,0,.04);
--shadow-hover:0 2px 8px rgba(153,27,27,.08), 0 8px 24px rgba(153,27,27,.08);
font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
max-width:920px; margin:0 auto 8px; padding:0 20px; line-height:1.6;
}
.mka-help__intro { text-align:center; margin-bottom:24px; }
.mka-help__intro h2 { font-weight:800; font-size:clamp(1.5rem,4vw,2.1rem); color:var(--red-dark); margin:0 0 10px; letter-spacing:-.02em; }
.mka-help__intro p { font-size:1.02rem; color:var(--text-soft); max-width:620px; margin:0 auto; }
.mka-help__sav { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; margin:0 auto 32px; padding:14px 22px; background:var(--red-light); border:1.5px solid rgba(153,27,27,.18); border-radius:var(--radius); max-width:720px; font-size:.95rem; color:var(--red-dark); }
.mka-help__sav span strong { font-weight:600; }
.mka-help__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mka-help__tile { appearance:none; cursor:pointer; text-align:left; background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius); padding:18px 18px 16px; box-shadow:var(--shadow); transition:all .2s ease; display:flex; flex-direction:column; gap:8px; font-family:inherit; }
.mka-help__tile:hover { border-color:var(--red); transform:translateY(-2px); box-shadow:var(--shadow-hover); }
.mka-help__tile[aria-expanded="true"] { border-color:var(--red); background:var(--bg-soft); box-shadow:var(--shadow-hover); }
.mka-help__tile-ico { width:38px; height:38px; border-radius:10px; background:var(--red-light); color:var(--red); display:flex; align-items:center; justify-content:center; font-size:1.25rem; }
.mka-help__tile-label { font-weight:600; font-size:1rem; color:var(--red-dark); letter-spacing:-.005em; }
.mka-help__tile-sub { font-size:.85rem; color:var(--text-soft); }
.mka-help__panel { margin-top:16px; border:1.5px solid var(--red); border-radius:var(--radius-lg); background:var(--bg); box-shadow:var(--shadow-hover); overflow:hidden; animation:mkaIn .25s ease; }
@keyframes mkaIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }
.mka-help__panel-head { background:linear-gradient(135deg,var(--red-dark) 0%,var(--red) 100%); color:#fff; padding:18px 24px; font-weight:600; font-size:1.15rem; display:flex; align-items:center; gap:10px; }
.mka-help__panel-body { padding:22px 24px 8px; color:var(--text-soft); font-size:1.02rem; }
.mka-help__panel-body p { margin:0 0 12px; }
.mka-help__panel-body strong { color:var(--red-dark); font-weight:600; }
.mka-help__panel-body ul { margin:10px 0 14px; padding-left:0; list-style:none; }
.mka-help__panel-body li { padding-left:26px; position:relative; margin-bottom:7px; }
.mka-help__panel-body li::before { content:'✓'; position:absolute; left:0; top:0; color:var(--red); font-weight:700; }
.mka-help__panel-body p a, .mka-help__panel-body li a { color:var(--red); font-weight:500; text-decoration:underline; text-underline-offset:2px; }
.mka-help__btnrow { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 4px; }
.mka-help__link-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border:1.5px solid var(--red); border-radius:50px; color:var(--red-dark); background:var(--bg); text-decoration:none; font-weight:600; font-size:.95rem; transition:all .2s ease; }
.mka-help__link-btn:hover { background:var(--red); color:#fff; }
.mka-help__link-btn--primary { background:var(--red); color:#fff !important; text-decoration:none; }
.mka-help__link-btn--primary:hover { background:var(--red-dark); color:#fff !important; }
.mka-help__resolve { margin-top:18px; padding:18px 24px; border-top:1px solid var(--border); background:var(--bg-soft); display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.mka-help__resolve-q { font-weight:600; color:var(--red-dark); margin-right:4px; }
.mka-help__btn { appearance:none; cursor:pointer; font-family:inherit; padding:11px 22px; border-radius:50px; font-weight:600; font-size:.95rem; transition:all .2s ease; border:1.5px solid transparent; }
.mka-help__btn--yes { background:var(--red); color:#fff; }
.mka-help__btn--yes:hover { background:var(--red-dark); }
.mka-help__btn--no { background:var(--bg); color:var(--red-dark); border-color:var(--red); }
.mka-help__btn--no:hover { background:var(--red); color:#fff; }
.mka-help__success { margin-top:16px; padding:22px 24px; border:1.5px solid var(--gold); background:#FFFDF6; border-radius:var(--radius-lg); text-align:center; animation:mkaIn .25s ease; }
.mka-help__success strong { display:block; color:var(--red-dark); font-size:1.15rem; margin-bottom:4px; }
.mka-help__success span { color:var(--text-soft); }
.mka-help__form-intro { text-align:center; margin:24px auto 18px; max-width:620px; }
.mka-help__form-intro h3 { color:var(--red-dark); font-weight:700; font-size:1.35rem; margin:0 0 6px; font-family:'Poppins',sans-serif; }
.mka-help__form-intro p { color:var(--text-soft); margin:0; font-family:'Poppins',sans-serif; }
@media (max-width:720px){ .mka-help__grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:460px){ .mka-help__grid{grid-template-columns:1fr;} }
{%- endstyle -%}
{% if section.settings.display_id %}
Click to copy section ID
ID copied successfully!
{% endif %}
{% schema %}
{
"name": "t:sections.contact-form.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "checkbox",
"id": "display_id",
"label": "Display section ID",
"info": "ID is used in the Sections group section to merge 2 sections. ID can also be put inside any button link and the button will scroll to this section.",
"default": false
},
{
"type": "select",
"id": "visibility",
"options": [
{ "value": "desktop-hidden", "label": "Mobile only" },
{ "value": "mobile-hidden", "label": "Desktop only" },
{ "value": "always-display", "label": "All devices" }
],
"label": "Display on",
"default": "always-display"
},
{
"type": "header",
"content": "General"
},
{
"type": "text",
"id": "heading",
"default": "",
"label": "Heading",
"info": "Laisser vide : le bloc d'aide affiche déjà son propre titre."
},
{
"type": "select",
"id": "heading_size",
"options": [
{ "value": "h2", "label": "t:sections.all.heading_size.options__1.label" },
{ "value": "h1", "label": "t:sections.all.heading_size.options__2.label" },
{ "value": "h0", "label": "t:sections.all.heading_size.options__3.label" }
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "checkbox",
"id": "button_full_width",
"label": "Use full width button style",
"default": true
},
{
"type": "select",
"id": "color_scheme",
"options": [
{ "value": "accent-1", "label": "t:sections.all.colors.accent_1.label" },
{ "value": "accent-2", "label": "t:sections.all.colors.accent_2.label" },
{ "value": "background-1", "label": "t:sections.all.colors.background_1.label" },
{ "value": "background-2", "label": "t:sections.all.colors.background_2.label" },
{ "value": "inverse", "label": "t:sections.all.colors.inverse.label" }
],
"default": "background-1",
"label": "t:sections.all.colors.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"presets": [
{ "name": "t:sections.contact-form.presets.name" }
]
}
{% endschema %}
{%- comment -%} ============ COUCHE DE DÉVIATION (self-service) ============ {%- endcomment -%}
{%- comment -%} ============ FORMULAIRE (masqué par défaut) ============ {%- endcomment -%}
Comment pouvons-nous vous aider ?
Sélectionnez votre besoin ci-dessous. La plupart des questions trouvent une réponse immédiate, sans attendre.
Délai de réponse : sous 24h
Horaires SAV : 7j/7, de 8h à 22h
{%- if section.settings.heading != blank -%}
{%- form 'contact', id: 'ContactForm', class: 'isolate animate-item animate-item--child index-1' -%}
{%- if form.posted_successfully? -%}
{% assign lang = request.locale.iso_code | downcase %}
{% case lang %}
{% when 'fr' %}
{% assign label_motif = 'Motif' %}{% assign placeholder_motif = '— Sélectionnez un motif —' %}
{% assign opt_general = 'Aide & Informations' %}{% assign opt_sav = 'SAV / Retour' %}{% assign opt_suivi = 'Suivi de commande' %}{% assign opt_devis = 'Demande de devis' %}{% assign opt_modif = 'Modification de commande' %}{% assign opt_part = 'Partenariat' %}{% assign opt_pro = 'Professionnels (B2B)' %}{% assign opt_autre = 'Autre' %}
{% when 'en' %}
{% assign label_motif = 'Subject' %}{% assign placeholder_motif = '— Select a subject —' %}
{% assign opt_general = 'Help & Information' %}{% assign opt_sav = 'After-sales / Return' %}{% assign opt_suivi = 'Order tracking' %}{% assign opt_devis = 'Quote request' %}{% assign opt_modif = 'Order modification' %}{% assign opt_part = 'Partnership' %}{% assign opt_pro = 'Professionals (B2B)' %}{% assign opt_autre = 'Other' %}
{% when 'es' %}
{% assign label_motif = 'Motivo' %}{% assign placeholder_motif = '— Seleccione un motivo —' %}
{% assign opt_general = 'Ayuda e información' %}{% assign opt_sav = 'Servicio postventa / Devolución' %}{% assign opt_suivi = 'Seguimiento de pedido' %}{% assign opt_devis = 'Solicitud de presupuesto' %}{% assign opt_modif = 'Modificación de pedido' %}{% assign opt_part = 'Colaboración' %}{% assign opt_pro = 'Profesionales (B2B)' %}{% assign opt_autre = 'Otro' %}
{% when 'it' %}
{% assign label_motif = 'Motivo' %}{% assign placeholder_motif = '— Seleziona un motivo —' %}
{% assign opt_general = 'Assistenza e informazioni' %}{% assign opt_sav = 'Post-vendita / Reso' %}{% assign opt_suivi = 'Tracciamento ordine' %}{% assign opt_devis = 'Richiesta preventivo' %}{% assign opt_modif = 'Modifica dell’ordine' %}{% assign opt_part = 'Partnership' %}{% assign opt_pro = 'Professionisti (B2B)' %}{% assign opt_autre = 'Altro' %}
{% when 'de' %}
{% assign label_motif = 'Betreff' %}{% assign placeholder_motif = '— Betreff auswählen —' %}
{% assign opt_general = 'Hilfe & Informationen' %}{% assign opt_sav = 'Kundendienst / Rücksendung' %}{% assign opt_suivi = 'Bestellverfolgung' %}{% assign opt_devis = 'Angebotsanfrage' %}{% assign opt_modif = 'Bestelländerung' %}{% assign opt_part = 'Partnerschaft' %}{% assign opt_pro = 'Geschäftskunden (B2B)' %}{% assign opt_autre = 'Sonstiges' %}
{% when 'nl' %}
{% assign label_motif = 'Onderwerp' %}{% assign placeholder_motif = '— Onderwerp selecteren —' %}
{% assign opt_general = 'Hulp & Informatie' %}{% assign opt_sav = 'Service / Retour' %}{% assign opt_suivi = 'Bestelling volgen' %}{% assign opt_devis = 'Offerte aanvraag' %}{% assign opt_modif = 'Bestelling wijzigen' %}{% assign opt_part = 'Partnerschap' %}{% assign opt_pro = 'Professionals (B2B)' %}{% assign opt_autre = 'Overig' %}
{% when 'pt' %}
{% assign label_motif = 'Assunto' %}{% assign placeholder_motif = '— Selecionar assunto —' %}
{% assign opt_general = 'Ajuda e informações' %}{% assign opt_sav = 'Pós-venda / Devolução' %}{% assign opt_suivi = 'Rastreamento do pedido' %}{% assign opt_devis = 'Pedido de orçamento' %}{% assign opt_modif = 'Alteração do pedido' %}{% assign opt_part = 'Parceria' %}{% assign opt_pro = 'Profissionais (B2B)' %}{% assign opt_autre = 'Outro' %}
{% when 'pl' %}
{% assign label_motif = 'Temat' %}{% assign placeholder_motif = '— Wybierz temat —' %}
{% assign opt_general = 'Pomoc i informacje' %}{% assign opt_sav = 'Serwis / Zwrot' %}{% assign opt_suivi = 'Śledzenie zamówienia' %}{% assign opt_devis = 'Zapytanie ofertowe' %}{% assign opt_modif = 'Zmiana zamówienia' %}{% assign opt_part = 'Współpraca' %}{% assign opt_pro = 'Profesjonaliści (B2B)' %}{% assign opt_autre = 'Inne' %}
{% when 'el' %}
{% assign label_motif = 'Θέμα' %}{% assign placeholder_motif = '— Επιλέξτε θέμα —' %}
{% assign opt_general = 'Βοήθεια & Πληροφορίες' %}{% assign opt_sav = 'Εξυπηρέτηση / Επιστροφή' %}{% assign opt_suivi = 'Παρακολούθηση παραγγελίας' %}{% assign opt_devis = 'Αίτηση προσφοράς' %}{% assign opt_modif = 'Τροποποίηση παραγγελίας' %}{% assign opt_part = 'Συνεργασία' %}{% assign opt_pro = 'Επαγγελματίες (B2B)' %}{% assign opt_autre = 'Άλλο' %}
{% when 'he' %}
{% assign label_motif = 'נושא' %}{% assign placeholder_motif = '— בחר נושא —' %}
{% assign opt_general = 'עזרה ומידע' %}{% assign opt_sav = 'שירות / החזרה' %}{% assign opt_suivi = 'מעקב הזמנה' %}{% assign opt_devis = 'בקשת הצעת מחיר' %}{% assign opt_modif = 'שינוי הזמנה' %}{% assign opt_part = 'שיתוף פעולה' %}{% assign opt_pro = 'לקוחות עסקיים (B2B)' %}{% assign opt_autre = 'אחר' %}
{% when 'ar' %}
{% assign label_motif = 'الموضوع' %}{% assign placeholder_motif = '— اختر الموضوع —' %}
{% assign opt_general = 'مساعدة ومعلومات' %}{% assign opt_sav = 'خدمة ما بعد البيع / إرجاع' %}{% assign opt_suivi = 'تتبع الطلب' %}{% assign opt_devis = 'طلب عرض سعر' %}{% assign opt_modif = 'تعديل الطلب' %}{% assign opt_part = 'شراكة' %}{% assign opt_pro = 'محترفون (B2B)' %}{% assign opt_autre = 'أخرى' %}
{% when 'fi' %}
{% assign label_motif = 'Aihe' %}{% assign placeholder_motif = '— Valitse aihe —' %}
{% assign opt_general = 'Apua ja tietoa' %}{% assign opt_sav = 'Huolto / Palautus' %}{% assign opt_suivi = 'Tilauksen seuranta' %}{% assign opt_devis = 'Tarjouspyyntö' %}{% assign opt_modif = 'Tilauksen muutos' %}{% assign opt_part = 'Yhteistyö' %}{% assign opt_pro = 'Ammattilaiset (B2B)' %}{% assign opt_autre = 'Muu' %}
{% when 'no' %}
{% assign label_motif = 'Emne' %}{% assign placeholder_motif = '— Velg emne —' %}
{% assign opt_general = 'Hjelp og informasjon' %}{% assign opt_sav = 'Service / Retur' %}{% assign opt_suivi = 'Sporing av ordre' %}{% assign opt_devis = 'Forespørsel om tilbud' %}{% assign opt_modif = 'Endring av bestilling' %}{% assign opt_part = 'Partnerskap' %}{% assign opt_pro = 'Profesjonelle (B2B)' %}{% assign opt_autre = 'Annet' %}
{% when 'sv' %}
{% assign label_motif = 'Ämne' %}{% assign placeholder_motif = '— Välj ämne —' %}
{% assign opt_general = 'Hjälp och information' %}{% assign opt_sav = 'Service / Retur' %}{% assign opt_suivi = 'Orderuppföljning' %}{% assign opt_devis = 'Offertförfrågan' %}{% assign opt_modif = 'Ändra beställning' %}{% assign opt_part = 'Partnerskap' %}{% assign opt_pro = 'Professionella (B2B)' %}{% assign opt_autre = 'Annat' %}
{% when 'da' %}
{% assign label_motif = 'Emne' %}{% assign placeholder_motif = '— Vælg emne —' %}
{% assign opt_general = 'Hjælp og information' %}{% assign opt_sav = 'Service / Returnering' %}{% assign opt_suivi = 'Ordresporing' %}{% assign opt_devis = 'Anmodning om tilbud' %}{% assign opt_modif = 'Ændring af ordre' %}{% assign opt_part = 'Partnerskab' %}{% assign opt_pro = 'Professionelle (B2B)' %}{% assign opt_autre = 'Andet' %}
{% when 'hu' %}
{% assign label_motif = 'Tárgy' %}{% assign placeholder_motif = '— Válasszon témát —' %}
{% assign opt_general = 'Segítség és információ' %}{% assign opt_sav = 'Szerviz / Visszaküldés' %}{% assign opt_suivi = 'Rendelés követése' %}{% assign opt_devis = 'Árajánlat kérés' %}{% assign opt_modif = 'Rendelés módosítása' %}{% assign opt_part = 'Partnerség' %}{% assign opt_pro = 'Szakemberek (B2B)' %}{% assign opt_autre = 'Egyéb' %}
{% when 'sl' %}
{% assign label_motif = 'Zadeva' %}{% assign placeholder_motif = '— Izberite zadevo —' %}
{% assign opt_general = 'Pomoč in informacije' %}{% assign opt_sav = 'Servis / Vračilo' %}{% assign opt_suivi = 'Sledenje naročilu' %}{% assign opt_devis = 'Povpraševanje za ponudbo' %}{% assign opt_modif = 'Sprememba naročila' %}{% assign opt_part = 'Partnerstvo' %}{% assign opt_pro = 'Strokovnjaki (B2B)' %}{% assign opt_autre = 'Drugo' %}
{% when 'sk' %}
{% assign label_motif = 'Predmet' %}{% assign placeholder_motif = '— Vyberte predmet —' %}
{% assign opt_general = 'Pomoc a informácie' %}{% assign opt_sav = 'Servis / Vrátenie' %}{% assign opt_suivi = 'Sledovanie objednávky' %}{% assign opt_devis = 'Žiadosť o cenovú ponuku' %}{% assign opt_modif = 'Zmena objednávky' %}{% assign opt_part = 'Partnerstvo' %}{% assign opt_pro = 'Profesionáli (B2B)' %}{% assign opt_autre = 'Iné' %}
{% when 'hr' %}
{% assign label_motif = 'Predmet' %}{% assign placeholder_motif = '— Odaberite predmet —' %}
{% assign opt_general = 'Pomoć i informacije' %}{% assign opt_sav = 'Servis / Povrat' %}{% assign opt_suivi = 'Praćenje narudžbe' %}{% assign opt_devis = 'Zahtjev za ponudu' %}{% assign opt_modif = 'Izmjena narudžbe' %}{% assign opt_part = 'Partnerstvo' %}{% assign opt_pro = 'Profesionalci (B2B)' %}{% assign opt_autre = 'Ostalo' %}
{% else %}
{% assign label_motif = 'Subject' %}{% assign placeholder_motif = '— Select a subject —' %}
{% assign opt_general = 'Help & Information' %}{% assign opt_sav = 'After-sales / Return' %}{% assign opt_suivi = 'Order tracking' %}{% assign opt_devis = 'Quote request' %}{% assign opt_modif = 'Order modification' %}{% assign opt_part = 'Partnership' %}{% assign opt_pro = 'Professionals (B2B)' %}{% assign opt_autre = 'Other' %}
{% endcase %}
{%- endform -%}
{{ section.settings.heading }}
{%- endif -%}Écrivez-nous
Décrivez votre besoin en quelques mots, nous revenons vers vous rapidement.
{% render 'icon-success' %} {{ 'templates.contact.form.post_success' | t }}
{%- elsif form.errors -%} {%- endif -%}
{%- if form.errors contains 'email' -%}
{{ 'accessibility.error' | t }}
{%- endif -%}