Añadir un formulario de suscripción con el constructor de formularios Elementor Pro (tutorial completo)

Elementor Visual Form Builder es una poderosa herramienta que le ayuda a crear completos y hermosos formularios en línea en cuestión de minutos sin ningún tipo de codificación.

Este artículo muestra un sencillo formulario de suscripción con las tres funciones siguientes:

• Los visitantes pueden introducir información para suscribirse a listas de correo
• La información de los usuarios se sincronizará con MailChimp y otros sistemas de correo de terceros
• El envío correcto lleva a una página para reclamar un regalo, como un libro electrónico, una hoja de trabajo o un libro blanco.

Widget de formulario de arrastrar y soltar

En primer lugar, configure el "Formulario formulario (documento)El widget "Widget" se arrastra a la página. El widget genera un formulario base por defecto, que incluye nombre, correo electrónico, mensaje y un botón de envío.

Contenido > Campos de formulario

En el panel Formularios, la sección Campos del formulario permite establecer el nombre del formulario, por ejemplo, "Formulario de suscripción".

Por defecto se generan tres campos: Nombre completo, Email y Mensaje.

Este formulario no requiere un campo de mensaje, haga clic en la X a la derecha del campo para eliminarlo, dejando sólo el nombre y el correo electrónico. Si necesita añadir campos, haga clic en Añadir elemento. En este ejemplo, sólo quedarán dos campos.

La pestaña "Contenido" del campo

Cada campo puede configurarse individualmente con contenido incluido:

• Tipo: El campo Nombre es de tipo Texto, el campo Buzón es de tipo Correo electrónico, y el campo Buzón sólo acepta formatos con "@" y "." y ".".
• Etiqueta Etiqueta: Se recomienda configurar etiquetas, aunque no se muestren en la página. Las etiquetas aparecerán en los correos electrónicos de notificación que reciba.
• Marcador de posición: Sirve como texto de aviso en el campo, incitando al usuario a rellenar el contenido.
• RequeridoSe recomienda configurar tanto el nombre como el correo electrónico en "Sí".

En la parte inferior de "Campos del formulario", puede establecer si desea mostrar asteriscos para marcar los campos obligatorios y si desea mostrar etiquetas. Cuando ocultes las etiquetas, los asteriscos también se ocultarán.

• Ancho de columnaSi desea que el formulario sea más compacto, puede establecer los campos Nombre y Correo electrónico en 50% para que se muestren uno al lado del otro.

Pestaña avanzada del campo

Por lo general, no es necesario realizar modificaciones. Sin embargo, hay que tener cuidado:

• El ID del campo no puede dejarse en blanco. Si está vacío, rellénelo manualmente. De lo contrario, el formulario puede generar un error.
• El código corto contiene un ID que puede insertarse en el mensaje para llamar al contenido del campo correspondiente. Por defecto, el [todos los campos] Inserte toda la información del campo. Si no desea insertar todo el contenido de los campos, puede llamar manualmente al código abreviado del campo deseado.

Por lo general, basta con dejar la configuración predeterminada para este tipo de formularios de suscripción.

Contenido > Configuración de botones

La mayoría de los formularios básicos sólo tienen un botón, el botón Enviar. Si se trata de un formulario de varios pasos, habrá otros botones de paso.

• Talla: Las fuentes y el espaciado de los botones pueden ajustarse rápidamente.
• AnchuraEl valor común es 20%. El ajuste real viene determinado por el estilo de página.
• texto del botón: El valor por defecto es Enviar, que puede cambiarse a Suscribirse, Empezar, Darse de alta, etc.
• Configuración de los iconosSi desea añadir iconos a la izquierda o a la derecha de los botones, puede seleccionarlos aquí y ajustar el espaciado.

Botón ID Puede utilizarse para llamadas de código personalizadas, generalmente se deja en blanco.

Contenidos > Acciones después de enviar

Esta sección define lo que hace el visitante después de enviar el formulario. Por ejemplo, enviar un correo electrónico, conectarse MailChimp o saltar páginas.

Correo electrónico Notificación por correo electrónico (añadida por defecto)

Las acciones de correo electrónico se añaden por defecto. Normalmente se recomienda mantenerlo. Haga clic en la pestaña Correo electrónico para configurarlo:

• Buzón de entrada
• Correo electrónico
• Qué información de campo se incluye
• Formateo del contenido del correo electrónico, etc.

Acceso a Mailchimp

Siga adelante y añada una acción: Mailchimp.

• Haga clic en el cuadro desplegable en "Acciones después de enviar" y seleccione Mailchimp.
• Aparecerá la pestaña Mailchimp.
• Si no se ha configurado el acceso a Mailchimp, se le pedirá que introduzca API Pulse la tecla para saltar a la pantalla Elementor En la página de configuración, introduzca su clave API.

Una vez configurado, vuelva a la pestaña Mailchimp para seleccionar una lista de Audiencia. Cuando un usuario envíe un formulario, su información se añadirá automáticamente a la lista.

Redirigir salto de página

Añadir otra acción: Redirigir.

• Seleccione Redirigir en "Acciones después de enviar".
• Después de añadir la pestaña Redirect, introduzca la dirección de salto

Esta página suele ser una página de agradecimiento que proporciona instrucciones o enlaces de descarga para que los usuarios recojan los materiales.

Contenidos > Opciones adicionales

Este formulario no tiene varios pasos, por lo que puede omitir los Pasos de configuración e ir directamente a las Opciones adicionales.

• Formulario ID: Si desea identificar este formulario con un código personalizado, puede establecer un ID único, que normalmente no es necesario.
• Mensajes personalizadosCuando está activado, puede establecer un texto de aviso personalizado. Por ejemplo, puede cambiar el mensaje predeterminado a "Lo sentimos, el envío ha fallado, inténtelo de nuevo más tarde".

Estos textos de alerta suelen aparecer cuando el navegador no muestra su propio mensaje de error.

Estilos > Configuración del estilo del formulario

Una vez configurada la función, puede ajustar el estilo en la pestaña "Estilo".

Las siguientes secciones pueden personalizarse:

• Área de formulario (Form)
• Campos de entrada (campos de formulario)
• Botón Enviar
• Mensajes
• Estilo de pasos (si lo hay)

Pruebe sus formularios

Una vez completados los ajustes de estilo, publique o actualice la página. Se recomienda rellenar el formulario una vez por su cuenta para confirmar que se envía correctamente. Esta suscripciónformulario (documento)Incluye funciones de recopilación de información, acceso de terceros y retargeting, y forma parte integrante del sistema de marketing.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres