Publié le

Créer une liste déroulante multiselect dans Contact Form 7 où on peut cliquer plusieurs options sans utiliser Ctrl

Créer une liste déroulante multiselect dans Contact Form 7 où on peut cliquer plusieurs options sans utiliser Ctrl
Créer une liste déroulante multiselect dans Contact Form 7 où on peut cliquer plusieurs options sans utiliser Ctrl

Par défaut, Contact Form 7 permet les listes déroulantes avec sélection multiple, mais l’utilisateur doit maintenir Ctrl (ou Cmd sur Mac) pour sélectionner plusieurs éléments — ce qui n’est pas très ergonomique.

L’objectif de cet article est de créer une liste déroulante multiselect dans Contact Form 7 où on peut cliquer plusieurs options sans utiliser Ctrl (donc plus proche d’une checkbox stylisée ou d’un select amélioré).

Utiliser le plugin Select2 avec Contact Form 7

1. Créer le champ dans ton formulaire CF7

Voici un champ multiselect classique :

[select* my-multiselect multiple "Option 1" "Option 2" "Option 3"]

Le * signifie que le champ est requis, et multiple permet la sélection multiple.

Mais avec ce code, l’utilisateur devra utiliser Ctrl/Cmd. Donc, passons à la suite.

2. Activer Select2 sur ce champ

a. Ajouter un identifiant ou une classe à ton champ :

[select* my-multiselect class:cf7-select2 multiple "Option 1" "Option 2" "Option 3"]

b. Ajouter le script Select2

Tu dois charger Select2 JS + CSS dans ton thème. Voici comment faire :

Ajoute ce code dans le fichier functions.php de ton thème enfant :

