Cómo crear formularios de contacto con Elementor (métodos gratuitos y pagados)

Independientemente del tipo de sitio que lidere, necesita un formulario de contacto. Pueden generar clientes potenciales, construir conexiones y relaciones, permitir a los usuarios notificarle sobre los problemas con su sitio y cualquier otra cosa. Crear formularios de contacto en WordPress no tiene que ser complicado. De hecho, con el generador de páginas, ¡es más fácil que nunca! En este artículo, mostraremos cómo crear formularios de contacto con Elementor, veremos las diferentes opciones disponibles y exploraremos todo lo que necesita saber sobre los formularios de contacto de Elementor.
¡Vamos a empezar!
contenido
Cómo crear un formulario de contacto con Elementor
Agregue un formulario de contacto con Elementor Pro
Paso 1: Agregar contacto de elemento de widget en su página
Paso 2: Configurar campos de formulario de contacto
Paso 3: Agregar campos a su formulario de contacto elemental
Paso 4: Establecer a dónde van las referencias de los formularios
Paso 5: Configuración de los mensajes del formulario de contacto elemental
Paso 6: Modele el formulario de contacto elemental
Paso 7: Publicar su formulario de contacto elemental
Cuándo usar el método pagado
Cuando no debes usar Elementor Pro
Agregue el formulario de contacto gratuito al elemento
Top 5 complementos para formularios de contacto amigables con Elementor
Cómo incorporar un formulario de contacto en el elemento
Pensamientos finales
Cómo crear un formulario de contacto con Elementor Hay dos métodos que puede usar para agregar formularios de contacto a su sitio web.
Método pagado: utiliza el widget interno del elemento. Deberá instalar tanto Elementary como Elementor Pro.
Método gratuito: aquí deberá instalar un complemento de terceros e incorporar el formulario en la página o publicación que ha creado con Elementor. Los métodos vample tienen sus propias ventajas y desventajas. En la siguiente sección, exploraremos cada uno de ellos. Agregue un formulario de contacto con Elementor Pro en este método, debe comprar la licencia Elementor Pro. Lo recomendamos porque puede personalizar la apariencia y la sensación del formulario según lo desee y ajustar bien el sitio.
Con este método, no solo tiene acceso a todos los widgets Cool Elementor Pro, sino que también tendrá acceso a la enorme biblioteca de plantillas que viene con ella. Además, con Elementor Pro, ¡puede transformar completamente su sitio web! Aquí le mostramos cómo agregar un formulario de contacto con Elementor Pro. Su página de inicio y página son un excelente lugar para un formulario de contacto si no está seguro de poner el formulario de contacto en su sitio.
Una vez que haya abierto la página en Elementor en el panel del editor, puede usar el widget de formulario de contacto:
En el elemento, este es el widget llamado “forma”. Dibuje el widget de formulario en su página y verá el resultado básico de un formulario de contacto como este:

Paso 2: Configure los campos de formulario de contacto Hay una multitud de configuraciones para el widget de formulario en el elemento y los exploraremos más adelante en el artículo. En primer lugar, centrémonos en los elementos básicos. Elementor lo complete por adelantado el formulario con los campos necesarios que cualquier formulario de contacto debe tener: nombre

Correo electrónico (¡después de todo, lo necesitará para responder!)
Mensaje
Estos son todo lo que necesita para un formulario de contacto básico. Pero, ¿qué pasa si quieres más campos? ¿Quieres saber el presupuesto del cliente? ¿O hace preguntas de precalificación, así que cuando recibe el mensaje, puede reducir rápidamente a los clientes potenciales correctos y a los que no lo son? Vamos a explorarlos en el siguiente paso. Paso 3: Agregue los campos a su formulario de contacto elemental para agregar un campo a su formulario elemental, haga clic en “Agregar artículo”:
Esto creará un nuevo artículo en su formulario de contacto como:
Como puede ver, hay una serie de configuraciones, así que echemos un vistazo:

Tipo: este es el tipo de campo que desea agregar en el formulario. Hay varios tipos diferentes de campos que incluyen:

