Cómo añadir un formulario de suscripción utilizando el constructor de formularios de Elementor Pro

El creador visual de formularios Elementor es una potente herramienta para crear formularios en línea completos y atractivos sin utilizar código.

Arrastrar y soltar widgets de formulario

en primer lugarWidget de formularioArrástrelo a la página. El widget Formulario crea inmediatamente un formulario básico que ya contiene los elementosCampo de nombre, campo de dirección de correo electrónico, área de texto del mensajeresponder cantandoBotón Enviar.

Contenido > Campos de formulario

existePanel de opciones de formularioencampo de formularioEmpieza a nombrar el formulario con una sección como "Formulario de suscripción".

A continuación, vemos los 3 campos que se generan automáticamente al insertar el widget:Nombre completo, e-mailresponder cantandomensajes.

Para un formulario típico de generación de prospectos, el campo de mensaje no es obligatorio, por lo que se puede acceder a él haciendo clic en la opción de campo situada más a la derecha en el campoX lo elimina, dejando sólo los campos de nombre y correo electrónico. Si desea añadir un nuevo campo, pulse el botón"Añadir proyecto"es suficiente, pero para este ejemplo en particular, sólo necesitamos dos campos.

Veamos ahora con más detalle las opciones disponibles para cada campo.

Contenido de la pestaña de campos

tipología: el campo deelementoEn la pestaña, puede seleccionar los campostipología. Por ejemplo, el campo nombre esejemplaresque sólo permite al usuario introducir cualquier texto estándar en un campo de una sola línea. Por otra parte, el campo de correo electrónico es de tipocorreo electrónicoSólo acepta texto con el formato de correo electrónico adecuado, incluyendo @ y puntos.

pestaña (de una ventana) (informática)A continuación.pestaña (de una ventana) (informática)Opciones. Esto no es obligatorio, pero recomendamos proporcionar la etiqueta, incluso si se decide ocultarla para su visualización, ya que este texto se mostrará en el correo electrónico recibido cuando alguien envíe el formulario.

marcador de posiciónA continuación.marcador de posiciónOpciones. Se trata de un texto opcional que ayuda a los visitantes a entender qué colocar en este campo.

campo obligatorioAhora, si desea que el campo sea obligatorio, defina el campocampo obligatorioEl conmutador se pone enSí.si noPor favor, active la casilla "No". En la mayoría de los formularios de suscripción, los campos de nombre y correo electrónico suelen ser obligatorios.sea. En la parte inferior de la sección de campos de formulario, puede optar por mostrar u ocultar el campocampo obligatorio. Si desea que aparezca el típico asterisco rojo junto a la etiqueta del campo, ajústelo aMostrar. Arriba las opciones de marcado obligatorio son mostrar u ocultarpestaña (de una ventana) (informática)como opción. Por supuesto, si se oculta la etiqueta, también se ocultarán las etiquetas necesarias, ya que se adjuntan a la etiqueta.

ancho de columna: En muchos casos, lo ideal es un formulario de suscripción más estrecho, así que en lugar de ocupar demasiado espacio vertical, ponga los campos de nombre y correo electrónico en la misma línea. Para ello, haga clic en el campo de nombre(matem.) géneroSe abrirán las opciones del campo. Configure el campoEl ancho de columna se ha cambiado de 100% a 50%.correo electrónicoLos campos realizan la misma operación. Tras establecer el ancho de columna de ambos campos en 50%, los dos campos deben colocarse uno al lado del otro en una sola línea.

Ficha avanzada de los campos

Ahora echemos un vistazo rápido al campo "alto nivel"ficha". En la mayoría de los casos, no es necesario realizar ajustes aquí.

No obstante, hay que señalar que aquí elIDEl campo nunca debe estar vacío. Si por alguna razón está vacío, introduzca el nombre del ID manualmente. Sin el ID, el formulario no funcionará correctamente. Se observará que el shortcodeabarcarNombre ID. Si desea enviar datos de campos específicos, puede copiar/pegar este código corto en el correo electrónico que se envía. Por defecto, los correos electrónicos utilizan el código corto generado automáticamente[todos los campos]Enviar todos los datos de los campos. Sin embargo, en algunos casos, no es deseable enviar los datos de cada campo en un correo electrónico. En este caso, puede introducir manualmente los códigos abreviados de los campos que desee incluir.

Para los formularios de suscripción normales, estas opciones avanzadas pueden conservarse, suponiendo que se asigne un ID a cada opción.

Contenidos > Botones

Ahora configure las opciones para los botones del formulario. La mayoría de los formularios sencillos (como éste) sólo tienen un botón: el botónpresentar (un informe, etc.)Botones. Sin embargo, si desea crear un formulario de varios pasos, cada paso debe tener también un botón. 

En primer lugar, seleccione el botón de envío del formulariomagnitud. Esta opción proporciona algunos "predisponer" Estilo, que establece principalmente el tamaño de la fuente y el relleno del botón. Estos se pueden ajustar más tarde en la pestaña Estilos del widget, pero para una configuración rápida, este es el lugar para hacer sus selecciones.

A continuación, configure el botónamplitud. Para formularios pequeños, la opción 20% suele ser una buena elección, pero es bueno utilizar el ancho que mejor se adapte a su estilo particular.