function enqueue_select2_for_cf7() {
    if (is_page()) { // ou un autre test selon où se trouve ton formulaire
        wp_enqueue_style('select2-css', 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css');
        wp_enqueue_script('select2-js', 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js', array('jquery'), null, true);

        wp_add_inline_script('select2-js', "
            jQuery(document).ready(function($) {
                $('.cf7-select2').select2({
                    width: '100%',
                    placeholder: 'Faites votre sélection',
                    closeOnSelect: false
                });
            });
        ");
    }
}
add_action('wp_enqueue_scripts', 'enqueue_select2_for_cf7');

Ce script appelle Select2 JS+CSS puis une fois la page est chargée, il cherche la class .cf7-select2 et remplace le fonctionnement initial.

Résultat :

  • Ton champ multiselect dans Contact Form 7 est stylisé.
  • L’utilisateur peut sélectionner plusieurs options sans appuyer sur la touche Ctrl.
  • L’expérience est bien meilleure sur desktop et mobile.
Publié le

Personnalisez vos boîtes avec le configurateur de notre client PACKAGING DE LUXE.

Dans un monde où l’expérience client et l’image de marque sont essentielles, l’emballage joue un rôle crucial, surtout dans l’univers du luxe.

Luxe Packaging accompagne les marques en proposant des solutions de packaging raffinées et personnalisées.

Nous avons conçu un configurateur exclusif, développé sur mesure pour répondre aux besoins spécifiques de Luxe Packaging, une véritable solution innovante de packaging, permettant ainsi de créer des emballages à la hauteur de votre image de marque, en toute simplicité.

 

Un processus simple et intuitif

Le configurateur en ligne simplifie la création d’emballages personnalisés en vous guidant à travers chaque étape de conception. Grâce à une interface intuitive, vous pouvez adapter chaque détail selon vos exigences pour un rendu parfaitement adapté à votre marque.

1. Choisissez votre produit

Naviguez parmi notre gamme variée de boîtes de luxe et sélectionnez celle qui correspond parfaitement à vos exigences en termes d’esthétique et de qualité.

2. Dimensions & Quantités

Adaptez les dimensions de votre boîte selon vos préférences ou choisissez parmi les tailles standards proposées.
Indiquez ensuite le nombre de boîtes souhaité.

3. Choisissez la couleur du papier

Pour une présentation haut de gamme, une gamme de papiers d’exception. Notre sélection garantit un équilibre parfait entre esthétisme et qualité.

4. Personnalisation avancée

Ajoutez une touche unique à votre boîte de luxe en personnalisant les éléments suivants :

Couleur de la dorure : Optez pour une finition premium avec une dorure élégante et raffinée.

Logo vectorisé : Importez votre logo au format vectoriel et visualisez son rendu en temps réel.

Taille et placement du logo : Ajustez directement la taille et l’emplacement de votre logo pour une harmonie parfaite avec votre design.

Prêt à personnaliser vos emballages de luxe ?

Découvrez le configurateur et donnez vie à vos idées dès aujourd’hui !
https://packaging-de-luxe.fr/

Publié le

Transformez l’Expérience Client avec un Configurateur

Capter l’attention des prospects et comprendre précisément leurs besoins est un véritable défi.
Imaginez un parcours où votre prospect joue avec vos options, teste différentes combinaisons et affine son besoin. Résultat ? Un engagement maximal et des données précieuses pour votre business.

Un outil qui engage vos prospects

Oubliez les formulaires classiques et les longues descriptions techniques ! Un configurateur transforme l’expérience d’achat en un jeu interactif où chaque choix influe sur le résultat final.
🔹 Un parcours intuitif : Le client sélectionne ses préférences en quelques clics, avec des visuels dynamiques et une navigation fluide.
🔹 Une visualisation en temps réel : Il voit immédiatement à quoi ressemblera son produit ou son service personnalisé.
🔹 Un engagement renforcé : Plus un prospect interagit avec votre marque, plus il est enclin à passer à l’action.

Un outil puissant pour qualifier le besoin du client

Derrière cet aspect ludique, le configurateur est une machine de précision pour capter les attentes du prospect.

✔️ Analyse des préférences : Chaque choix effectué révèle ce qui est important pour lui (budget, fonctionnalités, style…).
✔️ Automatisation de la qualification : Vous récupérez des leads ultra-ciblés sans effort.
✔️ Personnalisation des offres : Grâce aux données collectées, vous pouvez adapter vos propositions et augmenter vos taux de conversion.

Pourquoi intégrer un configurateur à votre site web ?

+40% de conversion grâce à une expérience engageante
Des leads ultra-qualifiés pour vos équipes commerciales
Un parcours client fluide et automatisé
Une meilleure différenciation face à la concurrence
Un configurateur, c’est l’assurance d’attirer plus de prospects tout en simplifiant leur prise de décision.

 

Publié le

La landing page dans vos campagnes publicitaires

Une « petite page » peut faire toute la différence entre le succès et l’échec de votre campagne publicitaire. Cette page, souvent négligée mais incroyablement puissante, est connue sous le nom de « landing page » ou page de destination. Mais qu’est-ce qu’une landing page exactement et pourquoi est-elle si cruciale pour vos campagnes publicitaires en ligne ? Dans cet article, nous allons explorer son utilité et ses avantages pour votre entreprise.

Qu’est-ce qu’une landing page ?

Une landing page est une page web spécialement conçue pour accueillir les visiteurs après avoir vu une publicité en ligne, tel qu’une annonce publicitaire sur le web, une publicité télévisée ou même un QR code sur une affiche ou un magazine. Elle est conçue pour être simple, claire et pertinente par rapport à l’annonce qui l’a précédée. L’objectif principal d’une landing page est de convertir les visiteurs en clients potentiels ou en acheteurs.

Utilité de la Landing Page

Focalisation sur l’objectif :

Contrairement à votre site web principal, une landing page est spécifiquement conçue pour une seule action ou objectif, que ce soit pour inciter à un achat, à une inscription à une newsletter ou à un téléchargement de contenu. Cela permet de guider efficacement les visiteurs vers la conversion.

Réduction des distractions :

Les landing pages sont dépourvues des distractions habituelles d’un site web complet, comme les menus de navigation complexes ou les liens externes. Cela maintient l’attention du visiteur sur l’offre ou le produit présenté, augmentant ainsi les chances de conversion.

Personnalisation de l’expérience :

Grâce aux données collectées à partir des campagnes publicitaires, vous pouvez personnaliser le contenu de votre landing page pour correspondre aux intérêts et aux besoins spécifiques de votre public cible. Cela rend l’expérience plus pertinente et plus engageante pour les visiteurs.

Mesure de la performance :

Les landing pages sont facilement mesurables, ce qui signifie que vous pouvez suivre et analyser précisément les performances de vos campagnes publicitaires. Cela vous permet d’identifier ce qui fonctionne et ce qui doit être amélioré pour optimiser vos résultats.

 

Avantages de la Landing Page

Augmentation du taux de conversion :

En guidant les visiteurs vers une action spécifique, une landing page bien conçue peut considérablement augmenter le taux de conversion par rapport à un site web traditionnel.

Amélioration de la qualité des prospects :

Étant donné que les visiteurs arrivent sur la landing page après avoir cliqué sur une publicité pertinente, ils sont plus susceptibles d’être intéressés par ce que vous avez à offrir, ce qui se traduit par des prospects de meilleure qualité.

Optimisation des coûts publicitaires :

En améliorant la conversion des campagnes publicitaires, les landing pages contribuent optimiser le retour sur investissement (ROI) de vos efforts marketing, ce qui peut vous aider à économiser des coûts publicitaires à long terme.

Adaptabilité aux différents canaux :

Que vous utilisiez Google AdWords, la publicité télévisée ou des QR codes, vous pouvez créer des landing pages spécifiques à chaque canal pour maximiser la pertinence et l’efficacité de vos campagnes

En conclusion, la landing page est un outil pratique et rapide à mettre en place. En se concentrant sur un objectif spécifique, en réduisant les distractions et en offrant une expérience personnalisée, elle peut considérablement améliorer les performances de vos campagnes publicitaires.

Exemple de landing page : https://www.poujoulat.fr/fr/nos-solutions/maison-individuelle/amenager-exterieur/outsteel

Publié le

Comment migrer un site WordPress

La migration d’un site fait avec le CMS WordPress d’un serveur à un autre peut être un processus délicat, mais avec une bonne procédure, cela peut être fait en toute sécurité :

Avant de commencer :

Sauvegarde du site :

Assurez vous de sauvegarder tous les fichiers du site ainsi que la base de données à jour. Demander aux utilisateurs de l’administration de ne plus faire de modification avant la mise en ligne sur le nouveau server.

Migration des fichiers :

Exporter les fichiers : Téléchargez tous les fichiers du site depuis le serveur source vers votre ordinateur local via FTP.
Modifier les configurations : Si le chemin d’accès au site change, assurez-vous de mettre à jour les liens dans les fichiers de configuration (par exemple, wp-config.php) avec les nouvelles informations du serveur.

Migration de la base de données :

Exporter la base de données : Utilisez un outil comme phpMyAdmin pour exporter la base de données du site depuis le serveur source.
Modifier les liens dans la base de données : Si le nom de domaine ou le chemin d’accès au site change, modifiez ces informations dans la base de données. Vous pouvez utiliser un éditeur de texte ou un outil de recherche/remplacement dans le fichier SQL exporté.

Configuration sur le nouveau serveur :

Transférer les fichiers : Téléchargez les fichiers du site sur le nouveau serveur via FTP.
Configurer la base de données : Assurez-vous que les informations de la base de données dans le fichier wp-config.php correspondent à celles du nouveau serveur.

Mises à jour des liens dans WordPress :

Utiliser un outil de recherche et remplacement : Utilisez un plugin WordPress ou un script en ligne de commande pour mettre à jour les liens dans la base de données.

Test du site sur le nouveau serveur :

Vérification des liens et fonctionnalités : Assurez-vous que tous les liens fonctionnent correctement et que toutes les fonctionnalités du site sont opérationnelles.
Réglage des permaliens : Si vous utilisez des permaliens, assurez-vous qu’ils sont configurés correctement sur le nouveau serveur.

Mise à jour des DNS :

Modifier les enregistrements DNS : Mettez à jour les enregistrements DNS de votre nom de domaine pour pointer vers le nouveau serveur.

Publié le

Ajouter le Siret / un champ sur la facturation de Woocommerce

Il est possible d’ajouter un champ personnalisé dans le tunnel de conversion de woocommerce afin de demander d’autres informations à vos clients, tel que le Siret par exemple.

Dans cet exemple, nous afficherons le Siret dans le tunnel de conversion, puis nous l’enregistrerons en base et nous l’afficherons dans la commande de l’admin et dans la facture en pdf en utilisant le plugin PDF Invoice & Packing Slips for WooCommerce.

Afin d’ajouter ce nouveau champ, il vous faudra éditer le fichier functions.php de votre thème.

Comme l’indique la FAQ de Woocommerce, https://woo.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/ , pour insérer un champ dans le tunnel de conversion, il faut ajouter une action en ciblant le hook désiré.

Ici, nous insérerons le champ après le bloc notes/commentaires

add_action( 'woocommerce_after_order_notes', 'siret_checkout_field' );

Puis nous créons la fonction qui affichera le champ dans le tunnel :

function siret_checkout_field( $checkout ) {

    echo '' . __("Informations Société") . '';

    woocommerce_form_field( 'my_field_siret', array(
        'type' => 'text',
        'class' => array('siret-class form-row-wide'),
        'label' => __('N° de Siret'),
        'required' => true,
        'placeholder' => __('(siret)'),
        ), 
    $checkout->get_value( 'my_field_siret' ));

}

Ensuite, nous devons valider le champ étant donné que nous l’avons mis en obligatoire ‘required’ => true

add_action('woocommerce_checkout_process', 'siret_checkout_field_process');

function siret_checkout_field_process() {
// Check if set, if its not set add an error.
    if ( ! $_POST['my_field_siret'] )
    wc_add_notice( __( 'Merci de compléter ces champs' ), 'error' );
}

Une fois la commande passer, il faut sauvegarder les informations de ce champ en base. Pour ce faire, il faut mettre à jour la meta

add_action( 'woocommerce_checkout_update_order_meta', 'siret_checkout_field_update_order_meta' );

function siret_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['my_field_siret'] ) ) {
    update_post_meta( $order_id, 'N° de Siret', sanitize_text_field( $_POST['my_field_siret'] ) );
    }
}

