How to Change the Pre-Loader Icon on Submit

Overview

Would you like to change the pre-loader icon on your WPForms? There is a default pre-loading icon used on all WPForms but you can easily change this icon with a small code snippet. Using PHP, this tutorial will show you how to customize this icon.

Setup

By default, when the Enable AJAX form submission setting is enabled on your form.

Enable AJAX form submission

With the code snippet shown below, you can personalize this icon to suit the needs of your site.

/**
 * Change the pre-loader icon
 *
 * @link https://wpforms.com/developers/how-to-change-the-pre-loader-icon-on-submit/
 *
 */
 
function custom_wpforms_display_sumbit_spinner_src(  $src, $form_data ) {
 
    return 'http://yoursite.com/your-image.svg';
}
add_filter( 'wpforms_display_sumbit_spinner_src', 'custom_wpforms_display_sumbit_spinner_src', 10, 2 );

change the pre-loader icon with PHP snippet

And that’s it! You’ve successfully changed the icon. Would you like to learn how to position the field Description above the form field? Take a look at the article on How to Position the Field Description Above the Form Field.