Cargar estilos de WPForms en páginas específicas

¿Te gustaría controlar cuándo se carga el CSS de WPForms en tu sitio? Por defecto, WPForms aplica la opción seleccionada de Incluir estilo del formulario de forma global. Sin embargo, puedes usar un simple filtro de PHP para cargar o deshabilitar condicionalmente el estilo del formulario en páginas específicas.

En este tutorial, te mostraremos cómo usar el filtro wpforms_setting para cargar el Estilo base y de tema del formulario de WPForms solo en ciertas páginas.


Creación del formulario

Primero, crea un formulario y publícalo en una de tus páginas.
Si necesitas ayuda para crear un formulario, consulta nuestra guía para crear tu primer formulario.

Una vez que hayas agregado tu formulario a la página deseada, asegúrate de que la opción Incluir estilo del formulario esté configurada como Estilo base y de tema del formulario en WPForms » Ajustes » General.

Carga condicional del estilo del formulario

Por defecto, WPForms carga su CSS en todas las páginas donde se muestra un formulario.

Si prefieres cargarlo solo en páginas específicas, puedes usar el siguiente fragmento de código.

add_filter( 'wpforms_setting', function( $value, $key, $default, $option ) {
    if ( $key === 'disable-css' ) {
        // Example: only load WPForms CSS on page ID 123.
        if ( is_page( 123 ) ) {
            return '1';
        } else {
            return '3';
        }
    }
    return $value;
}, 10, 4 );

Cómo funciona

  • El fragmento utiliza el filtro wpforms_setting para comprobar si la página actual coincide con el ID proporcionado.
  • Si la condición es verdadera, establece la opción de CSS a '1', lo que carga el CSS de WPForms.
  • En todas las demás páginas, devuelve '3', lo que deshabilita completamente el CSS de WPForms.

Puedes reemplazar 123 con el ID de cualquier página donde quieras que se cargue el estilo de WPForms.

¡Y eso es todo! Ahora sabes cómo controlar cuándo se carga el estilo de WPForms utilizando un simple filtro.

¿A continuación, te gustaría aprender a personalizar el estilo del botón de envío o añadir tu propio CSS personalizado para WPForms? Estos tutoriales te ayudarán a llevar el estilo de los formularios aún más lejos.