Texto
Correo electrónico
textea
Url
Meta
Radio
Seleccione
La casilla de tic
Aceptación
Número
Fecha
Tiempo
Archivo cargado
Clave
Html
Oculto
recaptcha
Recaptcha v3
Jarra con miel
¡Pf! ¡Hay muchos tipos de campo! La mayoría se explican por sí mismos, pero ¿puede haber algunos allí que pienses bien, qué son? No te preocupes. Explicaremos todo. Siga la opción “Etiqueta”. La etiqueta es el nombre de la forma del formulario que aparece por encima del formulario de contacto. Muestra a los usuarios qué entrada se espera, ¡así que asegúrese de que sea algo descriptivo! Luego hay una configuración “sostenida”. El sustituto es lo que aparece en el campo de formulario cuando un usuario no ha ingresado datos. Es útil establecer el texto sustituyente como un ejemplo de información que desea ingresar. Por ejemplo, agregar la “dirección de correo electrónico” como sustituto le dice al usuario que está esperando una dirección de correo electrónico en ese campo. La penúltima configuración es “necesaria”. Este es un cambio simple que, cuando se activa, no permitirá que el usuario envíe el formulario sin completar el campo. El último es establecer el ancho de la columna. Establecer el ancho de la columna le permite alinear y apilar los campos según sea necesario.
Por ejemplo, si establece el ancho al 50% y agrega otra área al 50%, los campos se mostrarán uno al lado del otro, dándole libertad en la forma en que diseña el formulario de contacto con Elementor.
Lengüeta avanzada
Siga las opciones de la “pestaña avanzada” de la nueva configuración de campo.
No hay tantas opciones en esta pestaña, pero si algo está más confundido.
Valor predeterminado: este es el valor implícito del campo y es diferente del sustituto. Esta es una configuración opcional utilizada cuando un tipo de valor se establece de forma predeterminada si el usuario no agrega su propio valor. Por ejemplo, un valor o orden mínimo en un formulario.
ID -El ID de campo se utiliza para guardar los datos de campo. Por lo general, no tiene que cambiar esto, pero debe ser único. Bacalao corto: el código corto se puede usar para llevar el campo a cualquier parte de su página, no debe usar esto.

¡Vaya, había muchas opciones! Espero que ahora tengas una buena idea sobre lo que significa todo esto.
Paso 4: Establecer dónde se envían los formularios en el editor de elementos, haga clic en “Correo electrónico” para mostrar las opciones disponibles: hay muchos campos para el correo electrónico. Salga de la caja, todo está prefirido, por lo que si no necesita nada específico, puede superarlo de inmediato y guardar la página. Si desea comprender más sobre las posibilidades de configuración para su formulario de contacto elemental, lea más. Aquí hay todas las opciones y lo que hacen:
A la dirección de correo electrónico a la que se envía el formulario. Se puede enviar a varias direcciones de correo electrónico. Ingrese las direcciones de correo electrónico separadas por comas.
Sujeto: el tema del correo electrónico enviado junto con el envío, que se muestra en el cliente de correo electrónico.
Mensaje: aquí puede establecer qué campos se envían desde su formulario de contacto. Usando los códigos cortos que hemos explorado anteriormente al crear campos, solo puede establecer algunos de ellos para enviar o recibir todos los campos de la referencia.
Desde el correo electrónico: la dirección de correo electrónico de origen que envía el correo electrónico. ¡Asegúrese de haber ingresado la dirección de correo electrónico en la lista blanca para que pueda recibir todas sus referencias!
Del nombre: el nombre de la persona que envía el formulario.
Respuesta a este campo es la dirección de correo electrónico a la que la respuesta va cuando hace clic en “Responde” en el cliente de correo electrónico. Por defecto, esta es la dirección de correo electrónico del administrador del sitio, pero es posible que desee cambiarla. Haga clic en el cuadro desplegable y configúrelo en el “Campo de correo electrónico” .CC-¿Desea a alguien en el CC del correo electrónico? Ingrese su dirección de correo electrónico aquí, envíelos a varias direcciones de correo electrónico (separadas por comas).
BCC – ¿Tienes que enviar a un BCC? Ingrese su dirección de correo electrónico aquí, envíelos a varias direcciones de correo electrónico (separadas por comas).
Luego verá que hay un campo Metabox que contiene metadatos, que puede configurar para enviarse con el formulario.
Por lo general, no tiene que cambiar o editar esto. Finalmente, existe la opción “Enviar como”. La opción de referencia le permite seleccionar si envía la entrada enviada como un texto simple o HTML (predeterminado a HTML). De nuevo, generalmente no tiene que cambiar esto. Una de las características más avanzadas es la capacidad de cambiar los mensajes basados ​​en el formulario. Cambiar mensajes en el formulario permite un proceso de retroalimentación más personalizado para el usuario final, en lugar de sonar como un robot aburrido. Pero, ¿qué mensajes puede personalizar para su formulario de contacto elemental? En primer lugar, debe activar mensajes personalizados. Haga clic en “Opciones adicionales”, luego haga clic en el Switch para ver “Mensaje personalizado” a “Sí. ”
Como puede ver, hay cuatro mensajes diferentes que puede editar, que incluyen: Mensaje exitoso-IT se muestra a un usuario final después de enviar el formulario y completado correctamente (por ejemplo, ¡su correo electrónico se ha enviado correctamente!).
Mensaje de error: muestra el usuario final cuando se ha producido un error desconocido al enviar el formulario.
Mensaje obligatorio: se muestra cuando no se completó un campo de formulario obligatorio al enviar el formulario.
Mensaje no válido: se muestra a un usuario final cuando algo en el formulario de envío es incorrecto y no se puede enviar.
Poco para editar los mensajes, puede divertirse un poco y ser extraño, o si ejecuta un sitio corporativo, puede ser más como un negocio. Lo mejor es que son completamente editables, ¡puedes hacer lo que quieras! A tu sitio, ¿no? Afortunadamente, en el elemento, el estilo personalizado no podría ser más fácil. En el editor, haga clic en la “pestaña de estilo”:

