Remplir un champ de formulaire à partir d'un lien d'ancrage

Souhaitez-vous remplir automatiquement les champs de formulaire lorsque les utilisateurs cliquent sur des liens de votre page ? En utilisant des liens d'ancrage et JavaScript, vous pouvez remplir les champs de formulaire avec du texte prédéfini lorsque les visiteurs cliquent sur des liens spécifiques.

Ce guide vous montrera comment implémenter ce remplissage dynamique de formulaire.

Comprendre le concept

Lorsqu'un utilisateur clique sur un lien d'ancrage (comme #daily ou #weekly), nous capturerons cette interaction et remplirons automatiquement un champ de formulaire avec le texte correspondant. Ceci est utile pour :

• Formulaires de sélection de service
• Formulaires de demande de produit
• Formulaires de demande de support
• Formulaires de contact avec des sujets prédéfinis

Configuration de votre formulaire

Tout d'abord, créons notre formulaire. C'est un formulaire simple avec des champs pour Nom, Adresse e-mail, Objet (Texte sur une seule ligne) et Message (Texte de paragraphe).

Si vous avez besoin d'aide pour créer votre formulaire, consultez notre guide sur la création de votre premier formulaire.

Ensuite, notez les numéros d'identification de votre formulaire et de vos champs. Vous en aurez besoin pour l'extrait de code. Si vous n'êtes pas sûr de la manière de trouver ces identifiants, consultez notre guide sur la recherche des identifiants de formulaire et de champ.

Configuration des notifications du formulaire

Dans cette étape, nous allons faire en sorte que notre champ Objet remplisse automatiquement le champ Objet dans l'onglet Notifications du constructeur de formulaire.

Accédez simplement à l'onglet Notifications, et dans le champ Objet, tapez le texte que vous souhaitez, suivi de l'identifiant du champ, tout comme vous utilisez les balises intelligentes ailleurs dans le constructeur de formulaire.

Dans notre exemple, l'identifiant de notre champ est 3, donc notre ligne d'objet sera : « Je suis intéressé par le nettoyage {field_id="3"} pour mon entreprise ».

Création de liens d'ancrage

Ensuite, créons une nouvelle page sur notre site avec des liens d'ancrage et le formulaire que nous venons de créer.

Si vous avez besoin d'aide pour comprendre les liens d'ancrage ou pour les créer, consultez ce tutoriel de WPBeginner.

Pour créer des liens d'ancrage, tapez simplement le contenu de votre page et utilisez les titres dans WordPress. Dans l'éditeur de blocs, sélectionnez un titre, allez dans l'onglet Avancé et ajoutez le texte que vous souhaitez utiliser pour le lien d'ancrage. WordPress recommande de le garder court, sans espaces, ou d'utiliser des tirets pour plusieurs mots. Par exemple, « à-propos » pour une section À propos de nous.

Pour notre tutoriel, nous aurons des sections pour Quotidien, Hebdomadaire, Mensuel et Trimestriel.

Pour chaque titre, nous insérerons un lien d'ancrage d'un seul mot. Par exemple, la section Quotidien aura le lien d'ancrage quotidien.

Une fois que nous aurons ajouté les liens d'ancrage, nous sélectionnerons du texte dans le contenu qui sautera à chaque section lorsqu'il sera cliqué et remplira le champ Objet de notre formulaire.

Pour lier du texte aux liens d'ancrage, nous ajouterons un lien comme d'habitude dans WordPress. Sélectionnez le texte, cliquez sur l'icône de la chaîne, et au lieu d'une URL complète, ajoutez un signe dièse suivi du mot du lien d'ancrage. Par exemple, #quotidien.

WordPress attribuera automatiquement à chaque lien un data-id unique basé sur le nom du lien. Ainsi, #quotidien aura un data-id de #quotidien.

Nous ferons de même pour les sections #hebdomadaire, #mensuel et #trimestriel de notre page.

Remplir le formulaire avec le texte du lien d'ancrage

Il est maintenant temps d'ajouter l'extrait qui rassemblera tout cela. Si vous avez besoin d'aide pour ajouter des extraits à votre site, veuillez consulter ce tutoriel.

Et voilà ! Saviez-vous que vous pouvez faire quelque chose de très similaire directement dans le formulaire ? Consultez notre tutoriel sur Comment ajouter une table des matières pour les longs formulaires.

Action de référence

wpforms_wp_footer_end

Questions fréquemment posées

Q : Puis-je également utiliser un nom de classe ou un ID CSS ?

R : Absolument ! Si vous préférez déclencher le JavaScript par une classe ou un ID CSS, il vous suffit de modifier le script. Par exemple, si vos noms de classe CSS étaient daily-link, weekly-link, monthly-link et quarterly-link, l'extrait serait celui-ci.

/**
 * Populate field from anchor link.
 *
 * @link https://wpforms.com/developers/how-to-populate-a-form-field-from-an-anchor-link/
 */
 
function wpf_dev_autofill_field() {
?>
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery( 'a.daily-link' ).click(function(){
            document.getElementById( 'wpforms-378-field_3' ).value = "daily cleaning";
        });  
        jQuery( 'a.weekly-link' ).click(function(){
            document.getElementById( 'wpforms-378-field_3' ).value = "weekly cleaning";
        });  
        jQuery( 'a.monthly-link' ).click(function(){
            document.getElementById( 'wpforms-378-field_3' ).value = "monthly cleaning";
        });  
        jQuery( 'a.quarterly-link' ).click(function(){
            document.getElementById( 'wpforms-378-field_3' ).value = "quarterly cleaning";
        });  
    });
</script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_autofill_field', 10 );

Si vous utilisiez un ID au lieu d'une classe, remplacez simplement le point par un signe dièse dans chacun des liens. Exemple : a#daily-link.

Et voilà. Ensuite, souhaitez-vous créer des balises intelligentes personnalisées ? Consultez notre tutoriel sur la création de balises intelligentes personnalisées pour plus de détails.