Requiere: plugin Charitable Pro 1.8.19.1+
Plan Básico y superior

¿Quieres decirle algo a los donantes justo dentro de tu formulario de donación, como para qué sirve un importe o cuándo llegará su recibo?

Un Bloque de texto pone tus propias palabras dentro de un formulario de donación visual. Es solo para mostrar, por lo que no recopila información ni añade nada al registro de la donación.

Esta guía cubre dónde encontrar el campo, cómo añadir y escribir un bloque, su configuración de tamaño y color, cómo funciona con la tipografía del formulario, solución de problemas y los ganchos para desarrolladores.

Los donantes leen el formulario más detenidamente que cualquier otra parte de la página, porque ahí es donde introducen sus datos de pago. Una nota breve en el lugar adecuado puede responder a su pregunta antes de que se detengan.

¿Qué contiene esta guía?

Ver el vídeo del bloque de texto

Este breve vídeo muestra cómo añadir un Bloque de texto a un formulario de donación y configurarlo.

Cuándo usar un bloque de texto en tu formulario de donación

Usa un Bloque de texto para la frase que un donante necesita en ese punto del formulario.

• Explicar un importe. "Un regalo de 25 $ cubre el filtro de agua de una familia durante un año" hace más trabajo al lado de los importes que en la página de la campaña encima de ellos.
• Establecer expectativas antes del pago. Una nota breve puede decir que las donaciones se procesan de forma segura o que los recibos llegan por correo electrónico en pocos minutos.
• Mostrar tu política de reembolso o cancelación. Los donantes la ven donde la buscan, en lugar de en un pie de página.
• Dar instrucciones para un campo inusual. Si has añadido una pregunta personalizada, un Bloque de texto encima de ella puede decir por qué la estás haciendo.
• Enumerar lo que cubre la campaña. Una lista corta con viñetas se lee más rápido que un párrafo largo.

Bloque de texto frente a campo de texto: qué campo usar

El plugin Charitable Pro 1.8.19.1 tiene 2 campos con nombres similares y hacen cosas opuestas. Ayuda tener esto claro antes de construir.

	Lo que hace	¿Escribe el donante en él?
Bloque de texto	Muestra tu texto al donante.	No. No recopila nada.
Campo de texto	Recopila una respuesta escrita larga y la guarda con la donación.	Sí.

Campo de texto se llamaba Texto enriquecido antes de la versión 1.8.19.1. Los formularios que ya lo usan no se ven afectados y tus donantes no notan ningún cambio.

En la lista de campos, los 2 campos están separados por varios botones y tienen iconos diferentes. Bloque de texto tiene un signo de párrafo y Campo de texto tiene un lápiz.

Dónde encontrar el campo de bloque de texto

Encontrarás Bloque de texto en los campos del formulario de donación del creador de campañas.

1. Para empezar, abre una campaña en el creador de campañas.
2. Elige Formulario en la barra lateral izquierda.
3. En la pestaña Añadir campo, busca en Campos del formulario la opción Bloque de texto.

Nota: Si no puedes seleccionar la pestaña Formulario, la campaña aún no tiene una plantilla. Elige una primero en la pestaña Plantilla.

Cómo añadir un bloque de texto a un formulario de donación

Arrastra Bloque de texto de la lista de campos a la vista previa del formulario y suéltalo donde quieras que aparezcan las palabras. La vista previa se actualiza al soltarlo, para que puedas ver de inmediato si está en el lugar correcto.

La lista de campos es de donde eliges los campos, y no establece su orden. Dónde sueltas el bloque decide dónde lo ve el donante, ya sea encima de las cantidades, entre las cantidades y los campos de nombre, o justo antes de la sección de pago.

Una vez que el bloque está en el formulario, sus ajustes se abren en la pestaña Opciones de campo. El panel se titula Bloque de texto (ID: n), donde n es el ID del campo dentro de este formulario.

Cómo escribir el contenido del bloque de texto

El cuadro Contenido es un pequeño editor de texto enriquecido. Su barra de herramientas te ofrece estas opciones.

• H2 añade un encabezado.
• Negrita y cursiva añaden énfasis.
• Lista numerada y lista con viñetas convierten las líneas en una lista.
• Enlace añade un enlace al texto seleccionado.
• Borrar formato elimina el estilo del texto seleccionado.

Mantén un bloque corto. Si te encuentras escribiendo varios párrafos, esas palabras probablemente pertenecen a la página de la campaña, donde hay espacio para ellas.

Cómo etiquetar un bloque de texto

Etiqueta es para ti, no para el donante. Nombra el bloque en el creador para que puedas encontrarlo de nuevo en un formulario con varios bloques, y nunca se muestra en el formulario.

