Cómo crear un formulario de contacto de Elementor gratis - Guía completa

No importa el tipo de sitio que tenga, necesita un formulario de contacto.

Pueden generar clientes potenciales, establecer contactos y relaciones, permitir que los usuarios le notifiquen problemas con su sitio y todo lo demás.

Crear formularios de contacto en WordPress no tiene por qué ser complicado. De hecho, con el Elementor es más fácil que nunca.

En este artículo, mostraremos cómo crear formularios de contacto con Elementor, veremos las distintas opciones disponibles y exploraremos todo lo que hay que saber sobre los formularios de contacto en Elementor.

Empecemos.

Cómo crear un formulario de contacto con Elementor

Hay dos métodos que puede utilizar para añadir formularios de contacto a su sitio web.

1. El método de pago: Esto utiliza el widget interno de Elementor. Necesitarás Elementor y Elementor Pro instalados.
2. El método libre: Aquí tendrás que instalar un plugin de terceros e incrustar el formulario en la página o entrada que hayas creado con Elementor.

Ambos métodos tienen sus pros y sus contras. En la siguiente sección, vamos a explorar cada uno de ellos.

Añadir formulario de contacto con Elementor Pro

En este método, debe adquirir el Elementor Pro licencia. Lo recomendamos totalmente porque puedes personalizar el aspecto del formulario como quieras y se adapta bien al sitio web.

Con este método, no sólo tendrás acceso a todos los widgets de Elementor Pro, sino que también podrás acceder al enorme biblioteca de plantillas que conlleva.

Además, con Elementor Pro, puedes transformar completamente tu sitio web.

A continuación te explicamos cómo añadir un formulario de contacto con Elementor Pro en 7 sencillos pasos.

• Paso 1: Añadir el widget de contacto de Elementor a su página
• Paso 2: Configurar los campos del formulario de contacto
• Paso 3: Añadir campos al formulario de contacto de Elementor
• Paso 4: Establecer el destino de los envíos de formularios
• Paso 5: Configuración de Elementor Contact Form Messaging
• Paso 6: Estilizar su formulario de contacto Elementor
• Paso 7: Publicar su formulario de contacto de Elementor

Paso 1: Añadir el widget de contacto de Elementor a su página

En primer lugar, abra la página en la que desea utilizar el formulario de contacto de Elementor.

Si no está seguro de dónde colocar el formulario de contacto en su sitio web, su página de inicio y su página "Acerca de" son un lugar excelente para colocar un formulario de contacto.

Una vez que haya abierto su página en Elementor en el panel del editor, puede utilizar el widget de formulario de contacto :

En Elementor, este es el widget llamado "Formulario".

Arrastra el widget de formulario a tu página y verás la salida básica de un formulario de contacto como este:

Paso 2: Configurar los campos del formulario de contacto

Hay una gran cantidad de ajustes para el widget de formulario en Elementor, y vamos a explorar cada uno de ellos en profundidad más adelante en el artículo.

En primer lugar, centrémonos en lo básico.

Elementor rellena previamente tu formulario con los campos necesarios que debe tener cualquier formulario de contacto:

• Nombre
• Correo electrónico (al fin y al cabo, lo necesitará para responder)
• Mensaje

Esto es todo lo que necesitas para un formulario de contacto básico. Pero, ¿y si quieres más campos?

¿Quiere saber el presupuesto del cliente? ¿O hacer preguntas de precalificación, de modo que cuando reciba el mensaje pueda reducir rápidamente los clientes potenciales adecuados y los que no lo son?

Vamos a explorarlos en el siguiente paso.

Paso 3: Añadir campos al formulario de contacto de Elementor

Para añadir un campo a su formulario Elementor, haga clic en "Añadir artículo":

Esto creará un nuevo elemento en su formulario de contacto de la siguiente manera:

Como puedes ver, hay una serie de ajustes, así que vamos a echarles un vistazo:

