Cómo mostrar tu formulario en una sola línea en WordPress (forma fácil)

Mostrar un formulario en una sola línea es una excelente manera de ahorrar espacio y darle a tu sitio un aspecto limpio.

Funciona especialmente bien en encabezados, pies de página o barras laterales, lo que te permite colocar formularios en áreas de mucho tráfico y aumentar las conversiones.

En WPBeginner, hemos probado diferentes ubicaciones de formularios de contacto para optimizar nuestro proceso de captura de clientes potenciales. A través de esta experiencia, hemos descubierto que los formularios simples a menudo conducen a tasas de finalización más altas.

En este artículo, te mostraremos cómo mostrar fácilmente tu formulario en una sola línea en WordPress, paso a paso.

¿Por qué mostrar formularios de una sola línea en WordPress?

Los formularios de una sola línea te dan más flexibilidad al elegir dónde colocar tus formularios. Dado que este estilo de formulario es de una sola línea, no ocupan mucho espacio y se pueden integrar fácilmente con tu contenido existente en un blog de WordPress.

Por ejemplo, los formularios de suscripción a boletines por correo electrónico a menudo se muestran en una sola línea encima o debajo del contenido de las publicaciones del blog. Estos tipos de formularios también funcionan bien en páginas de destino, páginas de contacto y otras páginas importantes en tu sitio web.

Más allá de generar más suscriptores y clientes potenciales, puedes convertir cualquier tipo de formulario en un formulario de una sola línea.

Por ejemplo, podría tener sentido mostrar tu formulario de contacto en una sola línea para ahorrar espacio en el sitio web de WordPress y hacer que tu formulario sea más adaptable a dispositivos móviles.

Dicho esto, te mostraremos cómo mostrar un formulario de una sola línea en tu sitio de WordPress.

Cómo crear un formulario de una sola línea en WordPress

Para este tutorial, utilizaremos el plugin WPForms. Tiene un constructor de arrastrar y soltar que te permite crear rápidamente cualquier formulario de WordPress. Además, se integra con herramientas populares de marketing por correo electrónico para que puedas hacer crecer fácilmente tu lista de correos.

En WPBeginner, hemos estado utilizando esta herramienta para crear formularios de contacto y encuestas anuales, y hemos visto excelentes resultados. Para más información, consulta nuestra reseña completa de WPForms.

Primero, necesitas instalar y activar el plugin WPForms. Para más detalles, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress. 

Tras la activación, visita la página WPForms » Añadir nuevo en la barra lateral de administración de tu WordPress y ponle un nombre a tu formulario. Luego, debes elegir tu plantilla de formulario.

Seleccionaremos la plantilla 'Formulario de suscripción'. Simplemente pasa el cursor sobre la plantilla y haz clic en el botón 'Usar plantilla'.

Esto iniciará el creador de formularios de arrastrar y soltar de WPForms en la pantalla.

Verás que la plantilla que elegimos incluye automáticamente los campos de nombre y correo electrónico, y un botón de envío.

Cada campo se puede editar haciendo clic en él y realizando cambios en la columna de la izquierda.

También puedes arrastrar y soltar los campos para cambiar su orden.

Una vez que hayas terminado de personalizar los campos, puedes mostrar tu formulario en una sola línea.

Para hacer esto, cambia a la pestaña Configuración » General en el creador de formularios y luego haz clic en el menú desplegable 'Avanzado'.

A continuación, escribe ‘inline-fields’ en el cuadro ‘Clase CSS del formulario’ (sin comillas).

Esto aplicará esa clase CSS al formulario. Dado que WPForms incluye estilos para la clase ‘inline-fields’, cambiará automáticamente todo el diseño de tu formulario y lo mostrará de forma ordenada en una sola línea.

Después de eso, puedes hacer que tu formulario sea aún más pequeño ocultando las etiquetas de los campos.

Para hacer esto, simplemente haz clic en un campo en el formulario para abrir su configuración en la columna izquierda.

Una vez que hayas hecho eso, selecciona la opción de menú ‘Avanzado’ y haz clic en el interruptor ‘Ocultar etiqueta’ para activarlo.

Luego, necesitas hacer lo mismo para todas las etiquetas de los campos del formulario.

Después de eso, en la misma sección ‘Avanzado’, puedes ingresar texto en el cuadro ‘Marcador de posición’. 

Esto le dice a tus usuarios para qué sirve cada campo del formulario. 

Una vez que hayas terminado de personalizar tu formulario, asegúrate de hacer clic en el botón ‘Guardar’ para almacenar tu configuración. 

Si estás utilizando tu formulario para generar clientes potenciales, entonces puedes conectar tu formulario a tu proveedor de marketing por correo electrónico. Para más detalles, consulta nuestra guía sobre cómo crear un boletín informativo por correo electrónico de la manera correcta. 

Agregando tu formulario de una sola línea a tu sitio web de WordPress

Ahora, es hora de agregar tu formulario de una sola línea a tu sitio de WordPress. Puedes agregarlo a cualquier página, publicación o área de widget.

Vamos a agregarlo a una página existente, pero el proceso será similar si lo estás agregando a otra área de tu blog de WordPress.

Simplemente abre la página donde deseas el formulario de una sola línea y haz clic en el botón ‘Agregar bloque’ (+) para abrir el menú de bloques.

Luego, haz clic en el bloque ‘WPForms’ para agregarlo a tu sitio.

A continuación, elige el formulario de una sola línea que creaste anteriormente del menú desplegable en el propio bloque.

Una vez que elijas tu formulario, el plugin cargará una vista previa de tu formulario dentro del editor de contenido. Luego, haz clic en el botón ‘Actualizar’ o ‘Publicar’ para que tu nuevo formulario esté activo.

Ahora, puedes visitar tu sitio web para ver tu nuevo formulario en acción. 

Extra: Usa OptinMonster para crear pop-ups y banners

Además de crear formularios de una sola línea, también puedes crear formularios de contacto flotantes, pop-ups de suscripción y banners en tu sitio web para capturar leads por correo electrónico.

Para hacer esto, puedes usar OptinMonster, que es la mejor herramienta de optimización de conversión para WordPress en el mercado.

Lo usamos constantemente en WPBeginner para crear pop-ups y banners que promocionan nuestros servicios profesionales y boletín informativo, y nos encanta. Para saber más, consulta nuestra reseña completa de OptinMonster.

La herramienta te permite crear formularios de suscripción atractivos que muestran información personalizada y relevante basada en el interés de tu usuario y facilita enormemente la captura de leads.

Para instrucciones detalladas, puedes consultar nuestro tutorial sobre cómo crear un pop-up de formulario de contacto en WordPress.

Aparte de eso, también puedes crear banners atractivos para tu sitio web, pidiendo a los usuarios que se registren y formen parte de tu boletín informativo.

De esta manera, puedes capturar los detalles del usuario sin ocupar mucho espacio en el sitio web ni molestar a los usuarios.

Para más detalles, consulta nuestra guía para principiantes sobre cómo crear una lista de correo con OptinMonster.

Esperamos que este artículo te haya ayudado a aprender cómo mostrar tu formulario en una sola línea en WordPress. También te puede interesar nuestra guía sobre cómo crear formularios más interactivos o nuestra selección experta de las mejores alternativas a Typeform.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.