Pour aficher ce nouveau champ dans la commande de l’administration, il suffira d’ajouter une action en utilisant le hook désiré, par exemple woocommerce _admin _order _data _after _billing _address, qui affichera le champ en dessous des informations de l’adresse de facturation

add_action( 'woocommerce_admin_order_data_after_billing_address', 'siret_checkout_field_display_admin_order_meta', 10, 1 );

    function siret_checkout_field_display_admin_order_meta($order){
    echo ''.__('N° de Siret').': ' . get_post_meta( $order->id, 'N° de Siret', true ) .'
    ';
}

Maintenant que nous avons bien les informations sur le front et dans le back, nous pouvons l’afficher dans la facture PDF grâce au module PDF Invoice & Packing Slips for WooCommerce.

Pour commencer, installer le module. Ce module vous permettra d’avoir vos factures au format PDF en front et en back.

Attention ce plugin nécessite l’accès au fichier /wp-admin/admin-ajax.php, donc si vous avez protégé votre répertoire admin avec un mot de passe, n’oubliez d’ajouter une règle à votre htaccess de type :

# Allow access to admin-ajax.php without authentication
SetEnvIf Request_URI "^/wp-admin/admin-ajax\.php$" allow_ajax
Order allow,deny
Allow from env=allow_ajax
Satisfy any