• Tipo - este es el tipo de campo que desea añadir al formulario. Hay varios tipos de campo diferentes, incluyendo:
  • Texto
  • Correo electrónico
  • Área de texto
  • URL
  • Tel
  • Radio
  • Seleccione
  • Casilla de verificación
  • Aceptación
  • Número
  • Fecha
  • Tiempo
  • Carga de archivos
  • Contraseña
  • HTML
  • Oculto
  • reCAPTCHA
  • reCAPTCHA V3
  • Honeypot

¡Uf! Son muchos tipos de campo.

La mayoría se explican por sí solas, pero puede que haya algunas en las que esté pensando, bueno, ¿qué son?

No te preocupes. Te lo explicaremos todo 🙂 .

Lo siguiente es la opción "Etiqueta". La etiqueta es el nombre del campo del formulario que se muestra encima del formulario de contacto. Muestra a los usuarios lo que se espera que introduzcan, ¡así que asegúrate de que sea algo descriptivo!

Luego está el ajuste "Marcador de posición". El marcador de posición es lo que aparece en el campo del formulario cuando el usuario no ha introducido ningún dato. Es útil establecer el texto del marcador de posición como ejemplo de la información que quieres que introduzcan.

Por ejemplo, añadir "dirección de correo electrónico" como marcador de posición indica al usuario que espera una dirección de correo electrónico en ese campo.

El penúltimo ajuste es "Obligatorio". Se trata de un simple interruptor que, cuando está activado, no permite al usuario enviar el formulario sin rellenar el campo.

Por último está el ajuste Ancho de columna. La anchura de columna permite alinear y apilar los campos según sea necesario.

Por ejemplo, si configuras el ancho a 50% y añades otra área a 50%, los campos se mostrarán uno al lado del otro, lo que te da libertad a la hora de diseñar tu formulario de contacto con Elementor.

• Ficha Avanzado

A continuación están las opciones dentro de la parte "Pestaña avanzada" de la configuración del nuevo campo.

En esta pestaña no hay tantas opciones, pero en todo caso son más confusas.

• Valor por defecto - Este es el valor por defecto del campo y es diferente del marcador de posición. Se trata de un ajuste opcional que se utiliza cuando se establece algún tipo de valor por defecto si el usuario no añade el suyo propio. Por ejemplo, un valor mínimo u orden en un formulario.
• ID - El ID de campo se utiliza para guardar los datos de ese campo. Normalmente no es necesario modificarlo, pero debe ser único.
• Código corto - El shortcode se puede utilizar para recuperar el campo en cualquier lugar de su página. Por lo general, no es necesario utilizarlo.

Vaya, ¡son muchas opciones! Espero que ahora tengas una buena idea de lo que significan.

Paso 4: Establecer el destino de los envíos de formularios

En el editor de Elementor, haga clic en "Correo electrónico" para mostrar las opciones disponibles:

Hay muchos campos para el correo electrónico. De entrada, todo está pre-rellenado, así que si no necesitas nada específico, puedes pasar de largo y guardar tu página.

Si quieres entender mejor las posibilidades de la configuración de tu formulario de contacto de Elementor, sigue leyendo 🙂 .

Aquí están todas las opciones y lo que hacen:

• A - Dirección de correo electrónico a la que se envía el formulario. Puede enviarse a varias direcciones de correo electrónico. Introduzca las direcciones de correo electrónico separadas por comas.
• Asunto - El asunto del correo electrónico enviado con el envío, que se muestra en su cliente de correo electrónico.
• Mensaje - Aquí puedes configurar qué campos se envían desde tu formulario de contacto. Usando los shortcodes que hemos explorado antes al crear campos, puedes establecer que solo algunos de ellos se envíen o que se reciban todos los campos del envío.
• Del correo electrónico - La dirección de correo electrónico de origen que envía el correo electrónico. Asegúrese de que Lista blanca de direcciones de correo electrónico para que reciba todos sus envíos.
• De Nombre - El nombre de la persona que envía el formulario.
• Responder a - Este campo es la dirección de correo electrónico a la que se enviará la respuesta cuando haga clic en "Responder" en su cliente de correo electrónico. Por defecto, este es el correo electrónico del administrador del sitio web, pero es posible que desee cambiar esto. Haz clic en el cuadro desplegable y configúralo como "Campo de correo electrónico".
• CC - ¿Quieres incluir a alguien en la CC del correo electrónico? Introduzca su dirección de correo electrónico aquí, enviar a múltiples direcciones de correo electrónico (separados por comas).
• BCC - ¿Necesita enviar a un CCO? Introduzca aquí su dirección de correo electrónico y envíelo a varias direcciones (separadas por comas).

