Cómo estilizar tus formularios de pago con Estilo del formulario

Resumen

WP Simple Pay incluye una función de Estilo de formulario incorporada que te permite personalizar la apariencia de tus formularios de pago en tu sitio, sin necesidad de CSS personalizado. Elige entre 8 temas preestablecidos o ajusta los colores individuales, la tipografía y la configuración de diseño para que coincidan con tu marca.

La configuración de Estilo de formulario se configura por formulario, por lo que puedes estilizar cada formulario de pago de forma independiente.

Nota: Los estilos de formulario solo se aplican a los formularios de pago en el sitio (tipos de visualización Incrustado y Superpuesto). Si tu formulario utiliza Stripe Checkout (fuera del sitio), esta configuración no tendrá efecto. Para usar estilos de formulario, cambia el tipo de formulario a "Formulario de pago en el sitio" en la pestaña de configuración General.

Prerrequisitos

• WP Simple Pay Pro con una licencia Plus o superior
• Un formulario de pago que utiliza el tipo de formulario en el sitio (Incrustado o Superpuesto)

Acceder a la Pestaña de Estilo del Formulario

1. Navega a WP Simple Pay > Formularios de Pago en tu administrador de WordPress.
2. Haz clic en un formulario existente para editarlo o crea uno nuevo.
3. Haz clic en la pestaña Estilo del Formulario en el editor del formulario.

La pestaña Estilo del Formulario contiene cuatro sub-pestañas: Temas, Colores, Tipografía y Diseño y Distribución.

Elegir un Tema Predeterminado

Los temas predeterminados aplican instantáneamente un conjunto completo y coordinado de estilos a tu formulario. Después de aplicar un tema, puedes personalizar aún más los ajustes individuales en las otras pestañas.

1. En la pestaña Estilo del Formulario, selecciona la sub-pestaña Temas (seleccionada por defecto).
2. Explora los temas disponibles. Cada tarjeta de tema muestra una vista previa de la paleta de colores y una vista previa del mini formulario.
3. Haz clic en una tarjeta de tema para seleccionarla.
4. Haz clic en Publicar o Actualizar para guardar.

Los siguientes temas están disponibles:

Tema	Descripción	Color Principal
Predeterminado	El estilo predeterminado de WP Simple Pay	Verde azulado
Atardecer	Acentos rojos cálidos con fondo claro	Rojo
Bosque	Tema verde fresco con fondo limpio	Verde
Océano	Paleta azul relajante	Azul
Monocromo	Tema simple en blanco y negro	Negro
Luz de sol	Acentos amarillos brillantes y alegres	Amarillo
Coral	Paleta de naranjas cálidos	Naranja
Minimalista	Diseño limpio y minimalista	Gris

Importante: Seleccionar un tema actualiza todos los ajustes de color y estilo a los valores del tema. Cualquier cambio personalizado que haya realizado en ajustes individuales se sobrescribirá.

Personalizar colores

Haga clic en la subpestaña Colores para ajustar la configuración individual de los colores. Los colores están organizados en secciones.

Colores de fondo

• Fondo del formulario: color de fondo de todo el contenedor del formulario.
• Fondo de entrada: color de fondo de los campos de entrada, selectores y menús desplegables.

Colores de texto

• Color de texto general: color predeterminado para todos los elementos de texto del formulario.
• Color de texto de etiqueta: color para las etiquetas de los campos. Anula el color de texto general solo para las etiquetas.
• Color de texto de entrada: color para el texto dentro de los campos de entrada. Anula el color de texto general solo para las entradas.

Colores de título y descripción

• Color del título: color para el título del formulario. Vuelve al color de texto general si no se establece.
• Color de la descripción: color para la descripción del formulario. Vuelve al color de texto general si no se establece.

Colores de acento y borde

• Color principal (acento): se utiliza para estados de enfoque, resaltados y otros elementos de acento.
• Color del borde: color del borde para los campos de entrada y otros elementos con borde.

Colores de estado de error

• Color del borde de error: color del borde que se aplica a los campos con errores de validación.
• Color del texto de error: color del texto para los mensajes de error.

Colores de los botones

• Fondo del botón — Color de fondo del botón de envío.
• Texto del botón — Color del texto del botón de envío.
• Fondo al pasar el ratón por encima del botón — Color de fondo al pasar el ratón por encima del botón de envío.