Comme l’indique la FAQ du plugin, vous pouvez ajouter des actions via des hook :

Displaying a custom field

La liste complète des hook se trouve en bas de page : PDF template action hooks 

Dans notre exemple, nous afficherons notre champ après l’adresse de facturation via ce hook wpo_ wcpdf_ after_ billing_ address

add_action( 'wpo_wcpdf_after_billing_address', 'wpo_wcpdf_siret_checkout_field', 10, 2 );
function wpo_wcpdf_siret_checkout_field ($template_type, $order) {
    if ($template_type == 'invoice') {
        $document = wcpdf_get_document( $template_type, $order );
        ?>      
        <tr class="siret">
            <td>Siret : <?php echo get_post_meta( $order->id, 'N° de Siret', true ); ?> </td>
        </tr>
        <?php
    }
}

Noter qu’ici on cible la template pdf ‘invoice’ mais vous pouvez aussi cibler la template bon de commande $template_type == ‘packing-slip’

Voici le code complet à ajouter à votre fichier functions.php de votre thème.

Pour ajouter un nouveau champ, il vous suffira de changer le nom de la fonction siret_checkout_field et le nom du champ/meta my_field_siret en faisant un chercher/remplacer.

/**-- SIRET --**/
/**
* Add the field to the checkout
*/
add_action( 'woocommerce_after_order_notes', 'siret_checkout_field' );

