同じフォームでフィールドを事前入力する方法

同じフォーム内の他のフィールドの値を使用して、フォームのフィールドにあらかじめ値を入力することに興味がありますか？ JavaScriptを使用すると、これを実現できます。このガイドでは、フォームの作成プロセスと、フォームの最初のページから「名前」フィールドを抽出し、同じフォームの2ページ目の「名前」フィールドに自動的に値を入力するスニペットの組み込み方法を説明します。

フォームの作成

このチュートリアルでは、フォームの両方のページに名前フィールドがあるマルチページフォームを作成します。

マルチページフォームの作成についてサポートが必要な場合は、こちらのドキュメントをご覧ください。

フィールドにあらかじめ値を入力する

同じフォーム内のフィールドにあらかじめ値を入力するには、このスニペットをサイトに追加する必要があります。

スニペットをサイトに追加する方法と場所についてサポートが必要な場合は、こちらのチュートリアルをご覧ください。

/**
 * Populate fields in the same form
 *
 * @link https://wpforms.com/developers/how-to-pre-populate-fields-in-the-same-form/
 */

function wpf_dev_name_change() {
    ?>
    <script>
        jQuery(function($){

			// Define form and field IDs
			var formID = 1386;
            var nameField1 = 0; // ID of the field to grab name from
            var nameField2 = 13; // ID of the field to pass value to

			// Check if form and fields exist before manipulating
			if ($('#wpforms-' + formID).length && $('#wpforms-' + formID + '-field_' + nameField1).length && $('#wpforms-' + formID + '-field_' + nameField2).length) {
				// Update value for nameField2 when nameField1 changes
				$('#wpforms-' + formID + '-field_' + nameField1).on('change', function() {
					$('#wpforms-' + formID + '-field_' + nameField2).val($(this).val());
				});
			} else {
				console.error('Form or field does not exist.');
			}

        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_name_change', 10 );

上記のスニペットは、フォームID1072でのみ実行され、最初の名前フィールド（フィールドID1）に入力された値を取得し、フォームの2ページ目にある2番目の名前フィールド（フォームID16）にあらかじめ値を入力します。

これらのIDは、ご自身のフォームとフィールドのIDに合わせて更新する必要があります。これらのIDを見つけるのに役立つ情報が必要な場合は、こちらのチュートリアルをご覧ください。

これで完了です！クエリ文字列を使用して同様のことを実現する方法について、さらに詳しく知りたいですか？別のフォームからフォームフィールドにあらかじめ値を入力するためにクエリ文字列を使用する方法のチュートリアルをご覧ください。

参照アクション

wpforms_wp_footer_end

よくある質問

Q: 1つの関数に複数のフィールドを追加できますか？

A: この1つの関数内に、必要なだけ多くのフィールドを追加できます。例として、名前、メールアドレス、電話番号フィールドにあらかじめ値を入力することが挙げられます。

/**
 * Populate fields in the same form
 *
 * @link https://wpforms.com/developers/how-to-pre-populate-fields-in-the-same-form/
 */

function wpf_dev_name_change() {
    ?>
    <script>
        jQuery(function($){

			// Define form and field IDs
			var formID = 1072;
            var nameField1 = 1; // ID of the name field on page 1
            var nameField2 = 16; // ID of the name field on page 2
            var emailField1 = 2; // ID of the email field on page 1
            var emailField2 = 19; // ID of the email field on page 2
            var phoneField1 = 5; // ID of the phone field on page 1
            var phoneField2 = 29; // ID of the phone field on page 2
			
			// Function to set the value of a field on page 2 based on the value of a field on page 1
			function setFieldValue(field1, field2) {
				$( `#wpforms-${formID}-field_${field1}` ).on('change', function() {
					$( `#wpforms-${formID}-field_${field2}` ).val($(this).val());
				});
			}
			
			// Check if form and fields exist before manipulating
			if ($('#wpforms-' + formID).length) {
				// Set the name field from page 1 to page 2
				setFieldValue(nameField1, nameField2);
				
				// Set the email field from page 1 to page 2
				setFieldValue(emailField1, emailField2);
				
				// Set the phone field from page 1 to page 2
				setFieldValue(phoneField1, phoneField2);
			} else {
				console.error('Form does not exist.');
			}

        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_name_change', 10 );