### [クイズフォームの作成方法](https://wpforms.com/developers/how-to-create-a-quiz-form/)
**公開日:** 2023年6月13日
**著者:** Umair Majeed
**抜粋:** このチュートリアルでは、クイズフォームを作成し、支払いフィールドを使用してフォームの最後に合計スコアを計算する方法を説明します。
**コンテンツ:**
WPFormsでクイズフォームを作成したいですか？ WPFormsには、フォームビルダーで直接クイズフォームを作成するために必要なすべてを提供するクイズアドオンが含まれています。
このチュートリアルでは、送信後にユーザーのスコアを計算して表示するスニペットベースの設定を使用してクイズフォームを構築する方法を説明します。
ほとんどのサイトではクイズアドオンの使用をお勧めしますが、このガイドには、このアプローチを好む人のためのスニペットベースのオプションも含まれています。
---
## クイズフォーム作成の推奨方法
WPFormsには専用の**クイズアドオン**が含まれており、クイズフォームを作成するための最も簡単で最も完全な方法です。
クイズアドオンには、組み込みのクイズ機能が含まれており、WPFormsでクイズフォームを作成および管理するための最も簡単な方法を提供します。
推奨される方法の詳細については、[クイズアドオンのドキュメント](https://wpforms.com/docs/quiz-addon)を参照してください。
開始するにあたって、[クイズフォームテンプレート](https://wpforms.com/templates/category/quizzes/)を参照して、クイズをすばやく作成し、サイトに合わせてカスタマイズすることもできます。
## スニペットを使用したクイズフォームの構築
カスタム設定でクイズフォームを構築したい場合は、このガイドの手順に従って、以下のコードスニペットを使用できます。
新しいフォームの作成から始めます。フォームには、最初に**名前**と**メール**のフォームフィールドを追加します。次に、**ページ区切り**を使用して、クイズを**6**つのカテゴリに分割します。各**ページ区切り**には、クイズ受験者が現在どのカテゴリにいるかを示す**ページタイトル**が表示されます。
フォームの作成に関するヘルプについては、[このガイドを確認してください](https://wpforms.com/docs/creating-first-form/ "最初のフォームの作成")。
## クイズの質問とスコアの追加
このドキュメントでは、フォームビルダーの**支払いフィールド**セクションの下にある**複数項目**フィールドを使用してクイズの質問を行い、ラベルを変更して各質問に**3**つの回答を提供します。正解には、正解に**1.00**、不正解に**0.00**を付けます。
質問とカテゴリ全体でこれを続けます。各質問には、正解に**1.00**、不正解に**0.00**の回答が**1**つ必要です。金額を使用して、各正解の合計を収集します。
## スコアを追跡するための合計フィールドの追加
次に、各正解の合計ポイントを追跡したいと思います。これを達成するために、フォームの下部に**合計**フィールドを追加します。ただし、このフィールドを送信されるまで非表示にするために、**高度な**タブでこのフィールドに**CSSクラス**を付けます。
フォームを保存したら、このフィールドを非表示にするために必要なCSSを追加します。このCSSをサイトにコピーしてください。カスタムCSSの追加方法と場所を見つけるのに役立つ場合は、[このチュートリアルを確認してください](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "WPFormsのカスタムCSSスタイルの追加方法")。
```
.hide-field {display: none;}
```
## 確認メッセージでのクイズスコアの表示
送信後にクイズ受験者にスコアを表示するには、以下のスニペットをサイトに追加します。
このスニペットは、送信された値を取得し、ユーザーの名前とスコアを取得して、最終結果を含む確認メッセージを表示します。
このスニペットをサイトにコピー＆ペーストしてください。スニペットの追加方法と場所に関するヘルプが必要な場合は、[この役立つチュートリアルを確認してください](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "WPFormsのカスタムPHPまたはJavaScriptの追加方法")。
```php
/**
* パブリッククイズのカスタム確認メッセージを表示します。
*
* @link https://wpforms.com/developers/how-to-create-a-quiz-form/
*/
function wpf_dev_quiz_custom_confirmation_message( $message, $form_data, $fields, $entry_id ) {
// ID = 3221 の私のフォームでのみ実行します
if ( absint( $form_data[ 'id' ] ) !== 3221 ) {
return $message;
}
// このフォームを完了した人の名前を取得します
$contact_name = $fields[ '1' ][ 'value' ];
// 合計フィールド（フィールドID '7'）からポイントを取得して、小数点と通貨記号を削除します
$points_scored = $fields[ '7' ][ 'value' ];
// 空白と通貨記号を削除します
list($points_scored) = explode('.', $points_scored);
$points_scored = substr($points_scored, 5);
// 名前と獲得したポイントをメッセージに追加します
$message = __('こんにちは ' . $contact_name . ' さん、' . $points_scored . ' 点中 ' . $points_scored . ' 点を獲得しました', 'plugin-domain');
return $message;
}
add_filter( 'wpforms_frontend_confirmation_message', 'wpf_dev_quiz_custom_confirmation_message', 10, 4 );
```
このスニペットは、フォームID **3221**でのみ実行されます。フィールドID **1**の名前フィールドからユーザーの名前を取得して、カスタム確認メッセージに表示できるようにします。次に、合計フォームフィールド（フィールドID **7**）から金額を取得し、通貨記号と空白を削除してから、残りを整数に変換して小数点やゼロがないようにします。
これらのIDを自分のフォームとフィールドIDに合わせて更新する必要があります。自分のID番号を見つけるには、[このドキュメントを確認してください](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "フォームIDとフィールドIDの特定方法")。
これで、ユーザーがクイズの最後に到達すると、**送信**をクリックして、正解した数値をすぐに確認できるようになります。
これで完了です！フォームフィールドの値に基づいてフォームを自動的に送信したいですか？[フィールドの選択に基づいてフォームを自動的に送信する方法](https://wpforms.com/developers/how-to-automatically-submit-a-form-with-a-field-choice/ "フィールドの選択に基づいてフォームを自動的に送信する方法")に関するチュートリアルを確認してください。
## 参照フィルター
[wpforms\_frontend\_confirmation\_message](https://wpforms.com/developers/wpforms_frontend_confirmation_message/ "wpforms_frontend_confirmation_messageフィルターの使用")
**カテゴリ:** チュートリアル
**タグ:** 確認メッセージ, CSS, PHP
---