Acquérir de bonnes bases

Transcription

1 Acquérir de bonnes bases Formation proposée par : Chapitre 8 Intégrer un formulaire sur un site ou un blog

2 Commençons par éditer notre formulaire

3 Cliquez sur «Gérer mes formulaires»

4 Cliquez sur le crayon pour renommer votre formulaire. Un «point info» est disponible pour apporter de l aide. Pour accéder aux anciens formulaires (créés avec une version antérieure de SG Autorépondeur).

5 Cliquez sur la roue dentée pour accéder aux actions possibles sur le formulaire. Pour dupliquer le formulaire. Pour supprimer le formulaire. Pour modifier le formulaire. Pour réinitialiser les statistiques du formulaire.

6 Quelques exemples

7 Modifier le formulaire Voici l édition du formulaire Pour la création de formulaire, voir le chapitre 6 «création de formulaire».

8 Un simple clic permet de dupliquer un formulaire. Dupliquer le formulaire

9 Une confirmation vous est proposée pour réinitialiser. Réinitialiser les statistiques

10 Intégration de votre formulaire sur votre site

11 Le code source du formulaire Les 3 options : Téléchargement du code sous forme de fichier.txt 3 2 Accès au code formaté en iframe 3 Accès direct au code source

12 SG Autorépondeur est compatible avec les plateformes : Wordpress Page Html ou Php Joomla Prestashop

13 SG Autorépondeur est compatible avec les plugins (extensions) wordpress : 1tpesq.com List Eruption OptimizePress Hybrid Connect Lead Pages Ninja Popup WebinarJam Bloom ThriveLeads Cette liste n est pas exhaustive. Consultez nos études de cas dans le chapitre 8 de notre programme d apprentissage.

14 Intégration Voyons l intégration d un formulaire SG-autorepondeur dans un environnement de blog Wordpress

15 Exemple avec wordpress

16 Exemple avec wordpress

17 Copiez le code source Les 3 options : Téléchargement du code sous forme de fichier.txt 3 2 Accès au code formaté en iframe 3 Accès direct au code source

18 Exemple avec wordpress

19 Exemple avec wordpress Cliquez sur le bouton «Enregistrer». Vous pouvez éditer le code de ce widget si vous désirez optimiser le formulaire, son apparence et son allure.

20 Exemple avec wordpress Voici le résultat du widget intégré dans la barre latérale de wordpress

21 Exemple avec wordpress Dans un widget : Un simple copier/coller fonctionne car Wordpress n altère pas le code automatiquement. Dans un article ou une page : Un simple copier coller ne fonctionne pas car Wordpress altère le code automatiquement. Vous pouvez intégrer votre formulaire en utilisant l iframe ou le plugin «PHP Code For Posts». Optin Manager est un exemple de plugin, payant, vous permettant de gérer vos formulaires sur Wordpress.

22 «PHP Code For Posts» sur Wordpress Le support client n'inclut normalement pas l'assistance sur les plugins Wordpress. Si vous avez la même version de «PHP Code For Post» que nous : 1) Cliquez sur «PHP Code» dans le menu de gauche en bas. 2) Cliquez sur «Add New». 3) Dans le 1er champ mettez un nom de code (ex : formulaire sg). 4) Dans le 2ème champ ne mettez rien. 5) Dans le 3ème champ collez le code html du formulaire. 6) Validez. 7) Dans votre article, vous coller juste le short code par exemple : [php snippet=1] pour faire appraître le formulaire.

23 Intégration Voyons l intégration d un formulaire SG-autorepondeur dans une page HTML ou PHP

24 Exemple avec html ou php Commencez par COPIER le code source de votre formulaire sur SG Autorépondeur.

25 Exemple avec html ou php Ouvrez votre fichier dans un éditeur (Notepad++) puis repérer l endroit ou se trouvera le formulaire. Ensuite faîtes un clic droit pour «Coller».

26 Exemple avec html ou php Vérifiez bien l encodage de votre fichier (utf-8 de préférence).

27 Exemple avec html ou php COLLEZ le code puis cliquez sur «Fichier», et sur «Enregistrer»

28 Exemple avec html ou php Transférez alors votre fichier de page sur votre nom de domaine via votre logiciel de transfert FTP (ici, Filezilla).