Dado que este formulario no es un formulario multipaso, podemos omitir la opción del botón multipaso. En elpresentar (un informe, etc.)para introducir el texto del botón. Por defecto es Enviar, pero otras opciones comunes pueden ser Suscribirse, Iniciar, Registrarse, etc.

A continuación, si lo desea, elija unicono (informática)Se muestra en el botón "presentar (un informe, etc.)" junto al texto. Si elige mostrar el icono, aparecen dos nuevas opciones.Icono UbicaciónPermite la opción de colocar el icono en la zona "presentar (un informe, etc.)" Antes o después del texto.Espaciado entre iconosPermite ajustar el espacio entre el icono y el texto "Enviar".

En algunos casos, si desea añadir un únicoBotón IDpara ser utilizado en código personalizado cuando sea necesario. Normalmente, este elemento se deja en blanco, y en el caso de esta demo, se deja en blanco.

Contenido > Funcionamiento tras la presentación

Esta sección permite añadir acciones que se realizarán después de que un visitante envíe un formulario. La principal acción por defecto es enviar a alguien un correo electrónico con los datos del formulario. Otras acciones típicas pueden ser redirigir al usuario a una página específica o conectar con una plataforma de marketing de terceros (por ejemplo, Mailchimp). En este ejemplo, realizaremos cada una de estas acciones.

Acción por correo electrónico

Como se ha mencionado anteriormente, se ha añadido por defecto para que podamosOperaciones de correo electrónico. Esto se puede hacer en el"Añadir operación"para verlo. Si no desea enviar por correo electrónico los datos de envío del formulario a nadie, puede hacerlo pulsando junto a Correo electrónico en el campoXpara eliminar esta acción. Por supuesto, normalmente queremos enviar los datos por correo electrónico, así que deje esta acción en su lugar. Ahora note que hay una pestaña de Email bajo la pestaña de Acciones Después de Enviar. Cada acción añadida creará su propia pestaña de opciones bajo esta pestaña. 

La pestaña Correo electrónico tiene varias opciones.

Acciones de MailChimp

Una vez que te hayas asegurado de que estos ajustes están en orden, es hora de añadir otra acción. Esta vez, abre la ventana"Operaciones posteriores a la presentación"y, a continuación, haz clic en el campo situado junto a Correo electrónico para abrir las opciones desplegables. En este ejemplo, selecciona Mailchimp, lo que añadirá un nuevo campo en la pestaña Email llamadoMailChimppara abrir una nueva pestaña. Haga clic en la pestaña para abrirla.

Este mensaje se recibe suponiendo que no se ha configurado la integración con MailChimp:

Establece tu clave API de MailChimp en los ajustes de integración. También puedes establecer una clave API de MailChimp diferente seleccionando Personalizada.

Basta con hacer clic en el botón"Ajustes de integración"El enlace abre una nueva pestaña del navegador en la que puedes introducir tu clave API de MailChimp. 

Una vez establecida la clave allí, será posible seleccionar una en la lista desplegable de la pestaña MailChimp del formularioaudienciaListas. Al hacerlo, el nombre y la dirección de correo electrónico del usuario se añadirán automáticamente a su lista de MailChimp cuando el usuario envíe el formulario.

operación de redirección

Por último, añadamos un último "Operaciones posteriores a la presentación" Abrir" Operaciones posteriores a la presentación"haga clic en el campo y selecciónelo en la lista desplegable."Redirección". Esto añadirá una nueva pestaña "Redirección" debajo.

hacer clic (con un ratón u otro dispositivo señalador)"redirige"para activar sus opciones y, a continuación, introduzca la página a la que desea redirigir al usuario una vez enviado el formulario como la opciónURL. Puede ser cualquier página creada previamente para este fin. En este ejemplo, se trataría de una página en la que se agradeciera al usuario su inscripción y se le proporcionara el obsequio ofrecido o información sobre cómo descargarlo.

Contenidos > Opciones adicionales

Como no se trata de un formulario de varios pasos, puede omitirse directamente"Step Setup"y abra la pestaña"Otras opciones"Tab.Formulario IDes opcional, pero si necesita utilizar el ID de algún código personalizado para localizar este formulario, puede introducir un ID único aquí; de lo contrario, déjelo en blanco.

Coloque un mensaje personalizado en elajustado aseaPara poder introducir la redacción específica necesaria para cada mensaje que se envíe al usuario. Si desea cambiar "Se ha producido un error" por "Lo sentimos, pero se ha producido un error".
tome nota deLos mensajes personalizados son mensajes de reserva para cuando el navegador no muestra sus propios errores. Muchas veces, el usuario nunca verá estos mensajes específicos.

peinado

Ahora que el formulario funciona correctamente, puedes añadirle algunos estilos. Haz clic en el widget"tipo"Tab.

Se puede aplicar estilo a cada sección del formulario, incluida la secciónformulario (documento)sí mismo,campo de formularioypresentar (un informe, etc.)responder cantandoBotones multipasoymensajesresponder cantandomover(si se utiliza).

¡Pon a prueba tu forma!

Una vez que hayas configurado el estilo del formulario a tu gusto, ya has terminado. Publica o actualiza la página y rellena el formulario para asegurarte de que funciona como esperas.

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