WPFormsを使ってクイズフォームを作成しませんか？ペイメントフィールドを使用すると、クイズの合計得点を追跡するクイズフォームを簡単に作成することができます。このチュートリアルでは、支払いフィールドを使用して簡単にクイズフォームを作成する方法を紹介します。
クイズフォームの作成
まず、新しいフォームを作成します。フォームの最初に名前と Eメールのフォームフィールドを追加します。そして、改ページを使ってクイズを6つのカテゴリに分割します。それぞれのページ区切りでは、クイズの受験者が現在どのカテゴリにいるのかをページタイトルに表示します。
フォームの作成については、こちらのガイドをご覧ください。
クイズの出題
このドキュメントでは、フォームビルダーの「支払いフィールド」セクションにある「複数項目」フィールドを使用して、クイズの質問を行い、各質問に対して3つの答えを提供するラベルを変更します。正解には1.00を、不正解には0.00を配置します。
これを質問とカテゴリーを通して続けてください。各問題には、正解を1.00、不正解を0.00とした答えを1つずつ付けます。その金額を使って、各正解の合計を集計します。
答えを合計する時間
ここで、各正解の合計点数を追跡したいと思います。これを実現するために、フォームの一番下に合計フィールドを追加します。ただし、フォームが送信されるまでこのフィールドを表示しないようにするため、詳細設定タブでこのフィールドにCSSクラスを設定します。
フォームを保存したら、このフィールドを非表示にするために必要なCSSを追加します。このCSSをあなたのサイトにコピーしてください。カスタムCSSを追加する方法と場所についてヘルプが必要な場合は、こちらのチュートリアルをご覧ください。
.hide-field {display: none;}
クイズロジックの作成
さて、いよいよすべてをまとめるスニペットを追加する番です。私たちはクイズの受験者の名前と合計得点を表示し、お礼のメッセージを表示するカスタム確認メッセージを表示したいと思います。この合計スコアには通貨記号やドル額を使用しないので、カスタム確認メッセージを作成するカスタムスニペットを使用します。
このスニペットをコピーしてあなたのサイトに貼り付けてください。スニペットの追加方法や場所についてヘルプが必要な場合は、こちらの便利なチュートリアルをご覧ください。
/**
* Display a custom confirmation message for our pub quiz.
*
* @link https://wpforms.com/developers/how-to-create-a-quiz-form/
*/
function wpf_dev_quiz_custom_confirmation_message( $message, $form_data, $fields, $entry_id ) {
// Only run on my form with ID = 3221
if ( absint( $form_data[ 'id' ] ) !== 3221 ) {
return $message;
}
// Get the name of the person who completed this form
$contact_name = $fields[ '1' ][ 'value' ];
// Get the points from the total field (field ID '7') to remove any decimals and currency symbols
$points_scored = $fields[ '7' ][ 'value' ];
// Remove white space and currency symbol
list($points_scored) = explode('.', $points_scored);
$points_scored = substr($points_scored, 5);
// Add the name and points scored to the message
$message = __('Thanks ' . $contact_name . ' you scored ' . $points_scored . ' out of a possible 35 points', 'plugin-domain');
return $message;
}
add_filter( 'wpforms_frontend_confirmation_message', 'wpf_dev_quiz_custom_confirmation_message', 10, 4 );
このスニペットはフォームID3221でのみ実行されます。フィールドID1のNameフィールドからユーザー名を取得し、カスタム確認メッセージに表示します。このスニペットは、フィールドID7の 合計フォームフィールドから金額を取得し、通貨記号と空白を削除して、小数点やゼロがないように整数に変換します。
これらのIDを、あなた自身のフォームやフィールドのIDと一致するように、それぞれ更新する必要があります。あなた自身のID番号を見つけるには、こちらのドキュメントをご覧ください。
このスニペットのメッセージはクイズを完了したときにユーザに表示されるメッセージですので、確認タブに何も追加する必要はありません。あなたのクイズに必要なメッセージに更新してください。
クイズが終了すると、ユーザーは提出をクリックし、何問正解したかをすぐに確認することができます。
以上です！フォームフィールドの値に基づいてフォームを自動的に送信したいですか?チュートリアル「フィールドの選択でフォームを自動送信する方法」をご覧ください。