Encontrará una amplia gama de opciones y configuraciones para personalizar su formulario de contacto como sea necesario. Todo, desde el espacio, el relleno y los colores, hasta el tamaño de los campos, etiquetas, entradas, botones y cualquier otra cosa.
Le dejaremos explorar estas opciones usted mismo. No hace falta decir que no podría ser más fácil usarlos. Por ejemplo, si queremos cambiar el color del botón Elementor, haga clic en el menú desplegable “Botón” para mostrar la configuración:
Puede establecer rápidamente el color de fondo del botón, el color del botón, el color del flotador y una variedad completa de opciones y configuraciones.Una vez que esté satisfecho con la forma en que su forma es elegante, es el momento del último paso, publicando el formulario. Exactamente como desee, ¡es hora de publicar su forma en el mundo!No podría ser más fácil.En la parte inferior del editor de elementos, haga clic en el botón Verde “Actualizar” y su página se actualizará con el nuevo formulario de contacto.Felicidades.¡Ha creado y publicado con éxito un formulario de contacto con Elementor!
Sin embargo, este no es el final de la historia. Lo anterior solo funciona si usa Elementor Pro. Cuesta desde $ 49, que, aunque es un negocio para lo que está incluido, no todos tienen $ 49 para gastar en un complemento. Afortunadamente, hay una serie de soluciones alternativas gratuitas para formularios de contacto que puede usar con el elemento. Cuando utiliza el método pagado si crea todo su sitio web en Elementor, una inversión en Elementor Pro emite, ya que puede hacer mucho más que agregar formularios de contacto. Con Elementor Pro instalado, obtiene más de 300 plantillas de diseño, más de 90 widgets y más de 60 kits para sitios web, así como asistencia premium. También tiene un control completo sobre la personalización de su sitio. Puede personalizar cada página, publicación, barra lateral, encabezado, sótano e incluso páginas de productos si está en el comercio electrónico. Con los formularios ElementR Pro, puede integrar sus formularios con muchas herramientas de marketing de correo electrónico populares que le permiten transformar su público en suscriptores. Esta es una característica que solo viene con la versión premium de muchos complementos de contacto. Suena bien, ¿no?
Le recomendamos cálidamente que cree su sitio web por completo con Elementor Pro. Esta es probablemente la mejor de las dos formas de agregar formularios de contacto en su sitio web. En su sitio y no necesita algunas de las funciones premium, puede omitir la compra de Elementor Pro. En las siguientes secciones le mostraremos cómo agregar un formulario de contacto en su sitio con la versión gratuita de Elementor. Agregue el formulario de contacto gratuito al elemento Este método es bastante simple. Todo lo que tiene que hacer es instalar un formulario de contacto de terceros que permita la incorporación con códigos cortos. Elementor es bastante versátil cuando se trata de integración y funciona bien con la mayoría de los complementos de WordPress para formularios de contacto. Antes de continuar y anunciar el proceso exacto, eche un vistazo al mejor formulario de contacto de 4 amigables con Elementor. Los 5 complementos principales para formularios de contacto amigables 1. Hubspot
El complemento de WordPress HubSpot es un complemento de marketing todo en uno gratuito en el que más de 100,000 usuarios confían. Con el complemento, puede agregar fácilmente formularios, ventanas emergentes, chat en vivo, análisis y más en su sitio de WordPress. ¿Y la mejor parte? Todo se sincroniza automáticamente con CRM Hubspot, lo que le brinda una grabación centralizada de la interacción de un contacto con su sitio web. Use HubSpot para agregar nuevos formularios emergentes y ventanas a sus páginas de elementos o sincronizar automáticamente los formularios existentes en un CRM. Precio: libre de Hubspot

