Logo Ihrer Formularseiten verlinken

Einleitung

Möchten Sie Ihr Form Pages-Logo von Ihrem Formular mit Ihrer Homepage verknüpfen? In diesem Tutorial erstellen wir ein Formular mit dem WPForms Form Pages Addon, laden ein Logo für unser Formular hoch und fügen dann einen Ausschnitt hinzu, der dieses Logo mit einem kleinen Code-Snippet zurück zu unserer Homepage verlinkt.

Erstellen Ihres Formulars

Zuerst müssen wir ein neues Formular erstellen und unsere Felder zu diesem Formular hinzufügen. Für dieses Tutorial werden wir einfach ein Reservierungsformular mit einigen grundlegenden Feldern erstellen.

Form Pages aktivieren

Als Nächstes müssen Sie das Formular für die Verwendung von Form Pages aktivieren. Wenn Sie hierbei Hilfe benötigen, sehen Sie bitte diese Dokumentation.

Klicken Sie im Formular-Builder einfach auf Einstellungen und dann auf Form Pages, um dies für Ihr Formular zu aktivieren.

Hochladen Ihres Logos

Klicken Sie auf dem Tab Form Pages auf Bild hochladen und laden Sie Ihr Logo hoch. Wenn Sie fertig sind, klicken Sie auf Speichern, um die Änderungen zu speichern.

Standardmäßig verknüpft dieses Bild nichts. Im nächsten Schritt fügen wir einen Code-Snippet hinzu, der dieses Bild zurück zur Homepage verlinkt.

Hinzufügen des Snippets zum Verknüpfen Ihres Formularlogos

Jetzt ist es an der Zeit, Ihrer Website einen Ausschnitt hinzuzufügen, der Ihr Logo-Bild in einen Link verwandelt. Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, sehen Sie bitte dieses 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 );

Im obigen Snippet ist var formID = 375 die Formular-ID-Nummer. Diese muss geändert werden, um Ihrer Formular-ID zu entsprechen. Wenn Sie Hilfe bei der Ermittlung Ihrer Formular-ID benötigen, lesen Sie bitte dieses Tutorial.

Wenn Sie nun Ihr Formular anzeigen und mit der Maus über das Logo-Bild fahren, sehen Sie den Zeiger, um auf das Bild zu klicken.

Und das ist alles, was Sie brauchen, um Ihr Formularlogo auf Ihren Formularseiten zu verknüpfen. Möchten Sie dasselbe auch für das Conversational Forms Addon tun? Werfen Sie einen Blick auf unser Tutorial So verknüpfen Sie Ihr Conversational Form Logo.

Verwandt

Aktionsreferenz: wpforms_wp_footer_end