Resumen de IA
¿Le gustaría que los campos de su formulario se muestren en una sola línea? Tener su formulario en un diseño de una sola línea puede ayudarle a colocarlo en áreas clave de su sitio (como la sección superior de su página de inicio) para obtener la máxima exposición.
En este tutorial, le mostraremos cómo mostrar su formulario en una sola línea.
Nota: Si prefiere una opción simple de arrastrar y soltar para personalizar el diseño de su formulario, le sugerimos usar el campo de diseño. Sin embargo, la clase inline-fields que se cubre en este tutorial todavía es compatible y se recomienda si desea alinear el botón de envío en la misma línea que los campos de su formulario.
Para nuestro ejemplo, crearemos un formulario con tres campos: Nombre, Teléfono y Correo electrónico.
Para mostrar los campos del formulario en una sola línea, navegue a Ajustes » General en su constructor de formularios y agregue la clase CSS inline-fields al campo Clase CSS del formulario.
Nota: Tenga en cuenta que el uso de la clase inline-fields en WPForms a veces puede entrar en conflicto con los estilos de su tema de WordPress. Como resultado, la apariencia podría no alinearse con sus expectativas.
Luego, para reducir la altura de su formulario, abra la sección Avanzado de cada campo y seleccione la opción Ocultar etiqueta.
A continuación, configuraremos un texto de marcador de posición para guiar a los usuarios. Para nuestro ejemplo, agregaremos Correo electrónico como texto de marcador de posición para nuestro campo de Correo electrónico.
Nota: Si desea cambiar la apariencia del botón de envío para que se ajuste al estilo de su formulario, puede seguir nuestra guía sobre cómo personalizar el botón de envío.
Así es como se verá el formulario en el frontend del sitio:
Nota: Si está buscando otro ejemplo o una plantilla lista para usar para un formulario de una sola línea, consulte nuestra Plantilla de formulario de suscripción de boletín en línea.
¡Eso es todo! Ahora puede crear formularios que se mostrarán en una sola línea.
¿A continuación, le gustaría recibir una copia de la información enviada por sus usuarios a través de sus formularios? Asegúrese de consultar nuestro tutorial sobre cómo configurar notificaciones de formularios para obtener más detalles.