Requisitos: plugin Charitable Pro 1.8.17+
Plan Básico y superior

¿Tu formulario de donación se ve roto cuando alguien lo abre en un teléfono?

Los formularios de Charitable ya son adaptables. El problema suele venir de tu tema o constructor de páginas, cuyos estilos pueden sacar un campo del borde, encoger un botón o romper el área de pago en una pantalla pequeña.

DonationExpress lo soluciona. En un teléfono, abre el formulario de donación real de tu campaña en una hoja a pantalla completa que tu tema no puede estilizar. Los campos, las cantidades sugeridas y las pasarelas de pago son las mismas, y el formulario se ve igual en todos los teléfonos.

Esta guía cubre cuándo usar DonationExpress, cómo activarlo, cómo estilizar la hoja, qué recibo mostrar y cómo previsualizarlo sin un teléfono. Los desarrolladores encontrarán los hooks, filtros y ejemplos de código al final.

Mucha gente que llega a tu formulario desde redes sociales, correo electrónico o anuncios está en un teléfono, por lo que un formulario móvil limpio ayuda a que más de ellos completen su donación. DonationExpress es una función Beta y está desactivada por defecto, así que nada cambia en tu sitio hasta que lo actives.

¿Qué contiene esta guía?

Ver el vídeo de configuración de DonationExpress

Este breve tutorial muestra cómo se activa DonationExpress y cómo se realiza una donación a través de la hoja en un teléfono.

Cuándo usar DonationExpress

DonationExpress ayuda más en estas situaciones.

• Tu tema o constructor de páginas estiliza el formulario de donación o popup de una manera que se ve rota en los teléfonos.
• Quieres que los donantes vean el mismo formulario de donación en todos los dispositivos, sea cual sea el teléfono que usen y el tema que tengas.
• Quieres que el formulario móvil cargue rápido, sin que los scripts y estilos de tu tema se carguen junto a él.
• Recibes donaciones de redes sociales, correo electrónico o anuncios, donde muchos visitantes están en un teléfono y la primera impresión de tu formulario es importante.

Incluso un tema de organización sin fines de lucro bien construido puede añadir estilos que choquen con un formulario en una pantalla pequeña. Un formulario que se ve roto es una de las razones por las que la gente se va antes de donar, y cubrimos las otras en cómo evitar que los donantes abandonen el formulario de donación.

Cómo DonationExpress cambia el formulario en un teléfono

A la izquierda hay un formulario de donación en un teléfono cuando los estilos del tema chocan con él. A la derecha está la misma campaña con DonationExpress activado.

La hoja muestra el formulario de donación real de tu campaña, con los mismos campos, cantidades sugeridas y pasarelas de pago. Solo falta el estilo del tema.

Dónde encontrar la configuración de DonationExpress

Para encontrar la configuración, dirígete a Charitable » Ajustes » General » Formulario de Donación. Verás 3 ajustes de DonationExpress en Opciones de Visualización.

• DonationExpress activa la función y elige qué botones de donación y formularios la utilizan.
• Estilo de Esquina de DonationExpress establece la forma de la esquina para los botones y campos en la hoja.
• DonationExpress Receipt determina qué muestra la hoja después de una donación exitosa.

El estilo de esquina y la configuración del recibo permanecen ocultos hasta que DonationExpress se configure en algo que no sea Desactivado, porque solo la hoja los utiliza.

Cómo configurar DonationExpress en 6 pasos

Configurar DonationExpress lleva unos minutos. Cada configuración está en la misma pantalla y puedes probar el resultado sin tener que coger el teléfono.

1. Elige qué formularios de donación usarán DonationExpress

Para empezar, abre la configuración de DonationExpress. Tiene 3 opciones, así que elige la que coincida con los formularios que deseas cambiar.