A continuación, verás que hay un campo meta box que contiene metadatos, que puedes configurar para que se envíen con el envío del formulario.

Normalmente no es necesario modificar o editar esto.

Por último, está la opción "Enviar como". La opción de envío le permite seleccionar si desea enviar la entrada enviada como texto plano o HTML (por defecto es HTML). De nuevo, no suele ser necesario cambiar esta opción.

Paso 5: Configuración de Elementor Contact Form Messaging

El editor de formularios de Elementor es más potente de lo que parece en un principio. Una de las funciones más avanzadas es la posibilidad de modificar la mensajería por formulario.

Modificar los mensajes de los formularios permite que el proceso de respuesta al usuario final sea más personalizado, en lugar de parecer un robot aburrido.

Pero, ¿qué mensajes puedes personalizar para tu formulario de contacto de Elementor?

En primer lugar, debe activar la mensajería personalizada.

Pulse "Opciones adicionales" y, a continuación, haga clic en el conmutador para "Mensajes personalizados" a "Sí."

Como puedes ver, hay cuatro mensajes diferentes que puedes editar, incluyendo:

• Mensaje de éxito - Se muestra al usuario final una vez que ha enviado el formulario y lo ha rellenado correctamente (p. ej. ¡Su correo electrónico se ha enviado correctamente!).
• Mensaje de error - Se muestra al usuario final cuando se ha producido un error desconocido al enviar el formulario.
• Mensaje obligatorio - Aparece cuando no se ha rellenado un campo obligatorio del formulario al enviarlo.
• Mensaje no válido - Se muestra al usuario final cuando algo en el envío del formulario es incorrecto y no se puede enviar.

Al poder editar los mensajes, puedes divertirte un poco y ser extravagante, o si diriges un sitio corporativo, puedes ser más empresarial.

Lo mejor es que, como son totalmente editables, ¡puedes hacer lo que quieras!

Paso 6: Estilizar su formulario de contacto Elementor

No querrás que tu formulario de contacto tenga un aspecto soso o que no coincida con la marca de tu sitio web, ¿verdad? Por suerte en Elementor, personalizar el estilo no podría ser más fácil.

En el editor, haga clic en "Ficha Estilo":

Encontrarás una amplia gama de opciones y configuraciones para personalizar tu formulario de contacto tal y como lo necesitas. Todo, desde el espaciado, el relleno y los colores, hasta el tamaño de los campos, etiquetas, entradas, botones y todo lo demás.

Te dejamos que explores estas opciones por ti mismo. Ni que decir tiene que no podría ser más fácil utilizarlas.

Por ejemplo, si queremos cambiar el color del botón de Elementor hacemos clic en el botón "Botón" para mostrar los ajustes:

Puede establecer rápidamente el color de fondo del botón, el color del texto del botón, el color de hover, y todo un surtido de opciones y ajustes.

Una vez que estés satisfecho con el estilo de tu formulario, es hora del último paso: publicarlo.

Paso 7: Publicar su formulario de contacto de Elementor

Ahora que todo está configurado con tu formulario de contacto tal y como lo quieres, ¡es hora de publicar tu formulario al mundo!

No puede ser más fácil.

En la parte inferior del editor de Elementor, haz clic en el icono verde "Actualización" y su página se actualizará con su nuevo formulario de contacto.

Enhorabuena. Has creado y publicado correctamente un formulario de contacto con Elementor.

