Cómo agregar formularios usando Elementor










  • Tener un buen sistema de formularios es crucial en cualquier sitio web. Los formularios se pueden usar para contacto y cualquier número de cosas. Si está utilizando Elementor y está tratando de encontrar la mejor manera de integrar algunos formularios, este tutorial es para usted.

    Hay un par de maneras diferentes de hacer esto. El proceso depende de si tienes instalada o no la versión gratuita de Elementor o la versión pro de Elementor .

    ¿Por qué agregar formularios a un sitio web?

    Agregar formularios a su sitio web trae consigo una serie de ventajas. Específicamente, brinda a los usuarios del sitio web la capacidad de contactarlo adecuadamente a través de un sistema de formulario. No todo el mundo se siente cómodo mostrando un correo electrónico o un número de teléfono en línea.

    Si este es el caso, entonces una solución de formulario de contacto es perfecta para usted.

    Además, un formulario de contacto no es el único tipo de formulario que los sitios web necesitan para funcionar correctamente. Muchos sitios necesitan formularios de envío o pago. Además, tener la capacidad de crear y mostrar diferentes estilos de formulario en su sitio web le brinda mucha más funcionalidad y alcance cuando se trata de tipos específicos de interacciones.

    No todos saben cómo agregar un formulario en su sitio web de WordPress. Algunas personas pueden estar usando el generador de páginas de Elementor y es posible que no vean la función de formulario correctamente mostrada dentro del generador.

    Este tutorial le mostrará cómo agregar un formulario usando Elementor. Si tiene la versión pro, también puede usar esta técnica, o puede crear un formulario de varias columnas usando el complemento pro.

    Echemos un vistazo a cómo agregar fácilmente formularios en Elementor usando el complemento WP Forms.

    Formularios WP

    Complemento Wp-Forms

    WP Forms  es un generador de formularios de contacto para WordPress que le permitirá crear fácilmente una serie de formularios diferentes utilizando un elegante generador de arrastrar y soltar. Además de los formularios de contacto estándar, también puede crear otros tipos como formularios de comentarios, pagos y suscripción.

    El complemento es totalmente receptivo y compatible con dispositivos móviles, e interactuará perfectamente con el generador de páginas de Elementor. Elegí este complemento para usarlo en la demostración a continuación porque está muy bien optimizado para SEO y respuesta en la página.

    Una vez que haya creado su formulario, se verá perfecto en cualquier tema y en cualquier pantalla.

    El complemento viene repleto de diferentes características. Algunos de los principales incluyen:

    • Constructor de arrastrar y soltar
    • Plantillas preconstruidas
    • Listo para dispositivos móviles
    • Compatible con SEO
    • Optimizado para la velocidad
    • Campos y características
    • Capacidad de encuestas y sondeos
    • membresías
    • Formularios de pago, donación y reserva
    • Fácil de personalizar y ampliar

    Básicamente, este sistema de formularios le brinda todo lo que necesita para crear cualquier tipo de formulario que necesite y agregarlo a su sitio web de Elementor.

    Nota: Algunas de las funciones anteriores solo están disponibles si compra la versión pro de WP Forms. Sin embargo, la demostración a continuación usa la versión gratuita y funciona muy bien.

    Echemos un vistazo a cómo instalar y activar el complemento y prepararlo para su uso.

    Instalar y activar el complemento

    Para comenzar a usar WP Forms e implementarlo en Elementor, primero debe instalar y activar el complemento. Puede hacerlo visitando la página de complementos de su panel de control de administración de WordPress.

    Simplemente busque el nombre del complemento e instálelo desde allí.

    Instalar y activar el complemento de formularios wp

    Una vez que el complemento está instalado y activado, debe crear un formulario para poder colocarlo en una página de Elementor que tenga lista.

    Para crear su primer formulario, haga clic en WPForms > Agregar nuevo. Verá esto en el menú del lado izquierdo de su área de administración.

    Haga clic en wpforms y luego agregue nuevo

    Esto lo llevará a la configuración principal del sistema de formularios donde puede crear un formulario.

    Construir un formulario

    En este punto, se encuentra en la sección de creación de formularios para el complemento. Verá aparecer la página del generador de formularios y desde aquí puede agregar un nombre, elegir un diseño prediseñado o crear el suyo propio. Para este ejemplo, solo estoy usando el formulario de contacto prediseñado.

    Si desea crear el suyo propio, haga clic en el cuadro "Formulario en blanco". Se le presentará un lienzo en blanco para arrastrar y soltar las entradas de su formulario como desee.

    Crea tu formulario

    Una vez que haya creado el formulario a su gusto, continúe y "Guarde". Ahora haga clic fuera de la página del constructor. Ahora verá que su formulario se ha guardado junto con una lista de cualquier otro que haya creado.

    Junto a su formulario habrá un shortcode . Copie el código abreviado. Tomará este código abreviado y lo colocará en cualquier publicación o página de Elementor en la que desee que se muestre el formulario.

    Copie el código abreviado del formulario

    Agregar formulario a Elementor

    Ahora diríjase a sus páginas y haga clic en la página de Elementor que desea editar. Haga clic en "Editar con Elementor" para abrir el generador de páginas de Elementor WordPress.

    Cuando usa Elementor, todavía tiene la opción de no usar el creador de páginas para construir cada página en su sitio web.

    Cuando aparezca la página que seleccionó y esté en el editor de Elementor, busque el "cuadro de elemento de código corto". Arrastra y suelta ese cuadro donde quieras en tu página de Elementor.

    Arrastre y suelte el cuadro Shortcode donde lo desee

    Desde aquí, simplemente pegue el código abreviado del formulario en el cuadro. El formulario puede parecer un poco fuera de lugar o andrajoso en el editor, pero se verá hermoso en la parte frontal de su sitio web.

    Ingrese el código abreviado en el cuadro

    Luego puede hacer clic en la pestaña "Avanzado" y corregir el relleno y los márgenes a su gusto para fines de visualización. Esto le permite rellenar y crear márgenes adecuados para su cuadro de formulario según el tamaño de la pantalla y el dispositivo que alguien usará para acceder a su sitio web.

    Haga clic en la pestaña Avanzado para editar márgenes y relleno

    Nota: El formulario puede parecer condensado y se verá mal diseñado en el editor de back-end. Sin embargo, obtenga una vista previa de su página y verá que se ajusta automáticamente al área en la que la colocó correctamente, como se indicó anteriormente.

    Formulario frontal de Elementor

    Ahora actualice o publique su página y estará listo para comenzar. Verá que el formulario ahora se muestra perfectamente en la página a la que agregó el código abreviado.

    Pensamientos finales

    Agregar formularios en Elementor no es difícil. La funcionalidad del generador de páginas le brinda muchas opciones sobre dónde puede colocarlo y cómo puede hacer que se vea.

    En realidad, hay varios complementos de formulario de WordPress realmente buenos que puede usar para este proceso. Elegí WP Forms por su popularidad y facilidad de uso. El proceso para otros complementos puede ser un poco diferente. Realmente depende de cómo se construya el complemento.

    Dicho esto, lo más probable es que cualquier complemento de formulario que utilice se base en un código abreviado para la población de publicaciones o páginas. Recuerde, puede usar la mayoría de los complementos de formulario incluso cuando usa Elementor, como hicimos anteriormente. Si está ejecutando la versión pro de Elementor, puede crear formularios utilizando el sistema pro y también hacerlos de varias columnas si es necesario.

    Espero que este tutorial le haya mostrado lo fácil que es agregar formularios a su sitio web cuando está utilizando el generador de páginas de Elementor.

    ¿Qué plugin de formulario prefieres? ¿Está utilizando un complemento pago para insertar sus formularios?










  • Subir