Opción	Lo que hace
Desactivado	DonationExpress está desactivado y los formularios de donación se muestran de la manera normal en los teléfonos. Esta es la configuración predeterminada.
Solo botones de donación modales	Solo los botones de donación que abren una ventana emergente o modal utilizan la hoja. Los formularios colocados directamente en una página se dejan como están.
Todos los formularios de donación	Cada botón de donación, enlace y formulario en la página utiliza la hoja en un teléfono.

Elige Solo botones de donación modales si ya te gusta cómo se ven tus formularios en la página en los teléfonos y solo quieres arreglar la ventana emergente.

Elige Todos los formularios de donación si quieres que cada donación móvil pase por la hoja, sin importar cómo el donante llegó al formulario. Si no estás seguro, empieza con esta opción.

DonationExpress solo se ejecuta en pantallas de 768 píxeles de ancho o menos. En tabletas y ordenadores, tus formularios se ven exactamente como hoy, y un desarrollador puede cambiar ese ancho con un filtro que se cubre en la referencia del desarrollador a continuación.

2. Elige un estilo de esquina para DonationExpress

Una vez que DonationExpress esté activado, la configuración Estilo de esquina de DonationExpress aparecerá debajo. Controla qué tan redondeados son los botones y campos en la hoja.

Estilo de esquina	Apariencia
Afilado	Los botones y campos tienen esquinas cuadradas.
Redondeado	Los botones y campos tienen esquinas ligeramente redondeadas. Esta es la configuración predeterminada.
Cápsula	Los botones y campos están completamente redondeados, como una píldora.

Aquí está la misma hoja con el estilo Píldora. Elige el estilo más cercano a los botones del resto de tu sitio.

El resto del aspecto de la hoja proviene de la configuración que ya tienes en Charitable, ya que DonationExpress no lee nada de tu tema.

• El color de acento proviene de tu configuración de Color de resaltado predeterminado del formulario de donación, en la misma pantalla Charitable » Configuración » General » Formulario de donación. El botón Donar y la barra de progreso en la hoja lo utilizan.
• El logotipo proviene de tu logotipo de correo electrónico en Charitable » Configuración » Correos electrónicos. Si has configurado uno, se muestra en la parte superior de la hoja.

3. Elige el recibo de DonationExpress

A continuación, utiliza la configuración Recibo de DonationExpress para elegir lo que ven los donantes después de que donan. Esta configuración requiere el plugin Charitable Pro 1.8.17.1 o superior, así que actualiza primero si no la ves.

Estilo del recibo	Lo que ve el donante
Celebración (limpio, minimalista)	El donante ve una pantalla de agradecimiento con una marca de verificación y confeti. Tiene un botón Compartir, un botón opcional Hacerlo mensual, un botón opcional Descargar recibo en PDF y un botón Cerrar. Esta es la configuración predeterminada.
Detallado (limpio, desglose por artículo)	El donante ve la misma pantalla de celebración más una tabla que enumera cada campaña a la que donó y el total.
Página de recibo estándar	La hoja se cierra y el donante aterriza en tu página de recibo normal, con el estilo de tu tema, exactamente como lo haría sin DonationExpress.

Las facturas detalladas y de celebración permanecen dentro de la hoja, por lo que el donante nunca abandona el diseño limpio.

Qué botones aparecen en el recibo de DonationExpress

Algunos botones de las facturas de celebración y detalladas solo se muestran cuando la función correspondiente está activada.

• Compartir abre el menú de compartir propio del teléfono, para que los donantes puedan publicar en redes sociales o enviar un mensaje con un solo toque.
• Hacerlo mensual solo se muestra cuando la función Donaciones recurrentes de Charitable está activa y el donativo fue único. Reabre la hoja con un donativo mensual seleccionado.
• Descargar recibo en PDF solo se muestra cuando la función Recibos en PDF de Charitable está activa.

4. Guarda la configuración de DonationExpress

Cuando las 3 configuraciones se vean correctas, desplázate hasta el final de la página y haz clic en Guardar cambios. Tus configuraciones ahora deberían verse algo así.

