Pour intégrer un formulaire Simple CRM à votre site web, le plus simple est de passer par un iframe.
Il vous faut donc créer une nouvelle page sur votre site web ou utiliser une page existante et ensuite y déposé le code suivant :
<iframe
title="Simple Form"
id="simpleIframe1"
width="100%"
height="900"
src="LIEN-DU-SIMPLE-FORM">
</iframe>
En remplaçant LIEN-DU-SIMPLE-FORM par l’URL de votre formulaire.
Le plus simple est de demander au webmaster de votre site de le faire.
La façon de procéder dépend de la technologie utilisé pour créé le site.
PLUSIEURS FORMULAIRES
Si vous désirez faire une page multi-formulaire, imaginons une entreprise avec plusieurs commerciaux. Il y a 3 commerciaux dans le code ci-dessous, un lien pour le télécharger se trouve en bas de page :<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/><title>Prise de RDV</title>
<style type="text/css">
iframe {border: 0px;width: 100%;}
.simpleForm {display:none;}
.priseRDV{margin:50px auto;text-align: center;}
.simpleButton{border:1px solid black;cursor: pointer;}
.priseRDV .simpleButton{white-space: nowrap;border-color: rgb(0, 0, 0);border-style: solid;border-width: 1px;box-shadow: 1px 1px 6px #555;border-radius: 5px;color: #000;font-size: .875rem!important;-moz-border-radius: 5px;padding: 2px;background-color: white;text-decoration: none;font-family: 'Tahoma', 'Roboto', sans-serif!important;letter-spacing: 0.91px;margin: 10px;}
.priseRDV .simpleButton.selected{color: white;background-color: #8f8f8f;}
.priseRDV .simpleButton:hover {background-color: #fff;color: #000;text-decoration: none;border-color: #8f8f8f;border-width: 3px;}
</style>
</head>
<body>
<div class="priseRDV">
<a id="button-1" class="simpleButton selected">COMMERCIAL 1</a>
<a id="button-2" class="simpleButton">COMMERCIAL 2</a>
<a id="button-3" class="simpleButton">COMMERCIAL 3</a>
</div>
<iframe title="Formulaire 1" id="simpleIframe1" height="800" src="LIEN-FORMULAIRE-1" class="simpleForm" style="display: block;">
</iframe>
<iframe title="Formulaire 2" id="simpleIframe2" height="800" src="LIEN-FORMULAIRE-2" class="simpleForm">
</iframe>
<iframe title="Formulaire 3" id="simpleIframe3" height="800" src="LIEN-FORMULAIRE-3" class="simpleForm">
</iframe>
<script language="JavaScript" type="text/javascript">
var buttons = document.getElementsByClassName("simpleButton");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function(e) {
changeIframe(e);
}, false);
}
function changeIframe(e){
var divs = document.getElementsByClassName("simpleForm");
for (var i=0; i < divs.length; i++) {
display = divs[i].style.display;
if(display == 'block' ){
divs[i].style.display = "none";
}
}
let id = e.target.id;
var divs = document.getElementsByClassName("selected");
for (var i=0; i < divs.length; i++) {
divs[i].classList.remove("selected");
}
e.target.classList.add("selected");
id = id.split("-")[1];
let iframe = document.getElementById('simpleIframe'+id);
iframe.style.display = "block";
}
</script>
</body>
Le code, sans trop rentré dan le détail, se divise ainsi :
- CSS (règle visuel) :
se trouve entre <style type="text/css"> et </style>.
Va définir à quoi ressemble la page au niveau des couleurs, des espaces, ...
- Boutons (3 ici) :
Se trouve entre : <div class="priseRDV"> et </div>.
Défini 3 buttons qui apparaîtront à l’écran.
L'id équivaut au formulaire, voir en dessous.
Vous pouvez modifier "COMMERCIAL" pour changer le texte du bouton.
- Iframe (3 ici) :
Toutes les lignes avec iframe.
Fonctionne comme expliquer au dessus dans l'integration d'un formulaire sur son site.
Chaque id sera activé par un bouton, exemple simpleIframe2 sera activé par le bouton avec l'id button-2 .
N'oubliez pas de remplacer LIEN-FORMULAIRE-X par le lien du simple form .
- Script JS :
se trouve entre <script language="JavaScript" type="text/javascript"> et </script>
Contient du code nécessaire au bon fonctionnement de la page.
Si vous désirez une page avec plus ou moins de formulaire, il faut ajouter ou enlever un bouton et un iframe.
Pour enlever sélectionné une ligne de bouton et supprimer la puis supprimer l'iframe correspondant.
Pour ajouter, il faut dupliquer une ligne déjà existante d'un bouton (en la copiant/collant) et la modifier pour être la "nouvelle ligne". Exemple de la ligne à rajouter dans le code ci dessus pour passer à 4 commerciaux :
<a id="button-4" class="simpleButton">COMMERCIAL 4</a>
l'id est button-4 et le texte du bouton est COMMERCIAL 4 car il s'agit du 4ième bouton .
Il faut ensuite faire pareil avec l'iframe et en rajouter un. Exemple dans le code ci dessus.
<iframe title="Formulaire 4" id="simpleIframe4" height="800" src="LIEN-FORMULAIRE-4" class="simpleForm" style="display: block;">
l'id est devenu simpleIframe4 et le tittre Formulaire 4 . Il faudra remplacer LIEN-FORMULAIRE-4 par le lien du formulaire qui doit être ajouter à la page.
Vous pourrez retrouver le code de l'exemple en cliquant ICI
Aucun commentaire:
Enregistrer un commentaire