Comment pré-remplir des champs sur votre formulaire ActiveCampaign

Vous pouvez pré-remplir les champs du formulaire pour les contacts connus avec des informations que vous avez déjà dans votre compte ActiveCampaign. Pour préremplir les champs de formulaire, vous devez ajouter un paramètre de requête au chemin d'accès de la page Web ou à l'URL du formulaire.

Remarque

  • Vous devez activer et mettre en œuvre Site Tracking pour utiliser cette solution.
  • Les contacts verront leurs informations pré-remplies sur un formulaire s'ils ont un enregistrement de contact dans votre compte et s'ils ont été identifiés par la fonction Suivi de site ActiveCampaign.
  • Chaque chaîne de requête que vous ajoutez à un chemin d'accès à l'URL sera différente en fonction des champs que vous souhaitez remplir automatiquement dans un formulaire.
  • Les contacts peuvent modifier les informations qu'ils voient pré-remplies dans un formulaire.
  • Il n'est pas possible d'utiliser cette solution avec les pages de renvoi ActiveCampaign. Les pages de renvoi ne prennent pas en charge les paramètres de requête de manière native.

Comment cela fonctionne-t-il ?

L'ajout d'un chemin URL à une chaîne de requête est rapide et facile. Il vous suffit de savoir quel champ vous souhaitez pré-remplir sur un formulaire et la balise de personnalisation correspondante. Une fois que vous avez identifié les champs que vous souhaitez pré-remplir sur le formulaire, vous êtes prêt à créer votre chaîne de requête.

Après avoir ajouté la chaîne d'interrogation à l'URL de la page Web ou du formulaire, les contacts connus qui arrivent sur votre page verront leurs propres informations préremplies dans le formulaire.

Comment pré-remplir les champs d'un formulaire

Cette solution fonctionne pour les types de champs de formulaire suivants :

  • Saisie de texte
  • Zone de texte
  • Date
  • Date Heure
  • Caché

Étape 1 : Identifier les champs de formulaire et les balises de personnalisation.

La page Gérer les champs de votre compte répertorie tous les champs de contact standard et personnalisés. Pour localiser la page Gérer les champs, cliquez sur "Paramètres&quot ; (icône de l'engrenage), puis cliquez sur "Gérer les champs.".

Sur la page Gérer les champs, vous verrez une liste de vos champs standard et personnalisés. Chaque champ a une étiquette de personnalisation. Copiez la balise de personnalisation pour chaque champ que vous souhaitez pré-remplir sur le formulaire, puis collez-la dans votre presse-papiers ou dans un autre fichier.

À titre d'exemple, nous allons pré-remplir les champs de formulaire suivants : Prénom et adresse électronique. Le champ Prénom a une étiquette de personnalisation de %FIRSTNAME% et le champ Adresse électronique a une étiquette de personnalisation de %EMAIL% .

Étape 2 : Créez la chaîne de requête.

Ensuite, vous devez créer le sting de requête en utilisant le format ci-dessous :

?fieldname=%PERSONALIZATION-TAG%

