Un usuario preguntó 👇
Hola, ¿cómo centralizo todo el formulario en una página? Estoy usando el tema del bebé Twenty Seventeen.
Quiero poner el formulario completo, el texto, los campos y el botón en una página. Busqué tutoriales y en línea, pero no puedo encontrar la respuesta. También busqué en foros de WordPress donde encontré 5 consultas similares, probé todo el CSS sugerido para centralizar el formulario, pero ninguno funcionó para mí. También utilicé Inspeccionar pero no veo dónde estaría la alineación del formulario.
Cualquier ayuda será muy apreciada.
(@jquigam)
hace 3 años
Hola Jane,
Claro, puedo ayudarte con esto. Los estilos de centralización pueden ser un poco sutiles y, en muchos casos, intervienen muchos factores, por lo que normalmente es mejor trabajar sitio por sitio.
Aquí está la SEC que necesitará para centralizar su formulario de contacto:
form#wpforms-form-1647 {
text-align: center;
}
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=date],
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=datetime],
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=datetime-local],
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=email],
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=month],
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=number],
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=password],
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=range],
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=search],
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=tel],
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=text],
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=time],
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=url],
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=week],
div.wpforms-container-full .wpforms-form#wpforms-form-1647 select,
div.wpforms-container-full .wpforms-form#wpforms-form-1647 textarea {
margin-left: auto;
margin-right: auto;
}
Donde ayuda aquí hay un tutorial de WPBeginner sobre cómo agregar CSS personalizado como este a su sitio.
Finalmente, noté que tiene dos clases CSS en el campo Mensajes de este formulario (wpforms-one-half y wpforms-first). Así que asegúrese de eliminar estas clases para que este campo también esté centralizado (aquí hay una imagen de dónde puede encontrar estas clases para eliminarlas: http://cloud.supportally.com/1G1x2X3W0n0l).
¡Espero que esto ayude! Cuando tengas la oportunidad de probar esto, ¿podrías decirme cómo te fue?
¡Gracias! 🙂
Lanzador de hilos
(@ jane-milburn)
hace 3 años
Hola Jess, gracias por tu respuesta. ¡Funciona! Sin embargo, me preguntaba, ya que solo tengo 3 campos, Nombre, Correo electrónico y Mensaje y el botón Enter, ¿podría ser más corto el código?
Además, después de enviar un mensaje, el mensaje de confirmación aparece en un cuadro verde. ¿Se puede cambiar a color o blanco?
(@jquigam)
hace 3 años
Hola Jane,
¡Genial, me alegro de que funcione para ti!
Si desea una versión más corta de ese código, ciertamente puede eliminar las líneas para otros campos; sin embargo, estas líneas adicionales no cambiarán la velocidad de su sitio de ninguna manera y brindarán la mayor flexibilidad si cambia su formulario en el futuro. . Así que depende totalmente de ti 🙂
Para el color de fondo del mensaje de confirmación, este es otro ajuste CSS rápido. Aquí está nuestro tutorial en el que compartimos todos los estilos de formulario predeterminados para que pueda copiarlo y ajustarlo según sea necesario.
Y aquí está la SEC específica que necesitará:
.wpforms-confirmation-container-full {
background: #fff;
border: none;
}
Esto establecerá el color de fondo en blanco (#fff) y eliminará el borde (que también es verde). Puede agregar este fragmento de la misma forma mencionada anteriormente.
¡Espero que eso ayude! 🙂
Lanzador de hilos
(@ jane-milburn)
hace 3 años
Hola Jess, gracias de nuevo por toda la información que funciona. Fuiste muy útil. 🙂
(@jquigam)
hace 3 años
¡De nada, Jane! 🙂
Lanzador de hilos
(@ jane-milburn)
Hace 2 años, 10 meses
Hola de nuevo, he hecho todo el ancho y los campos en mi formulario de contacto y ahora los he extendido haciendo que el formulario parezca extraño. ¿Existe alguna forma de reducir el tamaño de las parcelas?
Lanzador de hilos
(@ jane-milburn)
Hace 2 años, 10 meses
Además, ¿hay alguna manera de traducir bien la forma completa pero un poco?
(@jquigam)
Hace 2 años, 10 meses
Hola Jane,
¡Definitivamente! La forma más sencilla de ajustar el ancho de los campos del formulario es abrir el generador de formularios y hacer clic en un campo dentro del área de vista previa. Esto abrirá el panel Opciones de campo, desde el cual puede abrirlo. Opciones avanzadas. En esta sección, debería ver un menú desplegable llamado Tamaño del campo (esto le permitirá seleccionar Pequeño, Mediano o Grande).
Sin embargo, si todavía estamos discutiendo el formulario de contacto que compartió en su publicación introductoria aquí, necesitará un enfoque ligeramente diferente. Las opciones de tamaño de campo para los campos de Texto del elemento (como el campo Mensaje para el formulario) cambiarán la altura vertical, no el ancho horizontal. Entonces, para cambiar el ancho de todo el formulario, puede usar el siguiente CSS:
#wpforms-1647 {
max-width: 500px;
}
Para empujar el formulario, solo puede agregar márgenes a este palo. Por ejemplo, para centralizar el formulario, puede modificar el fragmento para:
#wpforms-1647 {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
Si desea probar esa opción, puede encontrar más detalles sobre los márgenes CSS en este artículo de W3Schools.
Y compartí esto en una publicación anterior, por si acaso ayudaba. este es un tutorial de WPBeginner sobre cómo agregar CSS personalizado a su sitio.
¡Espero que esto ayude! 🙂 Si desea realizar cambios de estilo adicionales, puede considerar revisar nuestra Guía para principiantes de SEC o mirando hacia adentro Héroe CSS, que le permite aplicar estilos sin tocar ningún código.
Lanzador de hilos
(@ jane-milburn)
Hace 2 años, 10 meses
Muchas gracias, CSS funciona perfectamente y ahora puedo cambiar la altura con tus instrucciones. Genial. Muchas gracias 🙂
(@jquigam)
Hace 2 años, 10 meses
De nada, Jane. ¡Encantado de ayudar! 🙂
¿Solucionó tu problema??
0 / 0