¿Le gustaría centrar sus formularios en sus páginas de WordPress? Aunque los formularios WPForms tienen por defecto el 100% del ancho de su contenedor, puedes centrarlos fácilmente usando CSS personalizado.
Esta guía le mostrará cómo centrar perfectamente sus formularios y sus elementos.
Configuración del formulario
En primer lugar, tendrás que crear tu formulario. Si necesitas ayuda con esto, siempre puedes revisar esta documentación para obtener asistencia.
Una vez que haya creado el formulario y añadido los campos, deberá establecer el tamaño de cada campo en Grande.
Para ello, haga clic en la pestaña Avanzado y seleccione Grande en el desplegable Tamaño de campo.
Añadir la clase CSS
Después de ajustar el tamaño del campo a Grande, tendrás que añadir una clase CSS especial. Para ello, abra el constructor de formularios, y vaya a Ajustes " General. A continuación, desplácese hasta Avanzado y localice la sección Clase CSS de formulario campo. Introduzca wpf-center en este campo.
Añadir el código CSS
Aquí tienes el código CSS básico para centrar tu formulario:
Este código:
- Centra el formulario utilizando
margin: 0 auto - Establece un ancho máximo de 500px. Puedes jugar con esta cantidad hasta que encuentres la que se ajuste a tus necesidades
- Garantiza la capacidad de respuesta en móviles ajustando la anchura en pantallas pequeñas
Centrar todos los elementos del formulario
Si desea centrar todo dentro del formulario (etiquetas, descripciones, botones), utilice esta versión extendida:
Personalizar la anchura
Para ajustar el ancho del formulario, modifique estas dos líneas en el CSS:
max-width: 500px !important;
ancho: 500px !importante;
Sustituir 500px con el ancho deseado. Por ejemplo, para una forma más ancha:
max-width: 800px !important;
ancho: 800px !importante;
Preguntas frecuentes
P: ¿Por qué no me funciona el CSS?
A: En primer lugar, compruebe que ha añadido el wpf-center en el campo Ajustes " General página. Esta es la razón más común para que el CSS no funcione. Si sigue sin funcionar, borra la caché de tu navegador y actualiza la página.
P: ¿Cómo puedo centrar sólo el botón Enviar?
A: Utilice este CSS simplificado y añada la clase wpf-center-button (en lugar de wpf-center) al campo Clase CSS de su 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 envío en tus formularios? Echa un vistazo a nuestro artículo sobre cómo cambiar el color del botón de envío.