Algeria COD order form

For cash-on-delivery sales in Algeria: four required fields, all 58 wilayas and their communes. Set it up here, copy the code, paste it on your product page. No dependencies: it works on YouCan, Shopify, a plain HTML landing page or Blogger.

The settings below are in French, like the form your Algerian customers will see. Selling with card payment (US, UK, Europe, Australia)? You don't need this tool — your store checkout handles orders.

Le produit

Les textes

L'apparence

Où arrivent les commandes

Sans destination, le formulaire affiche le message de confirmation sans rien envoyer. Pratique pour tester la page, inutilisable en production.

Aperçu réel
Plein écran

Le code à coller

35 Ko, tout compris. Colle-le dans un bloc HTML de ta page produit.

<!-- Formulaire de commande COD - 58 wilayas - genere par Hooked Lab -->
<div id="cldz-form" class="cl-premium" dir="ltr">
<style>
#cldz-form{--acc:#c9a227;--or:#e0be55;--champagne:#f2dfa0;--fond:#07060a;--carte:rgba(13,12,16,.74);
  --champ:rgba(7,6,10,.72);--bord:#2a2530;--txt:#f6f2ea;--doux:#b6afbd;--faible:#8b8494;
  position:relative;max-width:520px;margin:0 auto;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--txt);box-sizing:border-box;
  padding:38px 26px;border-radius:22px;background:var(--fond);overflow:hidden;isolation:isolate}
#cldz-form *,#cldz-form *::before,#cldz-form *::after{box-sizing:inherit}

/* ---------------------------------------------------------------- decor */

#cldz-form .cl-decor{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
#cldz-form .cl-halo{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
#cldz-form .cl-halo-1{width:420px;height:420px;top:-190px;left:-140px;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 34%,transparent),transparent 68%);
  animation:cl-derive-a 17s ease-in-out infinite}
#cldz-form .cl-halo-2{width:360px;height:360px;bottom:-170px;right:-120px;
  background:radial-gradient(circle,rgba(184,115,51,.3),transparent 68%);
  animation:cl-derive-b 21s ease-in-out infinite}
#cldz-form .cl-halo-3{width:300px;heig...
Recevoir les commandes dans Google Sheets
  1. 1. Crée une feuille de calcul vierge sur Google Sheets.
  2. 2. Menu Extensions → Apps Script. Efface le contenu et colle le script ci-dessous.
  3. 3. Clique Déployer → Nouveau déploiement, type Application web. Mets « Exécuter en tant que : moi » et « Qui a accès : tout le monde ».
  4. 4. Copie l'URL qui finit par /exec et colle-la dans le champ à gauche.
  5. 5. Passe une commande de test sur l'aperçu : la ligne doit apparaître dans ta feuille.
function doPost(e) {
  var feuille = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
  var d = JSON.parse(e.postData.contents);

  // En-tetes crees une seule fois, a la premiere commande.
  if (feuille.getLastRow() === 0) {
    feuille.appendRow(['Date', 'Produit', 'Nom', 'Telephone', 'Wilaya', 'Commune',
                       'Livraison', 'Frais', 'Total', 'Statut']);
  }

  feuille.appendRow([
    new Date(), d.produit, d.nom, "'" + d.telephone, d.wilaya_code + ' - ' + d.wilaya,
    d.commune, d.livraison, d.frais_livraison, d.total, 'A confirmer'
  ]);

  return ContentService.createTextOutput('ok');
}

Le numéro de téléphone est enregistré avec une apostrophe devant : sans elle, Google Sheets supprime le zéro initial et tous tes numéros deviennent inutilisables.

Algeria COD order form — Hooked Lab