L'événement AJAX d'envoi de formulaire permet de synchroniser dans Connectif les formulaires intégrés et d'envoyer la notification de "submit" à l'outil via AJAX.
Comment l'utiliser
L'événement AJAX de "submit" utilise le JavaScript de Connectif pour envoyer les données du formulaire via la méthode sendEvents, en effectuant l'appel suivant à Connectif :
connectif.managed.sendEvents(events, options)
Obtenir l'identifiant du formulaire
La propriété formID identifie le formulaire intégré.
Accédez au formulaire intégré et localisez l'formID dans son URL.
Exemple d'événement onsubmit
L'événement onsubmit capte l'envoi du formulaire et exécute la fonction sendForm, qui envoie les données via AJAX.
Le formulaire aura cet aspect :
<form onsubmit = "sendForm()">
Email: <input type = "email" value = "" id= "email" /><br/>
Nom: <input type = "text" value = "" id= "name" /><br/>
<input type = "submit" value = "Envoyer" />
</form>
Exemple de notification d'envoi
La notification aura cet aspect :
function sendForm() {
connectif.managed.sendEvents(
[
{
type: 'form-submitted',
eventId: 'ID_DU_FORMULAIRE_INTÉGRÉ_DE_CONNECTIF',
primaryKeyField: 'email',
payload: {
'email': document.getElementById('email').value,
'name': document.getElementById('name').value,
}
}
]
) }
S'il s'agit d'un formulaire d'inscription (qui demande l'email), il est nécessaire d'inclure le champ "primaryKeyField", et sa valeur sera le nom du champ dans le payload, qui contiendra l'email envoyé par le formulaire. Si le formulaire n'est pas de type inscription, il n'est pas nécessaire d'indiquer le champ "primaryKeyField".
Félicitations !
Vous avez terminé la leçon.
Des questions sans réponse ?
N'oubliez pas que vous avez à votre disposition nos spécialistes Connectif. Pour les contacter, il vous suffit d'ouvrir un ticket de support en cliquant sur le bouton bleu "Aide" de votre tableau de bord.
RÉSOLUTION DES PROBLÈMES
Que faire si le formulaire n'est pas détecté par Connectif ? Il existe certains cas où l'outil de Formulaires Intégrés de Connectif ne peut pas détecter les formulaires sur votre site web, par exemple :
- Le formulaire se trouve sur une page nécessitant une authentification.
- Le formulaire est construit dynamiquement via JavaScript.
Dans ces cas, l'option recommandée est de créer un événement d'intégration personnalisé pour recevoir des données dans Connectif.
- Créez votre intégration personnalisée en suivant les étapes de cet article.
- Une fois créée, allez dans l'onglet Recevoir des données et cliquez sur Créer un nouvel événement de réception.
- Donnez-lui un nom et définissez les champs à envoyer en cliquant sur Ajouter un nouveau champ.
- Cliquez sur Enregistrer et retournez à la liste des événements de votre intégration personnalisée, où se trouve l'identifiant de l'événement nouvellement créé :
- Copiez cet identifiant pour l'utiliser dans le champ "eventId" de l'exemple de code suivant, afin de notifier cet événement à Connectif :
connectif.managed.sendEvents(
[
{
type: 'custom',
eventId: 'ID_DU_L'ÉVÉNEMENT_PERSONNALISÉ_DE_RÉCEPTION',
payload: {
mon_champ_email: 'test@example.org',
mon_champ1: 1234,
nom: 'Test',
champ2: 'Ceci est un test'
}
}
]
)
Dans ce cas, il n'est pas nécessaire d'indiquer un "primaryKeyField" dans l'événement, car le champ de la clé primaire est défini dans le champ "mon_champ_email" de l'événement personnalisé.
Continuez d'apprendre !
Pour tirer le meilleur parti de votre compte Connectif, nous vous recommandons de consulter les articles suivants :
- Ajouter le JavaScript de Connectif sur votre site, pour insérer le code et commencer à collecter des informations sur les visites de votre page.
- Intégration par étiquettes, pour connaître toutes les notifications que vous pouvez envoyer depuis votre eCommerce vers Connectif et leur fonctionnement.
- Intégration avec Connectif via API, pour synchroniser les contacts, les produits, les achats et les coupons.
- Vérifier l'intégration avec l'eCommerce, pour vous assurer que toutes les données sont correctement synchronisées dans votre compte Connectif.