Un formulario con 3 bloques etiquetados como "Bloque de texto" es difícil de manejar. Nombra cada uno según lo que dice, como "Por qué 25 €", "Política de devoluciones" o "Nota de Gift Aid".

Cómo establecer el tamaño de fuente del bloque de texto

Tamaño de fuente tiene 4 valores.

Valor	Efecto
Mediano (heredar)	Sigue el tamaño de texto del cuerpo del propio formulario.
Pequeño	Es más pequeño que el texto del cuerpo.
Grande	Es más grande que el texto del cuerpo.
Extra Grande	Es el tamaño más grande.

Los tamaños son relativos al tamaño de fuente base del formulario, no valores fijos de píxeles. Todo dentro del bloque escala junto, por lo que un encabezado en un bloque Grande sigue siendo más grande que el párrafo debajo de él.

Consejo profesional: Dejarlo en Mediano (heredar) suele ser lo correcto. Elige Grande cuando un bloque cumple la función de encabezado, y Pequeño para una nota legal que quieres que esté presente pero discreta.

Cómo establecer el color del texto del bloque de texto

Color de texto establece el color para todo en ese bloque. Déjalo vacío para usar el color de texto del propio formulario, que es lo que la mayoría de los formularios necesitan, porque un bloque que coincide con todo lo que lo rodea se lee como parte del formulario.

Úsalo con cuidado. Un solo bloque en un color diferente atrae la mirada, mientras que 3 colores diferentes en un solo formulario simplemente se ven mal.

Cómo añadir una clase CSS a un bloque de texto

Clase CSS añade una clase al contenedor del bloque para que puedas estilizarlo desde tu tema. La referencia del desarrollador a continuación tiene un ejemplo.

Cómo funciona el estilo del bloque de texto con la tipografía del formulario

La versión 1.8.19.1 también añadió ajustes de Tipografía para formularios de donación visuales, en Estilo visual en la pestaña Opciones del formulario. Estos establecen el tamaño y el color para el formulario *completo*, incluyendo el texto del cuerpo, las etiquetas y el texto de ayuda.

Los 2 conjuntos de ajustes funcionan juntos de esta manera.

• Opciones del formulario » Estilo visual establece la línea base para todo en el formulario.
• El tamaño de fuente y el color del texto de un Bloque de texto anulan esa línea base, solo para ese bloque.

Nota: Los formularios que creaste antes de la versión 1.8.19.1 conservan el tamaño y el color que tienen ahora hasta que cambies alguno de los ajustes de tipografía.

Lo que el campo de bloque de texto no hace

El nombre puede sugerir lo contrario, así que esto es lo que un Bloque de texto omite.

• No recopila nada. Nada de un Bloque de texto llega al registro de donaciones, a una exportación o a un correo electrónico. Para recopilar una respuesta, usa Entrada de texto.
• No es condicional por sí mismo. Se muestra a todos los donantes que ven ese formulario.
• No acepta HTML o scripts arbitrarios. El contenido se sanea al entrar y al salir, por lo que el marcado pegado más allá de las herramientas de formato puede ser eliminado. Si necesitas marcado sin procesar, usa el campo HTML.

Ejemplo: Un formulario de donación que explica sus propias cantidades

Digamos que una campaña de agua potable ofrece 25 $, 50 $ y 100 $, y el equipo encuentra que los donantes dudan en el paso de la cantidad. Aquí está el formulario creado para responder a la pregunta que esos donantes se están haciendo.

1. Añade una breve introducción encima de las cantidades

Arrastra un Bloque de texto a la parte superior del formulario, encima de las cantidades de donación. Etiquétalo como Por qué estas cantidades y, en Contenido, escribe una frase sin encabezado.

Cada cantidad a continuación cubre una parte específica y con costo del trabajo. Elige la que encaje.

Deja el Tamaño de fuente en Mediano (heredar), porque este es un texto normal del cuerpo haciendo un trabajo normal.

2. Añade un desglose con viñetas debajo de las cantidades

Arrastra un segundo bloque debajo de las cantidades y etiquétalo como Qué financia cada donación. Usa H2 para un encabezado, luego añade una lista con viñetas.

A dónde va tu donación

• 25 $ cubre los cartuchos de filtro de un hogar durante un año.
• 50 $ cubre el mantenimiento anual de un puesto de agua compartido.
• 100 $ cubre las pruebas de agua para toda una aldea, dos veces al año.

Así es como se ve ese bloque para un donante en el formulario en vivo.

Mantén el Tamaño de fuente en Mediano (heredar) de nuevo. El encabezado ya destaca, así que hacer que todo el bloque sea Grande también sería demasiado estridente.

3. Añade una nota discreta justo antes del pago

Arrastra un tercer bloque directamente encima de la sección de pago. Etiquétalo como Nota de recibo y reembolso, establece el Tamaño de fuente en Pequeño y deja el Color del texto vacío.

