Come collegare il logo del modulo Pagine Modulo

Introduzione

Vuoi collegare il logo delle tue Pagine Modulo dal tuo modulo alla tua homepage? In questo tutorial, creeremo un modulo utilizzando il componente aggiuntivo WPForms Form Pages, caricheremo un logo per il nostro modulo e quindi aggiungeremo uno snippet che collegherà quel logo alla nostra homepage utilizzando un piccolo frammento di codice.

Creazione del tuo modulo

Innanzitutto, dovremo creare un nuovo modulo e aggiungere i nostri campi a questo modulo. Ai fini di questo tutorial, creeremo semplicemente un modulo di prenotazione con alcuni campi di base.

Abilitazione Pagine Modulo

Successivamente, dovrai abilitare il modulo per utilizzare le Pagine Modulo. Per qualsiasi assistenza in merito, consulta questa documentazione.

All'interno del generatore di moduli, fai clic su Impostazioni e quindi su Pagine Modulo per abilitare questa opzione per il tuo modulo.

Caricamento del tuo logo

Mentre ti trovi nella scheda Pagine Modulo, fai clic su Carica immagine e carica il tuo logo. Una volta completato, fai clic su Salva per salvare le modifiche.

Per impostazione predefinita, questa immagine non collega a nulla. Nel passaggio successivo, aggiungeremo uno snippet di codice che collegherà questa immagine alla homepage.

Aggiunta dello snippet per collegare il logo del tuo modulo

Ora è il momento di aggiungere uno snippet al tuo sito che trasformerà l'immagine del tuo logo in un link. Se hai bisogno di aiuto per aggiungere snippet al tuo sito, consulta questo tutorial.

/**
 * 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 );

Nello snippet sopra, var formID = 375 è il numero ID del modulo. Questo dovrà essere modificato per corrispondere all'ID del tuo modulo. Se hai bisogno di aiuto per individuare l'ID del tuo modulo, esamina questo tutorial.

Ora, quando visualizzi il tuo modulo e passi il mouse sull'immagine del logo, vedrai il puntatore per fare clic sull'immagine.

E questo è tutto ciò che ti serve per collegare il logo del tuo modulo nelle tue pagine modulo. Vuoi fare lo stesso anche per il componente aggiuntivo Moduli Conversazionali? Dai un'occhiata al nostro tutorial su Come collegare il logo del tuo modulo conversazionale.

Correlati

Riferimento Azione: wpforms_wp_footer_end