Cómo cambiar el icono de precarga al enviar

Introducción

¿Te gustaría cambiar el icono de precarga en tu WPForms? Hay un icono de precarga predeterminado que se usa en todos los WPForms cuando la opción Habilitar envío de formularios AJAX está activada en tu formulario. Si deseas personalizar este icono con el tuyo, necesitarás agregar un pequeño fragmento de PHP para hacerlo. En este tutorial, te mostraremos cómo lograrlo.

Creación del formulario

Primero, comenzaremos creando nuestro formulario y agregando nuestros campos.

Habilitar AJAX en la configuración del formulario

A continuación, deberás asegurarte de habilitar AJAX. Para ello, haz clic en Ajustes y, en General, haz clic en Avanzado para abrir las opciones avanzadas y activa el interruptor Habilitar envío de formularios AJAX para activar AJAX.

Añadir el fragmento

A continuación, deberás copiar y pegar este fragmento en tu sitio. Si necesitas ayuda sobre cómo agregar fragmentos a tu sitio, consulta este tutorial

/**
 * 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 );

Agregar este fragmento cambiará la URL de dónde encontrar el icono de carga.

¡Y eso es todo! Has cambiado el icono con éxito. ¿Te gustaría aprender a posicionar la Descripción del campo encima del campo del formulario? Echa un vistazo al artículo sobre Cómo posicionar la descripción del campo encima del campo del formulario.

Relacionado

Referencia de filtro: wpforms_display_submit_spinner_src