AI要約
フォームの後に画像を表示しますか？簡単なPHPスニペットを使用すると、送信ボタンの直下に画像、動画、またはメッセージを簡単に追加できます。
このチュートリアルでは、これを実現するための手順を順を追って説明します。
フォームの作成
まず、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスする必要があります。フォームビルダーで、フォームに必要なフィールドを追加してください。
スニペットの追加
このコードスニペットは、フォームの下に何かを追加するために使用できます。画像、動画、または単なるテキストを追加できます。送信ボタンの後に画像を追加するには、このスニペットをコピーしてサイトに貼り付ける必要があります。
サイトにスニペットを追加する方法がわからない場合は、このチュートリアルを確認してください。
この例では、このスニペットをフォームID 999のみに限定しています。ターゲットにしたいフォームのIDにこのIDを置き換える必要があります。フォームIDがわからない場合や、見つけるのにヘルプが必要な場合は、このチュートリアルを確認してください。
/**
* Output something after your form(s).
*
* @link https://wpforms.com/developers/how-to-display-an-image-after-your-form/
*/
function wpf_dev_frontend_output_after( $form_data, $form ) {
// Optional, you can limit to specific forms. Below, we restrict output to
// form #999.
if ( absint( $form_data[ 'id' ] ) !== 999 ) {
return;
}
// Run code or see example echo statement below.
echo '<img src="'.get_template_directory_uri().'/images/secured-site.jpg" alt="Verified by Visa" width="80" height="80">';
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after', 10, 2 );
上記のコード src="'.get_template_directory_uri().'/images/ は、テーマディレクトリ内のサーバー上の images という名前のディレクトリ（フォルダ）を探します。したがって、画像はサーバーの画像フォルダ内にある必要があります。
または、サイトのメディアライブラリに画像をアップロードし、src= の後の値を画像URLで更新するだけです。WordPressメディアライブラリの画像を使用した場合の更新されたスニペットは次のようになります。
/**
* Output something after your form(s).
*
* @link https://wpforms.com/developers/how-to-display-an-image-after-your-form/
*/
function wpf_dev_frontend_output_after( $form_data, $form ) {
// Optional, you can limit to specific forms. Below, we restrict output to
// form #999.
if ( absint( $form_data[ 'id' ] ) !== 999 ) {
return;
}
// Run code or see example echo statement below.
echo '<img src="http://myexamplesite.com/wp-content/uploads/2021/01/image-name.jpg " alt="Verified by Visa" width="80" height="80">';
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after', 10, 2 );
よくある質問
これらは、WPFormsで送信ボタンの後に画像を追加することについて、よく見られる質問への回答です。
Q: フォームの後にリンク付きのテキストを表示するにはどうすればよいですか？
A: リンク付きのテキストだけを表示したい場合は、このスニペットを使用できます。
この例では、「Stripe提供」というメッセージと、Stripeへの新しいウィンドウを開くリンクを表示します。
/**
* Output Text after your form(s).
*
* @link https://wpforms.com/developers/wpforms_frontend_output_after/
*/
function wpf_dev_frontend_output_after_display_text( $form_data, $form ) {
// Optional, you can limit to specific forms. Below, we restrict output to
// form #999.
if ( absint( $form_data[ 'id' ] ) !== 999 ) {
return;
}
// Run code or see example echo statement below.
echo _e( '<p> Powered by <strong> <a href="https://stripe.com/" target="_blank">Stripe</a> </strong> | <a href="link-to-terms" target="_blank">Terms and Privacy!</a>.', 'plugin-domain' );
}
add_action( 'wpforms_frontend_output_after', 'wpf_dev_frontend_output_after_display_text', 10, 2 );
これで完了です！フォームの後に画像が正常に追加されました。
次に、送信をクリックしたときに表示されるプリロード画像を 変更しますか？送信時のプリローダーアイコンを変更する方法に関する記事をご覧ください。
関連
アクション参照：wpforms_frontend_output_after