フォームページフォームのロゴをリンクする方法

はじめに

フォームのフォームページロゴをホームページにリンクしますか？ このチュートリアルでは、WPFormsフォームページアドオンを使用してフォームを作成し、フォームのロゴをアップロードしてから、短いコードスニペットを使用してそのロゴをホームページにリンクする方法を説明します。

フォームの作成

まず、新しいフォームを作成し、フィールドを追加する必要があります。このチュートリアルの目的では、基本的なフィールドを持つ予約フォームを作成します。

フォームページを有効にする

次に、フォームページを使用するようにフォームを有効にする必要があります。これに関するヘルプについては、このドキュメントを参照してください。

フォームビルダー内で、設定をクリックし、次にフォームページをクリックして、フォームでこれを有効にします。

ロゴのアップロード

フォームページタブで、画像のアップロードをクリックしてロゴをアップロードします。完了したら、保存をクリックして変更を保存します。

デフォルトでは、この画像は何もリンクしません。次のステップでは、この画像をホームページにリンクするコードスニペットを追加します。

フォームロゴをリンクするスニペットの追加

次に、ロゴ画像をリンクに変換するスニペットをサイトに追加します。スニペットをサイトに追加するのにヘルプが必要な場合は、このチュートリアルを参照してください。

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

上記のコードスニペットでは、var formID = 375 はフォームID番号です。これは、お使いのフォームIDと一致するように変更する必要があります。フォームIDの場所がわからない場合は、このチュートリアルを確認してください。

これで、フォームを表示してロゴ画像にカーソルを合わせると、画像をクリックするためのポインターが表示されます。

これで、フォームページでフォームロゴをリンクするために必要なすべてが完了しました。会話形式フォームアドオンでも同様のことを行いたいですか？ 会話形式フォームロゴをリンクする方法のチュートリアルをご覧ください。

関連

アクション参照: wpforms_wp_footer_end