確認メッセージにすべてのフィールドを表示する

Markdownを表示

完了したすべてのフォームフィールドを確認メッセージに表示しますか？ WPFormsには、ユーザーが送信前にエントリを表示できるエントリプレビューフィールドが含まれています。ただし、現在エントリプレビューでは、送信時にアップロードされた画像は表示されません。

このチュートリアルでは、カスタムPHPスニペットを使用して、確認メッセージにすべてのフィールドを表示する方法を説明します。

注意: WPFormsバージョン1.6.9以降には、エントリプレビューフィールドが含まれています。代わりにこのフィールドを使用したい場合は、エントリプレビューフィールドの使用方法に関するチュートリアルを確認して、方法を学んでください。

フォームの作成

まず、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスします。このフォームでは、最大3つの画像を受け入れられるファイルアップロードフィールドを追加しました。

確認メッセージですべてのフィールドを表示できるように、フォームを作成してフィールドを追加してください。

サイトにPHPコードを追加する

次に、コードスニペットを追加します。コードスニペットをサイトに追加する方法と場所については、このチュートリアルを確認してください。

/**
 * Show all fields in the confirmation message
 *
 * @link https://wpforms.com/developers/how-to-show-all-fields-in-your-confirmation-message/
 */
 
function wpf_dev_frontend_confirmation_message( $message, $form_data, $fields, $entry_id ) {
     
    // Only run on my form with ID = 1107
    if ( absint( $form_data[ 'id' ] ) !== 1107 ) {
        return $message;
    }
 
    // Name form field - ID #1
    $name = $fields[ '1' ][ 'value' ];
 
    // Address form field - ID #2
    $address = $fields[ '2' ][ 'value' ];
 
    // Phone form field - ID #3
    $phone = $fields[ '3' ][ 'value' ];
 
    // Email form field - ID #4
    $email = $fields[ '4' ][ 'value' ];
 
    // Website URL form field - ID #5
    $website = $fields[ '5' ][ 'value' ];
 
    // Color Options form field - ID #6
    $color_options = $fields[ '6' ][ 'value' ];
 
    // Delivery Method form field - ID #7
    $delivery_method = $fields[ '7' ][ 'value' ];
 
    // Special Instructions form field - ID #9
    $special_instructions = $fields[ '9' ][ 'value' ];
 
    // Modern Upload form field - ID #8
    $field_id = 8;
          $images = '';
          if ( is_array( $fields[ $field_id ][ 'value_raw' ] ) ) {
             foreach ( $fields[ $field_id ][ 'value_raw' ] as $value_raw ) {
                $images .= '<div class="image_container"><img src="' . $value_raw[ 'value' ] . '" class="small"></div>';
             }
          }
 
 
    $message = "<p>This is the information we've captured from your submission <a href=\"http://google.com\" target=\"_blank\">Please visit this page for account information</a></p>.
    <ul>
    <li><strong>Name</strong>: $name </li>
    <li><strong>Address</strong>: $address </li>
    <li><strong>Phone Number</strong>: $phone </li>
    <li><strong>Email Address</strong>: $email </li>
    <li><strong>Website</strong>: $website </li>
    <li><strong>Color Options</strong>: $color_options </li>
    <li><strong>Delivery Method</strong>: $delivery_method </li>
    <li><strong>Any Special Instructions</strong>: $special_instructions </li>
    </ul>
    <p>The images you have uploaded are:";
 
    return $message . '<br>' . $images . '</p>';
     
}
add_filter( 'wpforms_frontend_confirmation_message', 'wpf_dev_frontend_confirmation_message', 10, 4 );

上記のコードでは、フォームID1107をターゲットにし、すべてのフィールドID番号を作成した変数にマッピングします。たとえば、フォームの氏名フィールドはフィールドID 1です。そのため、$nameという変数を作成し、等号（=）を使用してその値をその特定の変数に設定しました。

わかりやすい変数名を作成し、フィールドIDにマッピングするだけで済みます。

フォームまたはフィールドIDの見つけ方がわからない場合は、このチュートリアルを確認してください。

別の例として、モダンファイルアップロードフィールドを使用しています。設定に応じてユーザーが複数の画像をアップロードできることがわかっているため、確認メッセージに表示するためにアップロードされたすべての画像をループ処理するようにします。

そのため、PHPのifステートメントを作成し、確認メッセージ内に各画像を表示するためにアップロードされた各画像をループ処理します。

注意: PHPのifステートメントの詳細については、ifステートメントの構造に関する公式PHP.netマニュアルを参照してください。

エントリプレビューをカスタムCSSでスタイリングする（オプション）

この手順は完全にオプションですが、ifステートメント内に画像にHTMLを追加しました。確認メッセージで画像が大きすぎないように、しかしきれいに表示されるように、いくつかのスタイリングを追加します。

カスタムCSSをサイトに追加するには、このチュートリアルを確認してください。

.image_container {
    height: 250px;
    max-width: 25%;
    display: inline-block;
}
.image_container img {
    float: left;
    display: inline-block;
}
.small {
	max-width:150px;
	padding: 10px;
}