Resumen de IA
¿Te gustaría centrar tus formularios en tus páginas de WordPress? Si bien los formularios de WPForms tienen un ancho predeterminado del 100% del contenedor, puedes centrarlos fácilmente usando CSS personalizado.
Esta guía te mostrará cómo centrar perfectamente tus formularios y sus elementos.
Configuración del formulario
Primero, necesitarás crear tu formulario. Si necesitas ayuda con esto, siempre puedes revisar esta documentación para obtener ayuda.
Una vez que hayas creado tu formulario y agregado tus campos, necesitarás establecer cada Tamaño de campo como Grande.
Para hacerlo, haz clic en la pestaña Avanzado y selecciona Grande en el menú desplegable Tamaño de campo.
Añadir la clase CSS
Después de establecer el tamaño del campo en Grande, a continuación, deberás agregar una clase CSS especial. Para hacerlo, abre el constructor de formularios y ve a Ajustes » General. Luego, desplázate hacia abajo hasta la sección Avanzado y localiza el campo Clase CSS del formulario. Introduce wpf-center en este campo.
Agregar el código CSS
Aquí tienes el código CSS básico para centrar tu formulario:
Este código:
- Centra el formulario usando
margin: 0 auto - Establece un ancho máximo de 500px. Puedes jugar con esta cantidad hasta que encuentres la que satisface tus necesidades
- Asegura la capacidad de respuesta móvil ajustando el ancho en pantallas más pequeñas
Centrar todos los elementos del formulario
Si deseas centrar todo dentro del formulario (etiquetas, descripciones, botones), utiliza esta versión extendida:
Personalizar el ancho
Para ajustar el ancho del formulario, modifica estas dos líneas en el CSS:
max-width: 500px !important;
width: 500px !important;
Reemplaza 500px con el ancho deseado. Por ejemplo, para un formulario más ancho:
max-width: 800px !important;
width: 800px !important;
Preguntas frecuentes
P: ¿Por qué no me funciona el CSS?
R: Primero, verifica que has añadido el nombre de la clase wpf-center en la página Ajustes » General de tu formulario. Esta es la razón más común por la que el CSS no funciona. Si aún no funciona, borra la caché de tu navegador y actualiza la página.
P: ¿Cómo centro solo el botón de enviar?
R: Usa este CSS simplificado y añade la clase wpf-center-button (en lugar de wpf-center) al campo Clase CSS de tu formulario:
A continuación, añade este CSS a tu sitio.
.wpforms-container.wpf-center-button .wpforms-submit-container {
text-align: center;
}
Y eso es todo lo que necesitas para centrar tu formulario. A continuación, ¿te gustaría poder cambiar el color del botón de enviar en tus formularios? Echa un vistazo a nuestro artículo sobre cómo cambiar el color del botón de enviar.