Si vous souhaitez préremplir plusieurs champs, votre chaîne de requête aura le format suivant (notez le caractère "&&quot ; entre chaque nom de champ) :

?fieldname=%PERSONALIZATION-TAG%&?fieldname=%PERSONALIZATION-TAG%

En continuant avec l'exemple ci-dessus, voici une chaîne de requête qui va pré-remplir les champs prénom et adresse électronique d'un formulaire :

?firstname=%FIRSTNAME%&email=%EMAIL%

Étape 3 : Ajoutez l'URL de votre page Web ou de votre formulaire à la chaîne de requête.

Une fois que vous avez créé votre chaîne de requête, vous pouvez l'ajouter à la fin du chemin d'accès de l'URL de votre page Web ou de l'URL de votre formulaire.

L'URL de la page web

  • Cela permet de pré-remplir les champs de n'importe quel type de formulaire.
  • Vous devrez travailler avec votre hébergeur pour ajouter la chaîne de requête à la fin du chemin URL de votre page Web dans la barre d'adresse
  • Un exemple de page web avec une chaîne d'interrogation pourrait ressembler à ceci :
    www.activecampaign.com/support?Firstname=%FIRSTNAME%&email=%EMAIL%

L'URL du formulaire

  • Cela fonctionne uniquement avec les formulaires en ligne
  • Vous pouvez ajouter la chaîne de requête à la fin du chemin URL du formulaire, puis partager ou utiliser l'URL du formulaire comme bon vous semble. Par exemple, vous pouvez pré-remplir les champs de formulaire pour un formulaire multipage ou ajouter la chaîne de requête à la fin du lien du formulaire lors du partage de votre formulaire

Pour récupérer l'URL de votre formulaire en ligne :

1. Depuis votre compte ActiveCampaign, cliquez sur "Site&quot ; puis cliquez sur "Forms."

2. Cliquez sur "Edit" pour le formulaire avec lequel vous voulez travailler.

3. Cliquez sur le bouton "Intégrer".

4. Cliquez sur l'onglet “Lien”.

Le lien du formulaire ressemblera à quelque chose comme ceci :

https://youracaccountname.activehosted.com/f/213

5. Ensuite, ajoutez la chaîne de requête à la fin du lien du formulaire.

Par exemple, je veux pré-remplir l'adresse e-mail sur mon formulaire ActiveCampaign. Pour ce faire, je formaterais l'URL du formulaire comme suit :

https://youracaccountname.activehosted.com/f/213?email=%EMAIL%

Une fois que la chaîne de requête est ajoutée au lien de votre formulaire, vous pouvez la partager où vous le souhaitez.

Avancé : Utilisez JavaScript pour pré-remplir les champs à sélection unique ou multiple.

Avant de commencer:

  • Ceci est réservé aux utilisateurs avancés
  • L'équipe de soutien ActiveCampaign n'est pas en mesure de vous aider à mettre en œuvre ou à dépanner tout code que vous ajoutez à votre page web.
  • Les exemples ci-dessous utilisent du code JavaScript standard. Il existe d'autres façons d'écrire ce code.

Si vous êtes à l'aise avec le codage de vos propres solutions, vous pouvez utiliser JavaScript pour présélectionner les options de réponse pour les champs de formulaires à cases à cocher et à liste déroulante. Ce JavaScript doit être ajouté au code source de votre page web.

Les exemples présentés ci-dessous concernent les types de champs de type menu déroulant et bouton radio. Toutefois, vous devriez être en mesure d'utiliser JavaScript pour présélectionner les options de réponse pour les types de champs suivants :

  • Dropdown
  • Bouton radio
  • Case à cocher

Cliquez sur chaque lien ci-dessous pour voir des exemples.

Charger ActiveCampaign JavaScript

Pour charger automatiquement notre JavaScript une fois la page chargée, nous utilisons la méthode window.onload, comme ceci :

</script >
window.onload = () = > {
    ...
}
</script >

Pour définir la sélection automatique sur un élément spécifique, nous le recherchons en utilisant la méthode document.querySelector().

Sélectionner le bouton radio par sa valeur

Pour sélectionner automatiquement un bouton radio spécifique au chargement de la page, inspectez le bouton radio que vous souhaitez sélectionner automatiquement et notez l'attribut de valeur :

<input type="radio&quot ; value="blue&quot ;>

Pour sélectionner automatiquement le bleu, nous écrivons notre JavaScript comme ceci :

</script >
window.onload = () = > {
    /** Vérification de la valeur "blue" au chargement de la page */
    document.querySelector('input[value="blue&quot ;]').checked = true ;
}
</script >
Sélectionner l'option par l'index

Pour sélectionner automatiquement une option spécifique dans le menu déroulant, nous comptons la première option en commençant par zéro :

<select id="food&quot ; >
  <option> --- </option>
  <option>Pizza</option>
  <option>Spaghetti</option>
  <option>Cheeseburger</option>
</select>

Pour sélectionner automatiquement Spaghetti, nous écrivons notre JavaScript comme ceci où la valeur d'index 2 est écrite à l'aide de la parenthèse, [2] :

</script >
window.onload = () = > {
    /** Sélectionner l'option Spaghetti au chargement de la page */
    document.querySelector('[id="food&quot ;]')[2].selected = true ;
}
</script >
Alternatif : Sélectionner l'option par l'index

Une alternative, une manière plus avancée de sélectionner automatiquement une valeur de liste déroulante, consiste à écrire une fonction personnalisée sans réutiliser la méthode document.querySelector() :

/**
 * Auto-sélectionner la valeur de l'option dans le menu déroulant
 * 
 @param {string} node Le nom des données du nœud pour définir la sélection.
 * @param {number} value Valeur de l'index de l'option à sélectionner au chargement de la page.
 * @return {void}
 */
function setSelectedValue(node, value) {
    var elem = document.querySelector(node) ;
    for (var i = 0 ; i < elem.options.length ; i++) {
        // Compter par indice
        var nodeIndex = elem.options[i].index ;
        // Sélectionnez l'option souhaitée
        si (nodeIndex == valeur) {
// Définir l'option comme "sélectionnée".
elem.options[valeur].selected = true ;
retour ;
        }
    }
}

et l'appeler au chargement de la page :

window.onload = () = > {
    /** Sélectionner l'option 'Spaghetti' au chargement de la page */
    setSelectedValue('[id="food&quot ;]', 2) ;
}
Exemple complet de code
</script >
window.onload = () = > {
    /** Sélectionner l'option 'Spaghetti' au chargement de la page */
    setSelectedValue('[id="food&quot ;]', 2) ;
}

/**
 * Auto-sélectionner la valeur de l'option dans le menu déroulant
 * 
 @param {string} node Le nom des données du nœud pour définir la sélection.
 * @param {number} value Valeur de l'index de l'option à sélectionner au chargement de la page.
 * @return {void}
 */
function setSelectedValue(node, value) {
    var elem = document.querySelector(node) ;
    for (var i = 0 ; i < elem.options.length ; i++) {
        // Compter par indice
        var nodeIndex = elem.options[i].index ;
        // Sélectionnez l'option souhaitée
        si (nodeIndex == valeur) {
// Définir l'option comme "sélectionnée".
elem.options[valeur].selected = true ;
retour ;
        }
    }
}
</script >
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0

Have more questions? Submit a request

Start free trial