5. Previsualiza DonationExpress sin un teléfono

No necesitas un teléfono para ver la hoja. Mientras estés conectado como administrador, abre esta URL en tu navegador y reemplaza NN con el ID de una campaña.

https://yoursite.com/wp-admin/?charitable_action=preview-mobile-form&campaign_id=NN

Muestra el mismo formulario de donación sin tema que DonationExpress muestra en un teléfono. De esa manera, puedes comprobar tus colores, logo y estilo de esquinas en una pantalla de tamaño completo.

6. Prueba DonationExpress en tu teléfono

Finalmente, abre una de tus campañas en tu teléfono y toca el botón Donar. La hoja de DonationExpress debería deslizarse sobre la página, como se muestra en la siguiente sección.

Si usas una pasarela de pago en modo de prueba, también puedes hacer una donación de prueba para ver el recibo que elegiste en el paso 3.

Lo que ven los donantes con DonationExpress activado

Aquí hay una campaña en un teléfono con Todos los formularios de donación seleccionados. La página de la campaña se ve igual que antes hasta que el donante toca Donar ahora.

Ese toque abre la hoja. El nombre de la campaña y la barra de progreso se sitúan en la parte superior, con las cantidades sugeridas debajo de ellos.

Más abajo, el donante introduce sus datos y elige un método de pago. El botón Donar utiliza tu color de resaltado.

Después de que se procesa el donativo, el recibo aparece en la misma hoja. Este es el recibo detallado, con una línea desglosada para la campaña y el total.

El donante nunca abandona tu sitio. Si deseas más ideas para la página que rodea el formulario, lee nuestra guía sobre cómo crear una página de donación que convierta.

Consejos que vale la pena tener en cuenta

Estos puntos ayudarán a que DonationExpress funcione sin problemas en tu sitio.

• DonationExpress muestra el formulario real de la campaña, por lo que tus campos, cantidades sugeridas y pasarelas aparecen automáticamente en la hoja. No hay nada que reconstruir.
• Si usas un plugin de caché u optimización, excluye la ruta /charitable-give/ del almacenamiento en caché. La hoja necesita tokens de seguridad frescos cada vez que se carga, lo mismo que tus páginas normales de donación y recibo.
• Apple Pay y Google Pay funcionan dentro de la hoja. Apple Pay todavía necesita que tu dominio esté verificado con tu pasarela de pago, lo mismo que en el formulario normal.
• Actívalo antes de una gran campaña, como una de tus ideas para el Día de Dar o una campaña de Instagram, para que cada donante que llegue en un teléfono reciba el formulario limpio.
• DonationExpress está en Beta y desactivado por defecto, por lo que los sitios existentes no cambian hasta que lo activas.

Solución de problemas de DonationExpress

Si algo no se ve bien, estas son las causas habituales.

La Hoja de DonationExpress No Se Abre en Mi Teléfono

Primero, comprueba que el ajuste DonationExpress no esté en Desactivado. Si está en Solo Botones de Donación Modales, los formularios colocados directamente en una página no usarán la hoja, así que cámbialo a Todos los Formularios de Donación.

La hoja también solo se abre en pantallas de 768 píxeles de ancho o menos. Un teléfono grande girado de lado puede ser más ancho que eso, así que prueba con el teléfono en vertical.

La Hoja de DonationExpress Muestra un Error o No Envía

Esto suele ser un plugin de caché que sirve una copia antigua de la hoja. Excluye la ruta /charitable-give/ del caché, vacía la caché e inténtalo de nuevo.

Apple Pay No Aparece en la Hoja de DonationExpress

Apple Pay necesita que tu dominio esté verificado con tu pasarela de pago. Si Apple Pay tampoco aparece en tu formulario de donación normal, termina primero la verificación del dominio.

Falta el botón "Hacerlo mensual" o "PDF"

