Comment ajouter un lien d'impression à vos formulaires

Vous souhaitez permettre aux utilisateurs d'imprimer vos formulaires pour les remplir hors ligne ? Bien que les navigateurs offrent une fonctionnalité d'impression intégrée via le menu Fichier par défaut, l'ajout d'un bouton ou d'un lien d'impression dédié peut améliorer l'expérience utilisateur.

Ce guide vous montrera comment ajouter une option d'impression directement à vos formulaires à l'aide d'un simple code HTML.

Configuration de votre formulaire

Tout d'abord, créez un formulaire et ajoutez vos champs souhaités. Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter notre guide sur la création de votre premier formulaire.

Ajout du lien d'impression

Ensuite, ajoutez un champ HTML à votre formulaire. À l'intérieur de ce champ, ajoutez le code suivant :

<a href="#" onClick="window.print()">Print this page</a>

Ce code crée un simple lien texte qui déclenche la boîte de dialogue d'impression du navigateur lorsqu'il est cliqué. Le href="#" empêche la redirection de page, tandis que onClick="window.print()" appelle la fonction d'impression du navigateur.

Une fois que vous avez enregistré le formulaire, vous pouvez constater qu'juste au-dessus du bouton Envoyer se trouve un lien pour imprimer le formulaire.

Mise en forme de votre lien d'impression (facultatif)

Pour que votre lien d'impression ressemble davantage à un bouton, vous pouvez ajouter un style personnalisé. Tout d'abord, modifiez votre HTML pour inclure une classe CSS :

<a class="print_link" href="#" onClick="window.print()">Print this page</a>

Ajoutez ensuite ce CSS à votre site. Si vous avez besoin d'aide pour ajouter du code personnalisé, veuillez consulter notre guide sur l'ajout de code personnalisé.

a.print_link {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 3px;
    background-color: #B95D6A;
    color: #ffffff;
    border: 1px solid #b95d6a;
    transition: all 0.2s ease-in-out;
}

a.print_link:hover {
    background-color: #ffffff;
    color: #b95d6a;
}

Impression de formulaires multipages

Si votre formulaire utilise des sauts de page, vous aurez besoin de CSS supplémentaire pour vous assurer que toutes les pages s'impriment correctement. Ajoutez ce CSS à votre thème :

@media print {
    /* print only styles here */
    #wpforms-form-1000 .wpforms-page {
        display: block !important;
    }
}

N'oubliez pas de remplacer 1000 par l'ID de votre formulaire. Si vous avez besoin d'aide pour trouver l'ID de votre formulaire, veuillez consulter notre guide sur la recherche des ID de formulaire.

Pour appliquer cela à tous les formulaires, utilisez :

@media print {
    /* print only styles here */
    .wpforms-page {
        display: block !important;
    }
}

Vous pouvez également utiliser ces styles d'impression pour masquer des éléments tels que la barre latérale, le pied de page ou l'en-tête lors de l'impression.

Et c'est tout ce dont vous avez besoin ! Souhaitez-vous savoir comment utiliser des shortcodes dans ces champs de formulaire HTML ? Consultez notre tutoriel sur Comment afficher des shortcodes dans le champ HTML.