Comment lier le logo de vos pages de formulaire

Introduction

Souhaitez-vous lier le logo de vos Pages de formulaire à votre page d’accueil ? Dans ce tutoriel, nous allons créer un formulaire à l’aide du module complémentaire Pages de formulaire WPForms, télécharger un logo pour notre formulaire, puis ajouter un extrait de code qui liera ce logo à notre page d’accueil.

Création de votre formulaire

Tout d’abord, nous devons créer un nouveau formulaire et y ajouter nos champs. Pour les besoins de ce tutoriel, nous allons simplement créer un formulaire de réservation avec quelques champs de base.

Activation des Pages de formulaire

Ensuite, vous devrez activer le formulaire pour utiliser les Pages de formulaire. Pour toute aide à ce sujet, veuillez consulter cette documentation.

Dans le générateur de formulaire, cliquez simplement sur Paramètres, puis sur Pages de formulaire pour activer cette option pour votre formulaire.

Téléchargement de votre logo

Dans l’onglet Pages de formulaire, cliquez sur Télécharger une image et téléchargez votre logo. Une fois terminé, cliquez sur Enregistrer pour sauvegarder les modifications.

Par défaut, cette image ne renvoie à rien. À l’étape suivante, nous allons ajouter un extrait de code qui transformera cette image en lien.

Ajout de l’extrait pour lier votre logo de formulaire

Il est maintenant temps d’ajouter un extrait de code à votre site qui transformera l’image de votre logo en lien. Si vous avez besoin d’aide pour ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.

/**
 * Link your form logo on form pages.
 *
 * @link   https://wpforms.com/developers/how-to-link-your-form-pages-form-logo/
 */

function wpf_dev_form_pages_add_link() {
	?>
	<script type="text/javascript">
		jQuery( function( $ ) {

			// Could be removed if changes are needed in all form pages on the site.
			var formID = 375;// ID of form page form to which apply changes.

			if ( $( '#wpforms-' + formID ).length === 0 ) {
				return;
			}

			// Detect Form Page image.
			var $logo = $( '#wpforms-form-page-page' ).find( '.wpforms-custom-logo img' );

			if ( $logo.length > 0 ) {
				$logo.wrap($( '<a>',{
					href: '/' // "/" could be changed to any link.
				}));
			}
		} );
	</script>
	<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_pages_add_link', 30 );

Dans l’extrait ci-dessus, var formID = 375 est le numéro d’identification du formulaire. Vous devrez le modifier pour qu’il corresponde à l’ID de votre formulaire. Si vous avez besoin d’aide pour localiser l’ID de votre formulaire, veuillez consulter ce tutoriel.

Maintenant, lorsque vous visualisez votre formulaire et que vous passez la souris sur l’image du logo, vous verrez le pointeur pour cliquer sur l’image.

Et c’est tout ce dont vous avez besoin pour lier le logo de votre formulaire sur vos pages de formulaire. Souhaitez-vous faire de même pour le module complémentaire Formulaires conversationnels ? Consultez notre tutoriel sur Comment lier le logo de votre formulaire conversationnel.

Articles associés

Référence d’action : wpforms_wp_footer_end