function siret_checkout_field( $checkout ) {

    echo '' . __("Informations Société") . '';

    woocommerce_form_field( 'my_field_siret', array(
        'type' => 'text',
        'class' => array('siret-class form-row-wide'),
        'label' => __('N° de Siret'),
        'required' => true,
        'placeholder' => __('(siret)'),
        ), 
    $checkout->get_value( 'my_field_siret' ));
}

/**
* Process the checkout
*/
add_action('woocommerce_checkout_process', 'siret_checkout_field_process');

function siret_checkout_field_process() {
// Check if set, if its not set add an error.
    if ( ! $_POST['my_field_siret'] )
    wc_add_notice( __( 'Merci de compléter ces champs' ), 'error' );
}

/**
* Update the order meta with field value
*/
add_action( 'woocommerce_checkout_update_order_meta', 'siret_checkout_field_update_order_meta' );

function siret_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['my_field_siret'] ) ) {
    update_post_meta( $order_id, 'N° de Siret', sanitize_text_field( $_POST['my_field_siret'] ) );
    }
}

/**
* Display field value on the order edit page
*/
add_action( 'woocommerce_admin_order_data_after_billing_address', 'siret_checkout_field_display_admin_order_meta', 10, 1 );

    function siret_checkout_field_display_admin_order_meta($order){
    echo ''.__('N° de Siret').': ' . get_post_meta( $order->id, 'N° de Siret', true ) .'
    ';
}

/**
* Display field value on the pdf invoice
*/
add_action( 'wpo_wcpdf_after_billing_address', 'wpo_wcpdf_siret_checkout_field', 10, 2 );
function wpo_wcpdf_siret_checkout_field ($template_type, $order) {
    if ($template_type == 'invoice') {
        $document = wcpdf_get_document( $template_type, $order );
        ?>      
        <tr class="siret">
            <td>Siret : <?php echo get_post_meta( $order->id, 'N° de Siret', true ); ?> </td>
            
        </tr>
        <?php
    }
}
/**-- EOF SIRET --**/
Publié le

Découvrez le nouveau site de l’UFL

L’Union Française du Levage (UFL) est un syndicat professionnel représentant les entreprises françaises de levage et de manutention ainsi que les fabricants d’équipements spéciaux du secteur.

Créé en 1972 sous le nom de Syndicat National des Utilisateurs de Grues (SNUG), le syndicat change de nom en 2006 pour devenir l’UFL. Le 1er janvier 2016, l’Union Française du Levage rejoint la Fédération des matériels DLR et lui confie sa gestion. Une partie de l’équipe de permanents est alors mobilisée pour le syndicat et ses adhérents.

L’UFL est également fondateur de l’ESTA, association européenne pour les transports exceptionnels et les grues mobiles. L’ESTA coordonne l’action des associations nationales et représente la profession à l’extérieur et particulièrement auprès des instances européennes, où elle siège en tant qu’expert.

En tant que membre, en plus des conseils, des informations et de l’accompagne personnalisé, vous pourrez accéder aux actualités en ligne du syndicat.

 

https://www.uflevage.fr/

 

Publié le Laisser un commentaire

Ajouter un champ dans une Table SQL sur phpMyAdmin

e-loou-ajouter-champ-table-phpmyadmin

Pour insérer une colonne dans une table donc un champ vous avez plusieurs méthodes possible. Voici 2 méthodes simples à mettre en œuvre en vous connectant à votre base de donnée avec phpMyAdmin.

I - Requête SQL

La première méthode consiste à exécuter une requête SQL dans la Table.
Pour ce faire, cliquez sur la table désirée, puis aller dans l’onglet SQL et exécutez le code suivant :

ALTER TABLE `nom_de_table` ADD `nom_nouvelle_colonne` VARCHAR(255) AFTER `nom_colonne_existante`

la commande ALTER TABLE permet de modifier la structure d’une Table

ADD sert à ajouter un champ