Pero ahí no acaba la historia.

Lo anterior sólo funciona si está utilizando Elementor Pro. Cuesta a partir de $49, lo cual, aunque es una ganga por lo que incluye, no todo el mundo tiene $49 para gastar en un plugin.

Afortunadamente, existe una serie de soluciones de formulario de contacto alternativas y gratuitas que puede utilizar junto con Elementor.

Cuándo utilizar el método de pago

Con Elementor Pro instalado, obtienes más de 300 plantillas de diseño, más de 90 widgets y más de 60 kits de sitios web, así como soporte premium.

También obtendrá un control completo sobre la personalización de su sitio web. Puedes personalizar cada página, post, barra lateral, cabecera, pie de página e incluso páginas de producto si estás en eCommerce.

Con los formularios de Elementor Pro, puedes integrar tus formularios con muchos herramientas populares de email marketing que te permiten convertir directamente a tu audiencia en suscriptores. Esta es una característica que sólo viene con la versión premium de muchos plugins de contacto.

Suena bien, ¿verdad?

Recomendamos encarecidamente construir su sitio web completamente con Elementor Pro. Este es quizás el mejor de los dos métodos para añadir formularios de contacto a su sitio web.

¿Cuándo no debe usar Elementor Pro?

Si todo lo que necesitas es un simple formulario de contacto en tu sitio web y no necesitas algunas de las características premium, puedes omitir la compra de Elementor Pro.

En las próximas secciones le mostraremos cómo añadir un formulario de contacto a su sitio web con la versión gratuita de Elementor.

Añadir formulario de contacto gratis en Elementor

Este método es bastante sencillo. Todo lo que necesitas hacer es instalar un plugin de formulario de contacto de terceros que permita la incrustación con shortcodes.

Elementor es bastante versátil en cuanto a integraciones y funciona bien con la mayoría de plugins de WordPress para formularios de contacto.

Antes de seguir adelante y hacerle saber sobre el proceso exacto, echa un vistazo a los 4 mejores Elementor friendly contact form plugins.

Los 5 mejores plugins de formularios de contacto compatibles con Elementor

1. HubSpot

Plugin de HubSpot para WordPress es un plugin de marketing todo en uno gratuito en el que confían más de 100.000 usuarios. Con el plugin, usted puede agregar fácilmente formularios, popups, chat en directoanalíticas y mucho más a su sitio de WordPress.

¿Y lo mejor? Todo se sincroniza automáticamente con el CRM de HubSpot, lo que te proporciona un registro centralizado de la interacción de un contacto con tu sitio web.

Utiliza HubSpot para añadir nuevos formularios y ventanas emergentes a tus páginas de Elementor o sincroniza automáticamente tus formularios existentes en un CRM.

Precio: Gratis

2. WPForms

WPForms cuenta con más de 3 millones de instalaciones activas.

Es un plugin freemium donde la versión base es gratuita, pero hay una versión premium disponible. Mientras que la versión gratuita ofrece muchas características que usted querría y está bien para crear un formulario de contacto básico, muchas características están restringidas a la versión Pro.

Al igual que con Contact Form 7, puedes utilizar los shortcodes de WPForms para colocar tu formulario de contacto en una página de Elementor (o en cualquier otra página).

Y Ultimate Addons para Elementor también tiene un widget de estilo personalizado para WPForms ¡también!

Precio: Versión gratuita y versión Pro de $79.

3. Formulario de contacto 7

Contact Form 7 es uno de los plugins de formulario de contacto más populares para WordPress. Es completamente gratuita y cuenta con más de 5 millones de instalaciones activas, ¡lo que debería decirte todo lo que necesitas saber!

Aunque es sencillo en términos de funcionalidad, si todo lo que necesitas es un simple formulario de contacto, merece la pena echarle un vistazo.

Puedes utilizar los shortcodes incorporados para colocar cualquier formulario en tus páginas y entradas de forma rápida y sencilla.