Los recibos llegan por correo electrónico en pocos minutos. Si donas por error, contáctanos dentro de los 14 días y te reembolsaremos el importe total.

4. Guarda y comprueba el formulario en directo

La vista previa del constructor está cerca de la página en vivo pero no es idéntica, porque la tipografía de tu tema se aplica en el frontend. Siempre mira el formulario real antes de dar el trabajo por terminado.

La parte a copiar de este ejemplo es la moderación. Utiliza 3 bloques, un encabezado, un cambio de tamaño y ningún cambio de color, y las palabras hacen el trabajo.

Dónde colocar un bloque de texto en tu formulario de donación

Los donantes leen un Bloque de Texto en el orden en que lo encuentran, por lo que donde lo coloques importa más que cualquiera de las opciones de estilo.

Posición	Bueno para
Encima de las cantidades	Enmarca la elección que el donante está a punto de hacer.
Entre las cantidades y los detalles del donante	Explica lo que compran las cantidades, una vez que son visibles.
Al lado de un campo personalizado inusual	Dice por qué estás pidiendo esa información.
Justo encima de la sección de pago	Tranquiliza a los donantes sobre la seguridad, los recibos y los reembolsos.
Al final del todo	Contiene notas legales que nadie necesita antes de decidir.

Bloques de texto en formularios de varios pasos

Si tu formulario está dividido en pasos, un Bloque de Texto pertenece al paso en el que lo coloques y aparece cuando el donante llega a ese paso. Alguien que se va en el paso 1 nunca ve una nota en el paso 3, así que pon palabras tranquilizadoras en el paso donde los donantes tienden a detenerse.

Títulos de bloques de texto y accesibilidad

La barra de herramientas de Contenido ofrece H2. Los lectores de pantalla y los motores de búsqueda leen los encabezados como un esquema de la página, por lo que un formulario con varios bloques H2 se lee como varias secciones iguales, lo cual suele ser correcto.

Usa el botón H2 en lugar de texto en negrita y grande, porque se ven similares pero se comportan de manera diferente. Y omite el encabezado para una sola frase corta, ya que una línea de prosa es un párrafo.

Consejos a tener en cuenta

Estos hábitos mantienen tus Bloques de Texto útiles para los donantes en lugar de interponerse en su camino.

• Pregunta si el bloque responde a una pregunta. Cada bloque debe responder algo que el donante ya se está preguntando en ese punto del formulario.
• Deja 2 bloques separados. Si 2 bloques están uno al lado del otro sin nada entre ellos, en realidad son un solo bloque con un salto de párrafo.
• Pega como texto sin formato. Formatea con la barra de herramientas después, para que nada de lo que pegues se elimine.
• Usa una clase CSS en muchas campañas. Una clase mantiene el estilo en una hoja de estilos, por lo que no se desvía de un formulario a otro.

Solución de problemas del campo de bloque de texto

El botón de bloque de texto no está en la lista de campos

Comprueba estas 3 cosas, en orden.

1. Estás en la pestaña Formulario, no en la pestaña Diseño o Configuración. Los campos de diseño de la campaña y los campos del formulario de donación son 2 listas separadas, y el Bloque de Texto está en la del formulario de donación.
2. El plugin Charitable Pro está activo. El constructor visual de formularios de donación, y por lo tanto el Bloque de Texto, solo está en la versión de pago de Charitable.
3. Estás en la versión 1.8.19.1 o posterior. Las versiones anteriores no tienen el campo Bloque de Texto.

El bloque de texto no muestra nada al donante

Un Bloque de Texto con una caja de Contenido vacía no tiene nada que mostrar, por lo que no muestra nada. Abre el bloque en la pestaña Opciones de Campo y escribe algo en Contenido.

El título del bloque de texto no parece un título

Usa el botón H2 en la barra de herramientas de Contenido en lugar de poner el texto en negrita y grande. El texto en negrita con un tamaño de fuente Grande parece un encabezado en el editor, pero sigue siendo un párrafo, y tu tema no lo estilizará como un encabezado.

La configuración del tamaño de fuente no parece cambiar nada

El Tamaño de Fuente es relativo al tamaño base del formulario. Si el texto del cuerpo del formulario ya es grande en Opciones del Formulario » Estilo Visual, el paso de Mediano a Grande se ve más pequeño de lo que podrías esperar, así que comprueba primero esa línea base.

Se ha desaparecido parte del formato pegado

El contenido se limpia, por lo que se elimina el formato más allá de lo que produce la barra de herramientas. El texto de un procesador de textos a menudo lleva marcado que no sobrevive, así que pégalo como texto sin formato y formátalo con la barra de herramientas en su lugar.

El bloque de texto se muestra en el editor pero no en la página en directo

Guarda la campaña. La vista previa del constructor muestra cambios no guardados, pero la página en vivo no.