Todos los campos de color admiten colores hexadecimales (p. ej., #0f8569) y colores rgba con transparencia (p. ej., rgba(15, 133, 105, 0.8)). Haga clic en la muestra de color junto a cualquier campo para abrir el selector de color.

Personalizar tipografía

Haga clic en la subpestaña Tipografía para ajustar los tamaños y pesos de fuente.

Tipografía de etiquetas

• Tamaño de fuente de etiqueta — Tamaño de las etiquetas de campo en píxeles. Predeterminado: 14px.
• Peso de fuente de etiqueta — Peso de las etiquetas de campo. Opciones: Normal, Negrita o valores numéricos (100-900).

Tipografía de entrada

• Tamaño de fuente de entrada — Tamaño del texto dentro de los campos de entrada en píxeles. Predeterminado: 16px.

Tipografía de título y descripción

• Tamaño de fuente del título — Tamaño del título del formulario en píxeles. Predeterminado: 24px.
• Peso de fuente del título — Peso del título del formulario. Opciones: Normal, Negrita o valores numéricos (100-900).
• Tamaño de fuente de la descripción — Tamaño de la descripción del formulario en píxeles. Predeterminado: 16px.
• Peso de fuente de la descripción — Peso de la descripción del formulario. Opciones: Normal, Negrita o valores numéricos (100-900).

Personalizar diseño y maquetación

Haga clic en la subpestaña Diseño y maquetación para ajustar la configuración de espaciado y radio del borde.

Radio del borde

• Radio del borde del formulario — Controla qué tan redondeadas son las esquinas del contenedor del formulario, en píxeles. Establecer en 0 para esquinas cuadradas.
• Radio del borde de entrada y botón — Controla qué tan redondeadas son las esquinas de los campos de entrada y los botones, en píxeles.

Una vista previa en vivo junto a cada configuración muestra el efecto del valor actual.

Espaciado

• Relleno del formulario — Controla el espaciado interno (relleno) del contenedor del formulario, en píxeles.

Restablecer estilos a los valores predeterminados

Para restablecer todos los ajustes de estilo a sus valores predeterminados:

1. En la pestaña Estilo del formulario, desplácese hasta el final de cualquier subpestaña.
2. Haga clic en el botón Restablecer estilos.
3. Confirme el restablecimiento cuando se le solicite.
4. Haga clic en Publicar o Actualizar para guardar el formulario.

Esto restablece todos los ajustes de color, tipografía y diseño. No cambia el tema seleccionado.

Preguntas frecuentes

¿Por qué no veo la pestaña Estilo del formulario?

La pestaña Estilo del formulario requiere una licencia Plus o superior. Si tienes una licencia Personal, verás una indicación para actualizar en su lugar.

¿Por qué hay una advertencia sobre formularios externos?

Los estilos de formulario solo se aplican a los formularios de pago en el sitio. Si tu formulario está configurado para usar Stripe Checkout (fuera del sitio), la configuración de Estilo del formulario no tendrá efecto. Cambia el tipo de formulario a "Formulario de pago en el sitio" en la pestaña General del editor de formularios.

¿Puedo usar estilos diferentes para cada formulario?

Sí. La configuración de Estilo del formulario se guarda por formulario, por lo que cada formulario de pago puede tener su propio estilo único.

¿Los estilos de formulario funcionan con formularios superpuestos (modales)?

Sí. Los estilos de formulario se aplican tanto a los formularios incrustados como a los formularios superpuestos/modales. Para los formularios superpuestos, el color de fondo del formulario controla el fondo del área de contenido modal.

¿Puedo seguir usando CSS personalizado junto con Estilo del formulario?

Sí. El CSS personalizado se aplicará sobre la configuración de Estilo del formulario.

¿Los estilos de formulario afectan la vista previa del bloque Gutenberg?

Sí. Cuando insertas un formulario de pago usando el bloque WP Simple Pay en el editor de bloques, la vista previa del bloque refleja la configuración de estilo actual del formulario.

¿Qué sucede si dejo un campo de color vacío?

Los campos vacíos heredan valores predeterminados sensatos. Por ejemplo, los colores del texto de etiquetas y entradas vuelven al color de texto general. Los colores de los botones vuelven al color primario del tema.

¿Qué Sigue?

• Referencia de configuración de estilo del formulario – Referencia completa de cada configuración y su valor predeterminado
• Tipos de visualización del método de pago – Elige entre diseños de Pestañas y Acordeón