### [フォームの後に画像を表示する方法](https://wpforms.com/developers/how-to-display-an-image-after-your-form/)
**公開日:** 2020年6月11日
**著者:** David Ozokoye
**抜粋:** このチュートリアルでは、フォームの後に画像を表示する手順を説明します。
**コンテンツ:**
フォームの後に画像を表示したいですか？簡単なPHPスニペットを使用すると、送信ボタンのすぐ下に画像、動画、またはメッセージを簡単に追加できます。
このチュートリアルでは、これを実現する手順を説明します。
---
## フォームの作成
まず、[新しいフォームを作成](https://wpforms.com/docs/creating-first-form/)するか、既存のフォームを編集してフォームビルダーにアクセスする必要があります。フォームビルダーで、必要なフィールドをフォームに追加します。
## スニペットの追加
このコードスニペットは、フォームの下に何かを追加するために使用できます。画像、動画、またはテキストを追加できます。送信ボタンの後に画像を追加するには、このスニペットをサイトにコピーして貼り付ける必要があります。
スニペットをサイトに追加する方法がわからない場合は、[このチュートリアルを確認してください。](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "WPFormsのカスタムPHPまたはJavaScriptの追加方法")
この例では、このスニペットをフォームID **999**にのみ制限しています。ターゲットにするフォームのIDに置き換える必要があります。フォームIDがわからない場合は、[このチュートリアルを確認してください](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "フォームIDとフィールドIDの特定方法").
```
/**
* フォームの後に何かを出力します。
*
* @link https://wpforms.com/developers/how-to-display-an-image-after-your-form/
*/
function wpf_dev_frontend_output_after( $form_data, $form ) {
// オプションで、特定のフォームに制限できます。以下は、フォーム#999への出力を制限しています。
if ( absint( $form_data[ 'id' ] ) !== 999 ) {
return;
}
// コードを実行するか、以下の例のエコー文を参照してください。
echo '';
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after', 10, 2 );
```
上記のコード `src="'.get_template_directory_uri().'/images/` は、テーマディレクトリ内のサーバー上の**images**という名前のディレクトリ（フォルダ）を探します。したがって、画像はサーバーのimagesフォルダにある必要があります。
または、単に画像をサイトのメディアライブラリにアップロードし、src =の後の値を画像URLで更新することもできます。WordPressメディアライブラリの画像を使用した場合の更新されたスニペットは次のようになります。
```
/**
* フォームの後に何かを出力します。
*
* @link https://wpforms.com/developers/how-to-display-an-image-after-your-form/
*/
function wpf_dev_frontend_output_after( $form_data, $form ) {
// オプションで、特定のフォームに制限できます。以下は、フォーム#999への出力を制限しています。
if ( absint( $form_data[ 'id' ] ) !== 999 ) {
return;
}
// コードを実行するか、以下の例のエコー文を参照してください。
echo '';
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after', 10, 2 );
```
## よくある質問
WPFormsの送信ボタンの後に画像を追加することに関して、よく寄せられる質問とその回答です。
#### Q: フォームの後にリンク付きのテキストを表示するにはどうすればよいですか？
**A:** リンク付きのテキストを表示したいだけの場合は、このスニペットを使用できます。
この例では、「Powered by Stripe」というメッセージと、Stripeに新しいウィンドウで開くリンクを表示します。
```
/**
* フォームの後にテキストを出力します。
*
* @link https://wpforms.com/developers/wpforms_frontend_output_after/
*/
function wpf_dev_frontend_output_after_display_text( $form_data, $form ) {
// オプションで、特定のフォームに制限できます。以下は、フォーム#999への出力を制限しています。
if ( absint( $form_data[ 'id' ] ) !== 999 ) {
return;
}
// コードを実行するか、以下の例のエコー文を参照してください。
echo _e( ' Stripe | 利用規約とプライバシーに電力を供給！.', 'plugin-domain' );
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after_display_text', 10, 2 );
```
これで、フォームの後に画像を追加できました。
次に、送信をクリックしたときに表示されるプリロード画像を別のものに変更したいですか？[送信時のプリローダーアイコンを変更する方法](https://wpforms.com/developers/how-to-change-the-pre-loader-icon-on-submit/ "送信時のプリローダーアイコンの変更方法")に関する記事をご覧ください。
## 関連
アクションリファレンス: [wpforms\_frontend\_output\_after](https://wpforms.com/developers/wpforms_frontend_output_after/ "WPFormsでのwpforms_frontend_output_afterの使用")
**カテゴリ:** チュートリアル
**タグ:** PHP
---