¿Desea 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 sencilla de arrastrar y soltar para personalizar el diseño de su formulario, le sugerimos que utilice la función Campo de diseño. Sin embargo, el inline-fields cubierto en este tutorial sigue siendo compatible y se recomienda si desea alinear el botón de envío en la misma línea con los campos del formulario.
Para nuestro ejemplo, crearemos un formulario con tres campos: Nombre, Teléfono y Email.
Para mostrar los campos del formulario en una sola línea, vaya a Ajustes " General en su creador de formularios y añada la clase CSS inline-fields a la Clase CSS de formulario campo.
Nota: Tenga en cuenta que el uso del inline-fields en WPForms puede a veces entrar en conflicto con los estilos de su tema de WordPress. Como resultado, la apariencia podría no alinearse con sus expectativas.
A continuación, 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 orientar a los usuarios. En nuestro ejemplo, añadiremos Email como texto de marcador de posición para nuestro campo Email.
Nota: Si desea cambiar el aspecto del botón de envío para adaptarlo al estilo de su formulario, puede seguir nuestra guía sobre la personalización del botón de envío.
Así es como se verá el formulario en el frontend del sitio:
Nota: Si busca otro ejemplo o una plantilla lista para usar para un formulario de una sola línea, consulte nuestra Plantilla de formulario de suscripción a boletines informativos en línea.
Ya está. 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úrate de consultar nuestro tutorial sobre la configuración de notificaciones de formularios para obtener más detalles.