Si se ha guardado y todavía falta, confirma que la campaña utiliza el formulario de donación visual en lugar del formulario heredado. Un formulario visual necesita sus campos obligatorios, y un formulario que carece de ellos recurre al diseño clásico, que no tiene Bloques de Texto.

Quiero que un bloque de texto solo se muestre a algunos donantes

Un Bloque de Texto no puede hacer esto por sí solo. Se muestra a todos los que ven el formulario.

Referencia para desarrolladores del campo de bloque de texto

Ganchos y filtros de bloques de texto

El identificador del tipo de campo es text-block-field y aparece dentro de los nombres de los hooks.

// Filter the rendered output of a Text Block before it reaches the page.
// $html          string  the block's markup
// $campaign_data array   the campaign's builder data
apply_filters( 'charitable_campaign_builder_text-block-field_field_display', $html, $campaign_data );

// Runs at the top and bottom of the block's settings panel in the builder.
// $field_id      int     the field's id within the form
// $campaign_data array   the campaign's builder data
do_action( 'charitable_builder_text-block-field_settings_display_start', $field_id, $campaign_data );
do_action( 'charitable_builder_text-block-field_settings_display_end', $field_id, $campaign_data );

Observa los guiones. Los nombres de los hooks utilizan el identificador del tipo exactamente como está escrito, con guiones y no guiones bajos.

Cómo se sanea el contenido del bloque de texto

El contenido pasa por wp_kses_post() dos veces, una en el navegador mientras escribes y otra en PHP antes de que se almacene o se muestre. Cualquier cosa que wp_kses_post() no permita no sobrevivirá en ninguna de las dos direcciones, así que no planifiques un flujo de trabajo que dependa del almacenamiento de marcado más allá de esa அனுமதிக்கión.

Anula la plantilla del bloque de texto en tu tema

Un Bloque de Texto se renderiza a través de las plantillas del formulario de donación visual. Para cambiar su marcado, anula la plantilla del formulario de donación de la manera habitual de Charitable, copiando la plantilla en tu-tema/charitable/ y editándola allí.

Ejemplo de código para añadir una nota estándar a cada bloque de texto

add_filter(
    'charitable_campaign_builder_text-block-field_field_display',
    function ( $html, $campaign_data ) {
        return $html . '<p class="my-standard-note">Donations are processed securely.</p>';
    },
    10,
    2
);

Ejemplo de código para dar estilo a un bloque de texto con una clase CSS

Establece Clase CSS en el bloque como refund-policy, luego añade esto a tu tema.

.charitable-form .refund-policy {
    font-size: 0.85em;
    color: #6b6b6b;
    border-top: 1px solid #e5e5e5;
    padding-top: 12px;
}

Esta es la ruta más limpia cuando deseas el mismo aspecto en muchas campañas. Estableces la clase una vez por bloque y mantienes el estilo en una hoja de estilos, en lugar de establecer el Tamaño de Fuente y el Color del Texto manualmente en cada formulario.

Ejemplo de código para encontrar todas las campañas que utilizan un bloque de texto

$campaigns = get_posts( array(
    'post_type'      => 'campaign',
    'post_status'    => array( 'publish', 'draft' ),
    'posts_per_page' => -1,
    'fields'         => 'ids',
) );

foreach ( $campaigns as $campaign_id ) {
    $forms  = get_post_meta( $campaign_id, 'donation_forms', true );
    $active = get_post_meta( $campaign_id, 'active_donation_form', true );
    $fields = isset( $forms[ $active ]['fields'] ) ? $forms[ $active ]['fields'] : array();

    foreach ( (array) $fields as $field ) {
        if ( isset( $field['type'] ) && 'text-block-field' === $field['type'] ) {
            // $campaign_id uses a Text Block.
            break;
        }
    }
}

Ten en cuenta que post_status se pasa explícitamente. Una llamada a get_posts() en campañas sin él no coincidirá con lo que esperas.

Conclusión

Ahora sabes cómo añadir un Bloque de Texto a un formulario de donación, escribirlo y estilizarlo, y colocarlo donde los donantes lo leerán. Tus formularios ahora pueden responder a las preguntas de los donantes en el momento en que las hacen.

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

También te Puede Interesar Leer

Estas guías cubren el resto del constructor de formularios de donación visual.

• Constructor Visual de Formularios de Donación. Ve cada campo y configuración que ofrece el constructor de formularios.
• Cómo Usar el Constructor Visual de Formularios de Donación. Crea un formulario de donación visual de principio a fin.
• Cómo Cambiar las Plantillas de Formularios de Donación. Cambia qué plantilla utiliza un formulario de donación.
• Personalizar Formularios de Donación con Fragmentos de Código Usando WPCode. Añade los filtros de esta página sin editar archivos del tema.