送信時のプリローダーアイコンを変更する方法

はじめに

WPForms のプリローダーアイコンを変更しますか？ フォームで AJAX フォーム送信を有効にする 設定が有効になっている場合、すべての WPForms でデフォルトのプリローディングアイコンが使用されます。このアイコンを独自のアイコンにカスタマイズしたい場合は、PHP スニペットを追加する必要があります。このチュートリアルでは、その方法を説明します。

フォームの作成

まず、フォームを作成し、フィールドを追加することから始めます。

フォーム設定で AJAX を有効にする

次に、AJAX を有効にする必要があります。これを行うには、設定 をクリックし、一般 で 詳細設定 をクリックして詳細オプションを開き、AJAX フォーム送信を有効にする をオンにして AJAX を有効にします。

スニペットの追加

次に、このスニペットをサイトにコピーして貼り付ける必要があります。スニペットをサイトに追加する方法についてサポートが必要な場合は、このチュートリアルを参照してください。

/**
 * Change the pre-loader icon
 *
 * @link https://wpforms.com/developers/how-to-change-the-pre-loader-icon-on-submit/
 */
 
function custom_wpforms_display_submit_spinner_src( $src, $form_data ) {
 
    // Enter the URL to the loading image in between the single quotes
    return 'http://yoursite.com/your-image.svg';

}

add_filter( 'wpforms_display_submit_spinner_src', 'custom_wpforms_display_submit_spinner_src', 10, 2 );

このスニペットを追加すると、ローディングアイコンの場所の URL が変更されます。

これで完了です！ アイコンを正常に変更しました。 説明 フィールドをフォームフィールドの上に配置する方法を学びたいですか？ フォームフィールドの上にフィールドの説明を配置する方法 の記事をご覧ください。

関連

フィルターリファレンス: wpforms_display_submit_spinner_src