Cómo mostrar su formulario en una sola línea en WordPress (Fácil)

¿Quieres mostrar tu formulario en una sola línea?

Los formularios de una sola línea le brindan más flexibilidad con la ubicación de los formularios. Esto significa que puede agregar fácilmente formularios a áreas de alto tráfico de su sitio y mejorar sus conversiones.

En este artículo, le mostraremos cómo mostrar fácilmente su formulario en una sola línea en WordPress.

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

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

Los formularios de una sola línea le brindan más flexibilidad al elegir dónde colocar sus formularios. Dado que este estilo de formulario es solo una línea, no ocupan mucho espacio y se pueden integrar fácilmente con su contenido existente.

Los formularios de registro de boletines por correo electrónico a menudo se muestran en una sola línea encima o debajo del contenido de la publicación del blog. Los formularios de una sola línea también funcionan bien en las páginas de destino, las páginas de contacto y otras páginas importantes de su sitio web.

Más allá de generar más suscriptores y clientes potenciales, puede convertir cualquier tipo de formulario en un formulario de una sola línea. Por ejemplo, podría tener sentido mostrar su formulario de contacto en una sola línea para ahorrar espacio en la página.

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

Crear su formulario de una sola línea en WordPress

Para este tutorial, usaremos el WPForms complemento para crear un formulario de una sola línea. Es el mejor complemento de generación de leads para WordPress utilizado por más de 5 millones de sitios web.

WPForms

Puede usar el generador de arrastrar y soltar para crear rápidamente cualquier formulario para su sitio. Además, se integra con herramientas populares de marketing por correo electrónico para que pueda hacer crecer fácilmente su lista de correo electrónico.

Hay un versión premium del complemento con muchas más funciones, pero usaremos el version lite para este tutorial, ya que le permite crear un formulario simple y conectarlo a Constant Contact para la generación de prospectos.

Lo primero que debe hacer es instalar y activar el complemento. Para obtener más detalles, consulte nuestra guía para principiantes sobre cómo instalar un complemento de WordPress.

Después de eso, ve a WPForms » Agregar nuevo en su panel de administración de WordPress y asigne un nombre a su formulario. Luego, debe elegir su plantilla de formulario.

Seleccionaremos la plantilla ‘Formulario de suscripción’. Simplemente coloque el cursor sobre la plantilla y haga clic en el botón ‘Usar plantilla’.

Seleccionar plantilla de formulario

Esto abre el generador de formularios de arrastrar y soltar.

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

Generador de formularios de arrastrar y soltar de WPForms

Cada campo se puede editar haciendo clic en ellos y haciendo cambios en la columna de la izquierda.

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

Panel de edición de formularios de WPForms

Una vez que haya terminado de personalizar los campos, puede mostrar su formulario en una sola línea.

Para hacer esto, vaya a Ajustes » General y luego haga clic en la pestaña desplegable ‘Avanzado’.

Ir a la configuración avanzada del formulario

A continuación, escriba ‘campos en línea’ en el cuadro ‘Formar clase CSS’ (sin comillas).

Esto aplicará esa clase CSS al formulario. Dado que WPForms incluye estilos para la clase ‘inline-fields’, hará que todo su formulario se muestre automáticamente en una sola línea.

Agregar clase CSS en línea

Después de eso, puede hacer que su formulario sea aún más pequeño al ocultar las etiquetas de los campos.

Simplemente haga clic en la opción de navegación ‘Campos’, luego seleccione la opción de menú ‘Avanzado’ y haga clic en la opción ‘Ocultar etiqueta’ para activarla.

Alternar Ocultar etiquetas de formulario

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

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

Esto le dice a sus usuarios para qué sirve cada campo de formulario.

Agregar texto de marcador de posición de formulario

Una vez que haya terminado de personalizar su formulario, asegúrese de hacer clic en el botón ‘Guardar’ para guardar los cambios.

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

Agregar su formulario de una sola línea a su sitio web de WordPress

Ahora es el momento de agregar su formulario de una sola línea a su sitio web. Puede agregarlo a cualquier página, publicación o área de widgets.

Vamos a agregarlo a una página existente, pero el proceso será similar si lo agrega a otra área de su blog de WordPress.

Simplemente abra la página donde desea que se muestre el formulario de una sola línea, haga clic en el ícono de agregar bloque ‘Más’ y busque ‘WPForms’.

Agregar bloque WPForms

Luego, haga clic en el bloque ‘WPForms’ para agregarlo a su sitio.

Esto abre un cuadro desplegable para elegir el formulario de una sola línea que creó anteriormente.

Seleccione el formulario de una sola línea del menú desplegable

Una vez que elija su formulario, el complemento cargará una vista previa de su formulario dentro del editor de contenido. Luego, haga clic en el botón ‘Actualizar’ o ‘Publicar’ para activar su nuevo formulario.

Ahora, puede visitar su sitio web para ver su nuevo formulario en acción.

Ejemplo de formulario de una sola línea

Esperamos que este artículo le haya ayudado a aprender cómo mostrar su formulario en una sola línea en WordPress. También puede consultar nuestra guía sobre cómo obtener un dominio de correo electrónico gratuito y nuestras selecciones de expertos de las mejores aplicaciones de números de teléfono comerciales virtuales con opciones gratuitas.

.

Deja un comentario