Nuestro propio Ultimate Addons for Elementor tiene un widget Styler para Contact Form 7 si desea un mayor control sobre el estilo.

Precio: Gratis

4. Formador

Formador es un plugin freemium para formularios de WordPress de WPMU DEV. Son los desarrolladores del popular plugin Smush, ¡que tiene más de 2 millones de instalaciones activas!

Con una interfaz de usuario fácil de usar, Forminator es una gran alternativa a otros plugins de formularios más conocidos. Además, es compatible con PayPal y Stripe.

Al igual que los otros plugins que mencionamos aquí, es muy fácil añadir Forminator a su página Elementor.

Además, si adquiere la versión Pro de Forminator, también tendrá acceso a alojamiento para 3 sitios web, SmartCrawlPro, Hustle Pro, ¡y un montón de funciones más para un número ilimitado de sitios web! Un precio increíble por sólo $5/mes.

Precio: Existe una versión gratuita y Forminator Pro cuesta a partir de $5/mes, incluyendo acceso a otros plugins y hosting.

Cómo incrustar un formulario de contacto en Elementor

Puede utilizar cualquiera de los plugins de formulario de contacto enumerados anteriormente con Elementor. Pero para este ejemplo de formulario de contacto, trabajaremos con Formularios WP.

He aquí cómo incrustar un formulario de contacto con WP Forms y Elementor.

Paso 1: Crear un formulario de contacto

Instale Formularios WP utilizando el método habitual. A continuación, vaya a Formularios WP > Añadir nuevo desde el panel de control de WordPress.

Aquí puede seleccionar un formulario de las plantillas dadas y nombrar su formulario.

Paso 2: Personalizar el formulario

Ahora puede editar y añadir campos obligatorios en su formulario de contacto. También puede eliminar los campos que no desee en esta sección.

Una vez que haya terminado con las ediciones, puede hacer clic en Vista previa para comprobar el aspecto del formulario.

Si está satisfecho con el formulario, haga clic en Guardar para guardar los cambios.

Paso 3: Crear el Shortcode

Una vez que hagas clic en incrustar, WP Forms te preguntará si debe añadir el formulario por ti en una determinada página o post. Aunque pueda parecer la opción más fácil, te recomendamos que elijas el enlace 'usar un shortcode' justo debajo de los botones.

Una vez que haga clic en el enlace, se generará un código corto. Sólo tienes que copiar el código corto por ahora. Lo necesitaremos en el siguiente paso.

Paso 4: Incrustar el formulario

Ahora es el momento de empezar a editar.

Abra la página que necesite y seleccione Editar con Elementor'.

En el widget de Elementor, busque shortcode.

Selecciona el widget Shortcode y arrástralo a la zona donde quieras el formulario.

Pega el shortcode que has copiado antes en el widget. El formulario aparecerá en el lugar de la página donde lo hayas colocado.

Si está satisfecho con los resultados, pulse Actualización para guardar la página.

Otra forma de añadir el mismo formulario en Elementor es buscando 'Formularios WP en la búsqueda de widgets de Elementor.

Cuando usas cualquier plugin compatible con Elementor, éste crea automáticamente un widget para él. Esto hace que la incrustación sea mucho más fácil.

Arrastre el widget WPForms al lugar necesario y seleccione el formulario que desee.

Esto le dará el mismo resultado que el método shortcode.

Fácil, ¿verdad?

Además, puede utilizar Complementos de Elementor para diseñar la forma general. Por ejemplo, con Ultimate Addons for Elementorpuede dar estilo a WPForms.

Reflexiones finales

Crear un formulario de contacto con Elementor no tiene por qué ser complicado ni llevar horas. Todo gracias a Elementor Pro o una serie de plugins gratuitos, crear un formulario de contacto con Elementor es rápido y sencillo.

Pruébelo usted mismo.

¿Tienes un plugin de formularios de contacto preferido? ¿Quizás ya has creado tus formularios de contacto en Elementor?

Háganoslo saber en los comentarios.