Estos botones solo aparecen cuando la función correspondiente está activa. Hazlo Mensual también solo aparece después de un regalo único, y nunca aparece en la opción de Página de Recibo Estándar.

Referencia para desarrolladores de DonationExpress

DonationExpress renderiza el formulario de donación real de la campaña dentro de un documento desnudo y sin tema, servido desde un endpoint dedicado. Una superposición a pantalla completa en la página principal carga ese documento en un iframe. Un pequeño puente postMessage mantiene la página principal y el frame sincronizados durante el flujo de donación y recibo.

Dónde reside el código de DonationExpress

Pieza	Ubicación
Bootstrap	Charitable_Mobile (includes/mobile/class-charitable-mobile.php), iniciado en la prioridad init 9
Funciones auxiliares	includes/mobile/charitable-mobile-functions.php
Aislamiento de configuración y activos	includes/mobile/charitable-mobile-hooks.php
Endpoint sin tema	Charitable_Mobile_Form_Endpoint (includes/endpoints/class-charitable-mobile-form-endpoint.php)
Plantillas	templates/mobile/form-mobile.php, templates/mobile/receipt-mobile.php
Activos	assets/css/charitable-mobile.css, assets/js/charitable-mobile-{sheet,bridge,receipt}.js

Endpoints y URLs de DonationExpress

El endpoint registra 2 reglas de reescritura y 2 variables de consulta, y se renderiza en template_redirect (prioridad 0).

Propósito	Permalinks bonitos	Permalinks simples
Formulario de donación	/charitable-give/{campaign_id}/	?charitable_mobile_form={campaign_id}
Recibo en la hoja	/charitable-give/receipt/{donation_id}/	?charitable_mobile_receipt={donation_id}

El documento de recibo está controlado por acceso con charitable_user_can_access_donation(). Una solicitud para una donación a la que el visitante actual no puede acceder devuelve un 403.

Funciones de ayuda de DonationExpress

Función	Devoluciones
charitable_mobile_get_mode()	El modo resuelto, que es off, modal, o always.
charitable_mobile_is_enabled()	Si la hoja está habilitada o no (false cuando el modo es off).
charitable_mobile_get_breakpoint()	El punto de interrupción móvil en píxeles (768 por defecto).
charitable_mobile_get_form_url( $campaign_id, $args )	La URL del formulario sin tema. $args acepta amount y period.
charitable_mobile_get_receipt_url( $donation_id )	La URL del recibo en la hoja sin tema.
charitable_mobile_get_brand_tokens( $campaign_id )	array{ accent, logo, radius } resuelto a partir de la configuración de Charitable.
charitable_mobile_get_receipt_style( $campaign_id )	El estilo de recibo resuelto, que es confetti, detailed, o redirect.

Filtros de DonationExpress

Filtro	Predeterminado	Propósito
charitable_mobile_mode	Configuración guardada	Forzar el modo en el código, por ejemplo por página o por campaña. Devuelve off,  modal, o always.
charitable_mobile_is_enabled	Derivado del modo	Puerta final de encendido/apagado. Devuelve false para deshabilitar la hoja independientemente del modo.
charitable_mobile_form_breakpoint	768	El punto de interrupción de ancho máximo, en píxeles, que cuenta como móvil.
charitable_mobile_brand_tokens	Tokens resueltos	Anula el accent, logo, y radius utilizados para estilizar la hoja.
charitable_mobile_asset_is_allowed	true para activos de Charitable y de pasarela	Permite o excluye un manejador de estilo o script específico en el documento desnudo.
charitable_mobile_receipt_style	Configuración guardada	Variar el estilo del recibo por campaña. Devuelve confetti,  detailed, o redirect.
charitable_mobile_receipt_pdf_url	URL de recibos en PDF o ''	Anula la URL del botón PDF o devuelve '' para ocultarlo.
charitable_mobile_receipt_monthly_url	URL del formulario mensual o ''	Anula la URL de Hazlo Mensual, o devuelve '' para ocultarla.
charitable_mobile_receipt_check_icon	Marcado de icono de verificación predeterminado	Intercambia el icono de éxito que se muestra en el recibo.