2. Formulario de contacto 7

El Formulario de contacto 7 es uno de los formularios de contacto más populares para WordPress. ¡Es completamente gratis y tiene más de 5 millones de instalaciones activas, lo que debería decirle todo lo que necesita saber! Aunque simple desde el punto de vista de la funcionalidad, si todo lo que necesita es una forma de contacto simple, vale la pena verificarlo. Puede usar los códigos cortos construidos para colocar cualquier formulario en sus páginas y publicaciones de manera rápida y fácil. Nuestros propios suplementos definitivos para Elementor tienen un formulario de contacto de Widget de 7 Styler si desea más control sobre el estilo. Precio: gratis

Comience con el Formulario de contacto 7
3. WPFORMS
WPFORMS tiene más de 3 millones de impresionantes instalaciones impresionantes. Es un complemento Freemium donde la versión base es gratuita, pero hay una versión premium disponible. Si bien la versión gratuita ofrece muchas funciones que le gustaría y está bien para crear un formulario de contacto básico, muchas funciones se limitan a la versión Pro. Al igual que el Formulario de contacto 7, puede usar códigos cortos WPFORMS para colocar el formulario de contacto en una página elemental (o cualquier página de otra manera). ¡Y Ultimate Addons For Elementor también tiene un widget de estilo personalizado para WPFORMS! Precio: versión gratuita y versión Pro desde $ 79. Comience con WPFFORM

4. Entrenador
Forminator es un complemento para los formularios de WordPress freemium de WPMU Dev. ¡Son los desarrolladores del popular complemento Smush Plugin, que tiene más de 2 millones de instalaciones activas! Con una interfaz de usuario fácil de usar, FormInator representa una excelente alternativa a los complementos de formulación más conocidos. Y viene con soporte construido para PayPal y Stripe. Al igual que los otros complementos que mencionamos aquí, es fácil agregar el formador a su página. Además, si compra la versión Pro A Forminator, también tendrá acceso al host para 3 sitios web, SmartCrawlPro, Hustle Pro y muchas otras funciones para sitios web ilimitados. Un buen valor bueno a solo $ 5/mes. Precio: hay una versión gratuita y Forminator Pro cuestan desde $ 5/mes, incluido el acceso a otros complementos y alojamiento.
Comience con Forminator

Cómo incorporar un formulario de contacto en el elemento puede usar cualquiera de los formales de contacto enumerados anteriormente con el elemento. Pero para este ejemplo, trabajaremos con formularios WP. Así es como incorpora un formulario de contacto con formularios WP y elemento. Luego acceda a los formularios WP> Agregar nuevo desde el tablero de WordPress. Aquí puede seleccionar un formulario en las plantillas dadas y nombrar el formulario. También puede eliminar los campos que no desea de esta sección.
Después de haber terminado con los cambios, puede hacer clic en “Vista previa” para verificar cómo se ve el formulario. Si está satisfecho con el formulario, haga clic en “Guardar” para guardar sus cambios. En una página o publicación en particular. Aunque puede parecer más fácil, le recomendamos que elija el enlace “Use un código corto” justo debajo de los botones.
Una vez que haga clic en el enlace, generará un código corto. Copie el código corto por el momento. Lo necesitaremos en el siguiente paso. Paso 4: Incorporar el formulario ahora es el momento de comenzar a editar. Abra la página que necesita y seleccione “Editar con Elementor”. En el widget elemental, busque “Shortcode”. Seleccione el widget de código corto y tírelo en el área donde desee el formulario.

Glind el código corto que ha copiado anteriormente para widget. El formulario aparecerá en el lugar donde lo colocó en la página que está satisfecho con los resultados, presione la actualización para guardar la página. Otra forma de agregar la misma forma al elemento es buscar “formularios WP” en busca del widget elemental.
Cuando se usa cualquier complemento compatible elemental, crea automáticamente un widget para él. Hace que la incorporación sea mucho más fácil. Tire del widget WPFFORMS en el lugar requerido y seleccione el formulario deseado.
Esto le dará el mismo resultado que el método de código corto.

Fácil, ¿verdad? Los pensamientos finales que crean un formulario de contacto con el elemento no deben ser complicados o durar horas. Todo debido a Elemental Pro o una gama de complementos libres, crear un formulario de contacto con el elemento es rápido y simple. Continúa y prueba solo. ¿Tiene un complemento favorito para el formulario de contacto? ¿Quizás ya creó sus formularios de contacto en el elemento? Háganos saber en los comentarios a continuación.