Display the Confirmation and the Form Again After Submission

Markdownを表示

送信後にフォーム確認メッセージとフォーム自体を一緒に表示することに興味がありますか？通常、フォームが送信されると、確認メッセージを表示するか、別のウェブページにリダイレクトするかのいずれかのオプションがあります。しかし、このチュートリアルでは、簡単なコードスニペットを使用して両方を達成するプロセスをガイドします。

フォームの作成

まず、新しいフォームを作成する必要があります。このチュートリアルの目的のために、このステップはすでに完了しています。ただし、WPFormsでフォームを作成するのに支援が必要な場合は、このドキュメントを確認してください。

フォームには、名前、メール、および段落テキストのフォームフィールドのみを追加しました。

フォームを作成したら、次のステップでコードスニペットを追加できます

フォームでのAJAXの無効化

次に、フォームでAJAXフォーム送信を有効にするが無効になっていることを確認する必要があります。この設定を確認するには、フォームビルダー内の設定タブをクリックし、次に一般をクリックします。

AJAX がフォームで有効になっていないことを確認してください

確認メッセージとフォームの表示

次に、確認メッセージの前にフォームが再度表示されるように、サイトに小さなコードスニペットを追加する必要があります。

サイトにスニペットを追加する方法がわからない場合は、このチュートリアルを確認してください。

/*
 * Display confirmation message and form after successful submission.
 *
 * @link  https://wpforms.com/developers/how-to-display-the-confirmation-and-the-form-again-after-submission/
 */
  
function wpf_dev_frontend_output_success(  $form_data, $fields, $entry_id ) {
       
    // Optional, you can limit it to specific forms. Below, we restrict output to form #235.
    if ( absint( $form_data[ 'id' ] ) !== 235 ) {
        return;
    }

    // Reset the fields to blank
	unset(
		$_GET[ 'wpforms_return' ],
		$_POST[ 'wpforms' ][ 'id' ]
	);
 
	// Comment this line out if you want to clear the form field values after submission
	unset( $_POST[ 'wpforms' ][ 'fields' ] );

	// Actually render the form.
	wpforms()->frontend->output( $form_data[ 'id' ] );
  
}
 
add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 10, 3 );

このスニペットが特定のフォームでのみ実行されるようにしたいので、if ( absint( $form_data[ 'id' ] ) !== 235 )を使用しています。これは、フォームIDが235と一致する場合にのみ、このスニペットが実行されることを意味します。

フォームID番号の特定に役立つ情報が必要な場合は、このチュートリアルを参照してください。

フォーム送信後にフォームフィールド内の値を保持したい場合は、unset( $_POST[ 'wpforms' ][ 'fields' ] );をコメントアウトするだけです。これは、unsetフィールドコードの前に2つのスラッシュ（//）を追加することで実行できます。

例:

// unset( $_POST[ 'wpforms' ][ 'fields' ] );

これで、フォームが送信されると、訪問者はフォーム送信後に同じページで確認メッセージとフォームの両方を確認できるようになります！

これで、フォーム送信後に確認メッセージとフォームを同じページに簡単に表示できます。

これで完了です！日付ピッカーにデフォルトの日付を設定したいですか？日付ピッカーフォームフィールドにデフォルトの日付を設定する方法に関するチュートリアルをご覧ください。

参照アクション

wpforms_frontend_output_success

よくある質問

Q: 確認メッセージがフォームの下に表示されるのはなぜですか？

A: 確認メッセージがフォームの上に表示されていて、下に表示したい場合は、この関数の優先度を変更してください。

関数の優先度が何であるかを説明するために、上記のスニペット、特に最後の行を見てみましょう。

add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 10, 3 );

この場合、アクションフックの名前（WPFormsで定義されている）は wpforms_frontend_output_success、私たちの関数名は wpf_dev_frontend_output_success です。この関数内では、3 つの引数（$form_data, $fields, $entry_id）を渡しており、デフォルトの優先度は 10 に設定されています。

フォームのデフォルトの機能、つまり確認メッセージを最初に表示したいので、この場合、メッセージが最初に表示され、関数が後で実行されるように優先度を変更する必要があります。これを行うために、優先度を 1000 に増やします。

ほとんどの関数はデフォルトの優先度番号として 10 を使用しているため、何かを先に実行したい場合は 10 未満の優先度に設定し、関数を後に実行したい場合は 10 より大きい優先度に増やします。

/*
 * Display confirmation message and form after successful submission.
 *
 * @link  https://wpforms.com/developers/how-to-display-the-confirmation-and-the-form-again-after-submission/
 */
 
function wpf_dev_frontend_output_success(  $form_data, $fields, $entry_id ) {
      
    // Optional, you can limit it to specific forms. Below, we restrict output to form #235.
    if ( absint( $form_data[ 'id' ] ) !== 235 ) {
        return;
    }
                // Reset the fields to blank
		unset(
			$_GET[ 'wpforms_return' ],
			$_POST[ 'wpforms' ][ 'id' ]
		);

		// Comment this line out if you want to clear the form field values after submission
		unset( $_POST[ 'wpforms' ][ 'fields' ] );

		// Actually render the form.
		wpforms()->frontend->output( $form_data[ 'id' ] );
 
}

add_action( 'wpforms_frontend_output_success', 'wpf_dev_frontend_output_success', 1000, 3 );

Q: スニペットが機能しないのはなぜですか？

A: スニペットが機能しない場合は、サイトの自分のフォーム ID に合わせて 235 を変更したことを確認してください。フォーム ID を見つけるには、このチュートリアルを参照してください。

Q: 2 回目の送信後に空白のページが表示されるのはなぜですか？

A: 空白のページが表示されるか、コンソールログに AJAX エラーが表示される場合は、上記の手順で説明したように AJAX を無効にしたことを確認してください。このスニペットは、フォームで AJAX が無効になっている場合にのみ機能します。

このスニペットを機能させるには、AJAX を無効にすることを忘れないでください

送信後に確認メッセージとフォームを再度表示する方法

AI要約