### [送信時にプリローダーアイコンを変更する方法](https://wpforms.com/developers/how-to-change-the-pre-loader-icon-on-submit/) **公開日:** 2020年2月14日 **著者:** エディトリアルチーム **抜粋:** このチュートリアルでは、フォームがすぐに送信されない場合にAJAXフォームに表示されるプリローダーアイコンを変更する手順を説明します。 **コンテンツ:** ## はじめに WPFormsのプリローダーアイコンを変更したいですか？フォームで**AJAXフォーム送信を有効にする**設定が有効になっている場合、すべてのWPFormsで使用されるデフォルトのプリローディングアイコンがあります。このアイコンを独自のアイコンにカスタマイズしたい場合は、PHPスニペットを追加する必要があります。このチュートリアルでは、その方法を説明します。 ## フォームの作成 まず、フォームを作成し、フィールドを追加することから始めます。  ## フォーム設定でAJAXを有効にする 次に、AJAXを有効にする必要があります。これを行うには、**設定**をクリックし、**一般**で**詳細設定**をクリックして詳細オプションを開き、AJAXを有効にするために**AJAXフォーム送信を有効にする**をオンにします。  ## スニペットの追加 次に、このスニペットをサイトにコピーして貼り付ける必要があります。サイトにスニペットを追加する方法についてサポートが必要な場合は、このチュートリアルを参照してください。 ``` /** * プリローダーアイコンを変更する * * @link https://wpforms.com/developers/how-to-change-the-pre-loader-icon-on-submit/ */ function custom_wpforms_display_submit_spinner_src( $src, $form_data ) { // シングルクォートの間に読み込み画像のURLを入力します return 'http://yoursite.com/your-image.svg'; } add_filter( 'wpforms_display_submit_spinner_src', 'custom_wpforms_display_submit_spinner_src', 10, 2 ); ``` このスニペットを追加すると、読み込みアイコンの場所のURLが変更されます。  これで完了です！アイコンを正常に変更できました。フィールドの**説明**をフォームフィールドの上に配置する方法を学びたいですか？[フィールドの説明をフォームフィールドの上に配置する方法](https://wpforms.com/developers/how-to-position-the-field-description-above-the-form-field/ "フィールドの説明をフォームフィールドの上に配置する方法")の記事をご覧ください。 ## 関連 フィルターリファレンス: [wpforms\_display\_submit\_spinner\_src](https://wpforms.com/developers/wpforms_display_submit_spinner_src/ "wpforms_display_submit_spinner_srcフィルターの使用") **カテゴリ:** チュートリアル **タグ:** PHP ---