フォームの後に画像を表示したいですか？小さなPHPスニペットで、送信ボタンのすぐ下に画像、動画、メッセージを簡単に追加できます。
このチュートリアルでは、その方法を順を追って説明する。
フォームの作成
まず、フォームビルダーにアクセスするために、新しいフォームを作成するか、既存のフォームを編集する必要があります。フォームビルダーで、フォームに必要なフィールドを追加します。
スニペットの追加
このコード・スニペットを使って、フォームの下に何でも追加することができます。画像、ビデオ、またはテキストを追加することができます。送信ボタンの後に画像を追加するには、このスニペットをコピーしてサイトに貼り付ける必要があります。
スニペットをサイトに追加する際にヘルプが必要な場合は、こちらのチュートリアルをご覧ください。
この例では、このスニペットをフォームID999だけに限定しています。この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:リンク付きのテキストを表示したいだけなら、このスニペットを使うことができます。
この例では、"Powered by 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