Dans cet article vous découvrirez comment créer un formulaire avec Elementor gratuit.
Bien que le widget Formulaire ne soit disponible que sur Elementor Pro, cela ne signifie pas que vous ne pouvez pas créer de formulaire sur la version gratuite d’Elementor.
Si vous devez ajouter un formulaire à la page que vous créez avec la version gratuite d’Elementor, vous pouvez utiliser les deux méthodes que nous allons couvrir dans cet article.
Elementor, que ce soit la version pro ou la version gratuite, est livré avec deux widgets que vous pouvez utiliser pour créer un formulaire. Ce sont les widgets HTML et Shortcode. Avec le widget HTML, vous pouvez intégrer un formulaire HTML, tandis que le widget Shortcode vous permet d’intégrer un formulaire de plugins de formulaire qui utilisent le shortcode tel que Contact Form 7.
Créer un formulaire avec la version gratuite d’Elementor à l’aide d’un widget HTML
Cette méthode vous oblige à avoir une compétence HTML pour créer le formulaire. Ou, vous pouvez télécharger un modèle de formulaire HTML sur Internet. W3docs compte plus de 60 Modèles de formulaire HTML que vous pouvez télécharger gratuitement.
Pour commencer, créez une nouvelle page et modifiez-la avec Elementor (Pages – > Ajouter). Bien sûr, vous pouvez également modifier une page existante. Si vous souhaitez créer un formulaire sur une nouvelle page, n’oubliez pas de définir la mise en page du formulaire en cliquant sur l’icône d’engrenage dans le panneau inférieur gauche.
Ajoutez une nouvelle section en cliquant sur le bouton plus dans la zone d’édition et ajoutez le formulaire HTML en le faisant glisser du panneau gauche vers la zone d’édition. Placez-le dans la zone que vous souhaitez. Ensuite, allez dans le panneau de gauche et collez le code HTML du formulaire dans le champ Code HTML sous l’onglet Contenu.
Publiez / mettez à jour la page une fois que vous avez terminé de la modifier.
Découvrez aussi : Comment utiliser les widgets / modèles Elementor comme blocs Gutenberg
Une chose. Si votre formulaire HTML utilise du CSS externe, des images ou du JavaScript pour le style, assurez-vous de télécharger les dossiers contenant le code CSS, les images, et JavaScript dans le répertoire racine de votre site Web.
Créer un formulaire sur Elementor gratuit à l’aide de contact form 7
Si vous n’avez aucune compétence HTML et que vous ne souhaitez pas utiliser un modèle de formulaire HTML, vous pouvez créer un formulaire sur la version gratuite d’Elementor à l’aide du plugin Contact form 7. Il existe en fait de nombreux autres plugins de formulaire. Nous recommandons Contact Form 7 car c’est le plugin de formulaire le plus populaire pour WordPress et entièrement gratuit.
Tout d’abord, installez le plugin Contact Form 7. Pour ce faire, allez à Extensions – > Ajouter. Tapez “ contact form 7 ” dans la zone de recherche et cliquez sur le bouton Installer maintenant une fois que vous l’avez trouvé.
Activez le plugin immédiatement une fois installé.
Contact Form 7 est livré avec un formulaire par défaut ( un formulaire de contact ). Vous pouvez l’utiliser si vous le souhaitez. Si vous souhaitez créer un nouveau formulaire à la place, vous pouvez aller à Contact – > Ajouter. Donnez à votre formulaire un nom pour vous permettre de l’identifier facilement à l’avenir.
Par défaut, votre formulaire se composera de quatre champs: nom, e-mail, sujet et message.
Si vous souhaitez ajouter un nouveau champ, placez votre pointeur dans la zone dans laquelle vous souhaitez ajouter le nouveau champ (, vous pouvez le placer sous ou au-dessus d’un champ existant ). Ajouter un label pour le nouveau champ de formulaire au format <label> votre label préféré </label>.
Placez votre pointeur juste après le label et sélectionnez un champ dans l’onglet champ. Vous pouvez ajouter un nouveau saut de ligne pour rendre votre nouveau champ plus propre que les autres champs existants.
Remplissez les champs et cliquez sur Insérer la balise ( vous pouvez tout laisser par défaut ).
Contact Form 7 enverra les soumissions soumises via votre formulaire à un e-mail. Vous pouvez définir l’e-mail à partir de l’onglet E-mail.
Vous pouvez aller à l’onglet Messages si vous souhaitez remplacer les messages par défaut. Vous pouvez personnaliser le message qui s’affiche après que vos visiteurs aient envoyés avec succès le formulaire ou le message d’erreur lorsque le formulaire n’est pas envoyé, etc…
Cliquez sur le bouton Enregistrer une fois que vous avez terminé de modifier le formulaire et de copier le shortcode.
Pour ajouter le formulaire que vous venez de créer à votre page Elementor, créez une nouvelle page et modifiez-la avec Elementor, ou vous pouvez également modifier une page existante.
Lire aussi : Comment désactiver un popup Elementor sur les smartphones
Ajoutez une nouvelle section pour placer le formulaire et ajoutez le widget Shortcode. Une fois le widget Shortcode ajouté, allez dans le panneau de gauche et collez le shortcode que vous avez copié dans le champ Shortcode sous l’onglet Contenu.
Publiez / mettez à jour votre page une fois que vous avez terminé de la modifier.
Contact Form 7 utilise le format de style du thème WordPress que vous utilisez. Vous pouvez styliser votre formulaire Contact Form 7, mais les compétences CSS sont requises. Vous pouvez également consulter cet article sur Comment personnaliser un formulaire Contact Form 7 avec Essential Addons et Elementor.
Obtenez Elementor Pro Maintenant !!!
Conclusion
Voila ! C’est tout pour cet article qui vous montre comment créer un formulaire avec Elementor gratuit. Si vous avez des soucis sur comment y arriver faites le savoir dans les commentaires.
Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.
Mais en attendant, partagez cet article sur vos différents réseaux sociaux.
…