29 Intégration Joomla Voyons l intégration d un formulaire SG-autorepondeur avec le CMS Joomla

30 Exemple avec Joomla Cliquez sur «Extension» puis «Gestion des plugins».

31 Exemple avec Joomla Cliquez sur «Editor TinyMCE» ou votre éditeur actif.

32 Exemple avec Joomla Désactivez le nettoyage du code à l ouverture et le nettoyage du code lors de la sauvegarde du contenu. Ensuite cliquez sur «Sauver».

33 Exemple avec Joomla Cliquez sur «Extension» puis «Gestion des modules».

34 Cliquez sur «Nouveau». Exemple avec Joomla

35 Exemple avec Joomla Cliquez sur «HTML personnalisé».

36 Exemple avec Joomla Choisissez un titre, la colonne (gauche ou droite), l emplacement, etc. Puis descendez en bas de page.

37 Exemple avec Joomla Cliquez sur l onglet «HTML».

38 Exemple avec Joomla Faîtes un clic droit puis «Coller».

39 Exemple avec Joomla Cliquez sur «Mettre à jour» et enregistrez en haut à droite.

40 Intégration Voyons l intégration d un formulaire SG-autorepondeur avec PRESTASHOP

41 Exemple avec Prestashop Recherchez sur internet un module permettant d ajouter un code html sur Prestashop. Ce site web propose le module JC_FreeBlock2. Téléchargez le sur votre ordinateur.

42 Exemple avec Prestashop Cliquez sur «Modules» dans le menu «Modules».

43 Cliquez sur «Ajouter un module. Exemple avec Prestashop

44 Exemple avec Prestashop Sélectionnez l emplacement du fichier puis cliquez sur «Mettre ce module en ligne».

45 Exemple avec Prestashop Tapez le début du nom du module dans l onglet de recherche puis cliquez sur «Rechercher».

46 Cliquez sur «Installer». Exemple avec Prestashop

47 Exemple avec Prestashop Cliquez sur «Configurer».

48 Exemple avec Prestashop Faîtes un clic droit puis «Coller» pour coller le code html du formulaire SG Autorépondeur. Saisissez votre titre dans la zone «Titre». Puis cliquez sur «Sauver ce bloc libre».

49 Un aperçu vous sera présenté mais ce sera pas conforme à la réalité. Exemple avec Prestashop

50 Cliquez sur «Positions» dans le menu «Modules». Exemple avec Prestashop

51 Descendez l ascenseur jusqu à «Left Column blocks». Exemple avec Prestashop

52 Exemple avec Prestashop Déplacez le bloc en cliquant sur la flèche du haut pour le remonter. Pour le placer sur la colonne de droite, cliquez sur le crayon.

53 Exemple avec Prestashop Vous pouvez également utiliser uniquement le module «newsletter» fournit par Prestashop et utiliser le module SG Autorépondeur pour Prestashop afin de synchroniser automatiquement les inscrits ou les clients depuis votre boutique Prestashop vers vos listes SG Autorépondeur.

54 Précisions sur les aspects techniques La création de plusieurs formulaires : Vous pouvez créer plusieurs formulaires dans une même liste. Sur votre compte SG, seul le dernier formulaire créé d une liste sera enregistré. Vous pouvez créer un formulaire, l ajouter sur votre blog, puis recréer un nouveau formulaire pour la même liste et l ajouter sur votre blog sans que le premier formulaire ne soit impacté. Si vous souhaitez conserver les codes html des deux formulaires, vous pouvez facilement exporter le fichier téléchargeable sur votre ordinateur pour chacun des formulaires.

55 Précisions sur les aspects techniques Notre support client n inclut pas : L adaptation du code du formulaire, en fonction des modifications imposées par votre thème Wordpress ou votre feuille de style CSS. Le transfert de vos fichiers sur votre serveur ou votre hébergement. L installation et l apprentissage d un logiciel de transfert FTP tel que Filezilla. L apprentissage et la maîtrise du code HTML, CSS ou PHP. La mise à jour de ce chapitre selon les nouvelles versions des CMS (Wordpress, Prestashop, ). De nombreuses ressources sont disponibles sur internet : Des forums ( Des tutoriels et cours de formation gratuits ( Des blogs ( Des moteurs de recherche (

56 Acquérir de bonnes bases Merci! Passez au chapitre suivant