VARCHAR(255) est le type de champ. Il peut être  égal à INT, VARCHAR(xx), TEXT, DATE, etc …

AFTER indique que l’on souhaite insérer notre nouveau champ/nouvelle colonne après un champ existant.
Cette commande n’est pas nécessaire si vous souhaitez ajouter votre nouveau champ en fin de structure.

Attention à l’utilisation des ` et des ‘ lors de votre requête. ce sont 2 signes différents.

II - Fonction de phpMyAdmin

Si vous ne vous sentez pas à l’aise avec l’exécution de code SQL, vous pouvez également utiliser l’outil intégré de phpMyAdmin.

Cliquez sur la Table à modifier, puis aller à l’onglet Structure.

En bas de la liste de champs, vous trouverez l’outil permettant d’ajouter des colonnes.

Avant le bouton exécuter, vous avez la liste des champs déjà présents dans votre Table. Sélectionnez le champ ou vous souhaitez intégrer votre nouveau champ après.

e-loou-ajouter-champ-table-phpmyadmin

Complétez les données comme vous le souhaitez.

De manière générale, seules les colonnes nom, type et interclassement sont à remplir.

Avant de cliquer sur Enregistrer, vous pouvez demander à tester votre demande en cliquant sur Aperçu SQL et phpMyAdmin vous indiquera si votre demande est correctement remplie.

Publié le Laisser un commentaire

Clipper

Clipper
Clipper

Créée en 1956, la société Clipper Coramine, membre de Saint-Gobain Solutions France, conçoit, développe et fabrique ses propres cloisons de bureaux.

Reconnues pour leur simplicité d’assemblage et leur rapidité de mise en œuvre, les cloisons amovibles délivrent des solutions d’agencement privilégiant la lumière naturelle, le confort acoustique et la modularité des espaces.

Conception et réalisation du nouveau site Clipper.fr par E-loou.

Publié le Laisser un commentaire

Propy Delta

E-loou Propy Delta
E-loou Propy Delta

Créée en 1988, la société Propy Delta développe très rapidement ses activités d’impression. Ils s’engagent entre-autres auprès des acteurs de la production de Champagne pour leur fournir des étuis de bouteilles et magnums en Polypropylène imprimés. Leur solutions rencontrent un succès important avec des conceptions et designs innovants en PP translucide, nécessitant des savoir-faire spécifiques en impression et assemblage.

Entreprise agile, Propy Delta fabrique des pièces unitaires, prés-série, petites à moyennes séries et grands formats.

Conception, réalisation et nouvelle charte graphique du site Propy Delta par E-loou.

Publié le Laisser un commentaire

Cartopal

e-loou_cartopal
e-loou_cartopal

Le packaging (ou emballage en français) est l’ensemble des éléments physiques qui enveloppent et protègent un produit, afin de faciliter sa distribution, sa vente et son utilisation par le consommateur final. Il s’agit d’un élément important du marketing et de la communication d’une marque, car il permet de mettre en valeur le produit et de communiquer des informations importantes sur ses caractéristiques et ses avantages. Les marques de luxe accordent une grande importance à la qualité, au design et à la finition de leur packaging.

Cartopal l’a bien compris.

Les matériaux utilisés pour le packaging de luxe sont souvent nobles et raffinés. Les techniques de fabrication sont également très sophistiquées, avec des finitions haut de gamme comme la dorure à chaud, la sérigraphie, la gravure, l’embossage, le découpage laser, etc.

 

 

Conception, réalisation  et charte graphique du site Cartopal par E-loou.

Publié le Laisser un commentaire

DLR – La fédération des matériels

DLR
DLR

DLR regroupe et fédère aujourd’hui les entreprises des secteurs de la distribution, de la location, de la maintenance et des services pour les matériels destinés à la construction et à la manutention.

La fédération rassemble désormais aussi des syndicats, membres partenaires, dans les domaines de la construction industrialisée et modulaire (ACIM), des matériels agricoles et d’espaces verts (FNAR) et du levage (UFL).

Ses adhérents réalisent 70 % du volume d’activité du marché. DLR est présidé depuis 2021 par Philippe COHET et animé par de nombreux chefs d’entreprise de la profession et une équipe de 12 collaborateurs.

Refonte complète et nouveau design du site DLR par E-loou.