Tutoriel : Ajoutons un formulaire Contact Form 7 dans Elementor !

avatar de baptiste pagès
Par Baptiste Pagès le 13 septembre 2022

Publié dans Tutoriel

Mis à jour le 13 septembre 2022

Dans ce tutoriel, je vais vous expliquer comment inclure un formulaire Contact Form 7 dans Elementor. Je ferai de mon mieux pour illustrer un maximum mes propos, pour que même les débutants puissent s'y retrouver.

  1. Dans la liste des formulaires Contact Form 7, copiez le code court du formulaire qui vous intéresse.
  2. Dans l'édition de page Elementor, ajoutez un bloc "Code Court" puis collez le code court du formulaire.
  3. Pour finir, stylisez votre formulaire avec un peu de CSS (optionnel).

Préambule : pourquoi vouloir utiliser Contact Form 7 dans Elementor ?

C'est une question qu'il faut se poser avant de vous lancer.

Sachez qu'Elementor propose un bloc de formulaire qui conviendra parfaitement pour un simple formulaire de contact.

Par contre, dès que vous voudrez faire des choses un peu plus avancées, il vous faudra souvent laisser de côté le formulaire inclus dans Elementor au profit d'une autre solution comme Contact Form 7.

C'est par exemple le cas si vous voulez créer un formulaire à plusieurs étapes comme je l'explique dans ce tuto.

Prérequis

Avant de commencer, veillez à avoir installé Elementor et Contact form 7 sur votre site. Si vous ne savez pas installer une extension WordPress, je vous l'explique dans cet article.

Dans ce tutoriel, nous utiliserons le formulaire par défaut de contact form 7.

Insérer un formulaire contact form 7 dans une page Elementor

Pour commencer, ouvrez l'éditeur de page Elementor pour la page qui vous intéresse.

tutoriel contact form 7 dans elementor - étape 1

Ensuite, il faudra simplement aller chercher un bloc "Code court" dans le menu de gauche, puis le déposer dans la page.

tutoriel contact form 7 dans elementor - étape 2

Après, dans un autre onglet, allez trouver la liste des formulaires Contact Form 7 dans l'onglet Contact de l'administration WordPress. Puis copiez le code court du formulaire qui vous intéresse.

tutoriel contact form 7 dans elementor - étape 3

Il ne reste plus qu'à coller ce formulaire dans le bloc "Code Court" d'Elementor !

tutoriel contact form 7 dans elementor - étape 4

Et voilà ! Votre formulaire est fonctionnel. Mais il est moche.

Styliser rapidement le formulaire sans plugin

Pour ajouter un peu de style à ce formulaire, nous allons ajouter un bloc "HTML" juste en dessous.

tutoriel contact form 7 dans elementor - étape 5
tutoriel contact form 7 dans elementor - étape 6

Dedans, nous allons définir un peu de CSS afin de rendre le formulaire un peu plus jolie. Je vous met le code à copier coller ci-dessous.

tutoriel contact form 7 dans elementor - étape 7

Et voilà le code utilisé :

<style>
    .wpcf7-form input, .wpcf7-form textarea{
        width:100%;
        background:white;
        border:1px solid #ddd;
        border-left: 3px solid black;
    }
    .wpcf7-form input[type=submit]{
        background:black;
        font-size:22px;
        text-transform: uppercase;
        letter-spacing: 5px;
    }
</style>

Dans le cas où vous souhaitez utiliser le formulaire sur plus d'une page, alors il vaudra mieux oublier les balises <style> et inclure le CSS directement dans le panneau de CSS additionnel de WordPress ou dans le fichier style.css de votre thème.

Vous pouvez aussi copier coller ce code, avec les balises <style>, après votre formulaire Contact Form 7 dans la configuration du formulaire.

Bienvenue sur mon site !

Je m'appelle Baptiste.

Je suis un webdesigner et consultant SEO indépendant spécialisé dans WordPress. Depuis maintenant plus de six ans, j'aide les petites entreprises à se démarquer sur Internet et à développer leur visibilité.

J'écris aussi pas mal d'articles pour aider les débutants. N'hésitez pas à me contacter si vous avez une question !

Cet article vous a plu ?

Voici d'autres articles populaires qui vous intéresseront peut-être :
SEO
Les bases du Référencement Organique
Apprenez les bases du référencement organique afin d'éviter les erreurs de débutant.
Lire cet article
DESIGN
Comment changer la police d'un site WordPress ?
Tout ce qu'il faut savoir pour gérer la typographie de votre site WordPress est ici, suivez le guide !
Lire cet article
CODE
Comment ajouter du CSS additionnel dans WordPress ?
Découvrez comment ajouter facilement du code CSS additionnel dans n'importe quel site WordPress.
Lire cet article
WOOCOMMERCE
Comment importer des produits dans WooCommerce ?
Apprenez à importer des produits à votre boutique WooCommerce très facilement (en vidéo).
Lire cet article
Je m'appelle Baptiste et je suis un webdesigner / consultant SEO spécialisé dans WordPress, basé à Grasse dans le Sud de la France. J'aide les petites entreprises à développer leur présence web dans ce monde de fou 😉
Générateur de schema.org local business
0