Acciones de DonationExpress

Acción	Ejecuciones
charitable_mobile_form_head	En el <head> del documento base, donde se imprimen los activos de encabezado de Charitable y de la pasarela.
charitable_mobile_form_footer	Antes del </body> de cierre del documento base, donde se imprimen los scripts del pie de página.

URL de vista previa de administrador de DonationExpress

?charitable_action=preview-mobile-form&campaign_id=NN redirige a un administrador (manage_options) a la URL del formulario sin tema de una campaña, para que la hoja se pueda revisar en cualquier tamaño de pantalla.

Ejemplos de código para personalizar DonationExpress

Añade cualquiera de estos fragmentos con un plugin de fragmentos de código o el archivo functions.php de tu tema hijo.

Forzar la activación de DonationExpress para una sola página de destino

add_filter(
    'charitable_mobile_mode',
    function ( $mode ) {
        if ( is_page( 'give-now' ) ) {
            return 'always';
        }
        return $mode;
    }
);

Aumentar el punto de interrupción de DonationExpress para tabletas pequeñas

add_filter( 'charitable_mobile_form_breakpoint', fn() => 900 );

Anular el color de acento y el radio de esquina de DonationExpress

add_filter(
    'charitable_mobile_brand_tokens',
    function ( $tokens, $campaign_id ) {
        $tokens['accent'] = '#1e88e5';
        $tokens['radius'] = '4px';
        return $tokens;
    },
    10,
    2
);

Mostrar el recibo detallado de DonationExpress para una campaña

Este fragmento muestra el recibo Detallado para la campaña 1234 y mantiene el recibo de Celebración en cualquier otro lugar.

add_filter(
    'charitable_mobile_receipt_style',
    function ( $style, $campaign_id ) {
        return 1234 === (int) $campaign_id ? 'detailed' : $style;
    },
    10,
    2
);

Permitir un script adicional en el documento de DonationExpress

Este fragmento permite que un manejador de script adicional, como un cargador de fuentes personalizado, se cargue dentro del documento sin tema.

add_filter(
    'charitable_mobile_asset_is_allowed',
    function ( $allowed, $handle ) {
        if ( 'my-font-loader' === $handle ) {
            return true;
        }
        return $allowed;
    },
    10,
    2
);

Conclusión

Ahora sabes cómo activar DonationExpress, elegir qué formularios lo usan, estilizar la hoja, seleccionar el recibo que ven los donantes y previsualizarlo todo sin un teléfono. Tus donantes móviles recibirán el mismo formulario limpio en cada teléfono, sea cual sea el tema que uses.

Si te atascas en algún paso, nuestro equipo de soporte estará encantado de ayudarte.

También te Puede Interesar Leer

Estas guías y publicaciones de blog cubren las funciones que funcionan junto con DonationExpress, y las campañas en las que más ayuda.

• Plantillas de formularios de donación. Aprende a cambiar el aspecto del formulario de donación estándar que se muestra en tabletas y ordenadores.
• Recibos en PDF. Configura los recibos en PDF que aparecen detrás del botón Descargar recibo en PDF en la hoja.
• Donaciones recurrentes. Activa las donaciones mensuales detrás del botón Hacerlo mensual en la hoja.
• Cómo habilitar Apple Pay y Google Pay con Stripe. Verifica tu dominio para que Apple Pay aparezca dentro de la hoja.
• Cómo crear un formulario de donación. Crea el formulario de campaña que DonationExpress muestra en los teléfonos, paso a paso.
• Anuncios de Facebook para organizaciones sin ánimo de lucro. Planifica anuncios que envíen a las personas a tu campaña, donde la mayoría de los clics llegan desde un teléfono.