La guía definitiva para crear un formulario de contacto de Elementor

¿Está buscando soluciones fáciles para construir relaciones a largo plazo con su audiencia? En caso afirmativo, debe agregar un formulario de contacto a su sitio web.

Aunque WordPress ha hecho que todo el proceso sea sencillo para sus usuarios. Los usuarios de Elementor, por su parte, dan un paso adelante en este sector. Con el widget Formulario de contacto de Elementor, puede incluir y personalizar cualquier tipo de formulario de contacto en su sitio web en poco tiempo. Incluye todos los campos y funciones necesarios para que los visitantes puedan interactuar fácilmente con su sitio web.

Hoy le mostraremos cómo crear un formulario en unos pocos pasos utilizando el widget Formulario de contacto de Elementor.

Entonces, ¡saltemos juntos!

Cómo crear un formulario de contacto con Elementor (7 sencillos pasos)

Antes de comenzar, debemos mencionar que es una función Pro de Elementor. Por lo tanto, funcionará si está utilizando Elementor Pro y cuesta alrededor de 49 $.

Mientras tanto, si es nuevo en Elementor, consulte esta guía para principiantes para que su viaje sea más fluido.

Paso 1: agregue el widget de formulario de contacto de Elementor a su página deseada

En primer lugar, busque el widget de formulario en el océano de Widgets de Elementor. Ahora abra la página donde necesita un formulario de contacto para comunicarse con sus suscriptores o clientes potenciales.

Como tiene la opción de arrastrar y soltar, es muy fácil agregar un widget en cualquier página de Elementor.

Para no confundirlo, estamos describiendo el proceso a fondo. Por favor, compruebe el GIF a continuación.

Paso 2: personalice los campos de su formulario de contacto de Elementor

Ya ha visto que Elementor rellena previamente su formulario. Se han incluido los campos imprescindibles que todo formulario de contacto debe tener.

• Nombre
• Correo electrónico
• Mensaje

Después de obtener estos 3 campos de forma predeterminada, ahora es el momento de personalizarlos de acuerdo con sus requisitos.

Para eso, debe consultar la sección Contenido de la configuración del formulario.

Aquí, se presentará con Form Field . Y, incluye-

Nombre del formulario: Nombre del formulario.

Campos de formulario: en este campo, puede agregar tantos campos como desee. Además, hay opciones para duplicar y eliminar. Para ver la configuración de cada campo, simplemente haga clic en ellos. Los artículos que obtendrás aquí son-

Tipo: Seleccione cualquier tipo de campo. Hay un montón de opciones-

• Texto
• Correo electrónico
• área de texto
• URL
• Teléfono
• Radio
• Seleccione
• Caja
• Aceptación
• Número
• Fecha
• Hora
• Subir archivo
• Clave
• HTML
• Oculto
• reCAPTCHA
• reCAPTCHA V3
• Tarro de miel

Etiqueta: Es el nombre del campo que se desplegará en el formulario. Además, se mostrará en el correo electrónico que reciba del cliente o de los clientes potenciales.

Marcador de posición: es el nombre para mostrar de la interfaz de ese campo.

Requerido: Puede activar o desactivar un campo como un campo Requerido. Significa que el usuario debe completar la sección antes de enviar el formulario.

Ancho de columna: en esta parte, puede establecer el ancho del campo.

Lengüeta avanzada

No hay tantas opciones en esta pestaña. Pero las existentes son más complicadas si no las consigues.

• Valor predeterminado: es diferente del marcador de posición y el valor predeterminado del campo. Si no ha agregado ningún valor, este valor se enviará en el envío.
• ID: Resguarda los datos del campo y no es necesario modificarlo.
• Shortcode: si desea recuperar el campo en su otra página, este código lo ayudará. De lo contrario, no tienes que usarlo.

Paso 3: Diseñe el botón Enviar

Aquí, puede personalizar su botón Enviar en sus propios términos.

• Tamaño: en esta sección, puede establecer el tamaño del botón Enviar.
• Ancho de columna: personaliza el ancho del botón
• Alineación: establezca la alineación
• Ícono: agrega un ícono de la biblioteca de íconos
• Texto del botón: elija el texto que se muestra en el botón Enviar
• ID del botón: es opcional, le da una ID única al botón para usarlo más.

También te puede interesar leer: Cómo construir un sitio web de deportes con Elementor

Paso 4: configurar las acciones después del envío

Cuando alguien diseña el formulario de contacto de Elementor, tiene una pregunta común. Y, eso es- ¿Por qué no pasa nada después de enviar el formulario? Bueno, vamos a averiguar la respuesta.

Ha configurado muy bien el Formulario de Elementor. No hay problema con eso. Pero, amigo, si no configura la sección de Acciones después de enviar ,   no obtendrás ninguna reacción.

Con las formas de acciones de Elementor, obtendrá excelentes opciones. La combinación con servicios de terceros será mucho más fácil. Me gusta-

• Goteo
• hubspot
• mailchimp
• Flojo
• Kit de conversión, etc.

Trabajar con estos servicios es sencillo porque son integraciones integradas de Elementor. Además, también puede conectarse con Zapier a través de la acción Webhook. Lo curioso es que Zapier puede conectarse a más de 1000 servicios. Por lo tanto, lo asistirá actuando como un puente entre los servicios y el formulario.

En este momento, Elementor Forms Actions agrega:

• Correo electrónico
• Correo electrónico2
• mailchimp
• redirigir
• Webhook
• Goteo
• Campaña activa
• Obtener una respuesta
• Kit de conversión
• MailerLite
• Flojo
• Discordia
• Surgir

Por lo tanto, haga clic en la opción Acciones después de enviar de su formulario. Ahora, haga clic en el campo Agregar acción y obtendrá todas las opciones anteriores. Elige lo que necesitas.

Supongamos que ha elegido la acción Correo electrónico. Incluirá una pestaña para Correo electrónico y se utiliza para mostrar los resultados al usuario administrador del sitio web.

Para enviar un correo electrónico al usuario del formulario o que envió el formulario, debe seleccionar la opción Correo electrónico2 .

En Correo electrónico, obtendrá opciones como-

• Para
• Asunto del email
• Contenido del correo electrónico
• Desde el e-mail
• De nombre
• Responder a
• CC
• antes de Cristo
• metadatos
• Enviar como

Establezca las condiciones y personalice la acción de su formulario para que pueda funcionar sin problemas con su sitio web.

Consulte estas preguntas frecuentes frecuentes que la gente hizo en Elementor.

Paso 5: personalizar la mensajería del formulario de contacto de Elementor

El editor de formularios de Elementor siempre está ahí para personalizar su formulario según sus necesidades. Cuando sucede algo con el formulario, como un error o un envío exitoso, debe haber un mensaje para el usuario.

Aquí, puede personalizar ese mensaje. Esta es una función avanzada del formulario de contacto de Elementor.

Por lo tanto, haga clic en Opciones adicionales y cambie los Mensajes personalizados de No a Sí.

Ahora, puede editar cuatro mensajes diferentes.

• Mensaje de éxito: este mensaje se mostrará al usuario que completó correctamente el formulario y lo envió.
• Mensaje de error: muestra al usuario del formulario si se produce algún error desconocido al enviar el formulario.
• Mensaje obligatorio: se muestra cuando un campo de formulario es obligatorio pero el usuario no lo ha completado ni enviado el formulario.
• Mensaje no válido: se muestra cuando el usuario ha agregado un número de teléfono móvil o una dirección de correo electrónico no válidos.

Paso 6: personaliza el estilo de tu formulario de contacto de Elementor

Debe proporcionar una apariencia suave de su formulario que coincida con su sitio web. Si no coincide, piensa en lo aburrido que sería. Afortunadamente, hay opciones de estilo personalizadas en Elementor. Es muy fácil.

Haga clic en la pestaña Estilo . Habrá una amplia gama de configuraciones y opciones para cambiar todo el estilo de su formulario de contacto.

Paso 7: Publique el formulario de contacto de Elementor

Has configurado todo muy bien. Ahora es el momento de publicar su formulario para los usuarios de su sitio. Haga clic en el botón Actualizar en la parte inferior del conjunto de formularios, que se muestra en la imagen a continuación.

¡Felicidades! lo has hecho con éxito. Ahora se mostrará en vivo en esta página y podrá recopilar más clientes potenciales y suscriptores.

Echemos un vistazo a la vista final del formulario de contacto.

Verificar..

¡Cómo personalizar el diseño de su formulario en Elementor usando los widgets Happy Form GRATIS!

Reflexiones finales sobre el formulario de contacto de Elementor

¡Uf! Esperamos que este tutorial haya aclarado toda su confusión. En realidad, la creación y el diseño de su formulario de contacto depende de sus requisitos y elección.

No olvide hacer coincidir el formulario con la vista de su página. De lo contrario, se verá extraño para la audiencia.

Le sugerimos que definitivamente personalice la parte Acciones después del envío y Opciones adicionales del formulario. Si no editas estas secciones, no obtendrás ningún reflejo de tu trabajo, lo cual es totalmente decepcionante.

Además, infórmenos si tiene alguna dificultad para crear el formulario de contacto de Elementor en la sección de comentarios a continuación.

¿Has probado los HappyAddons para crear un nuevo sitio web en unos minutos? Bueno, echa un vistazo a las características de estos complementos de Elementor para darle a tu sitio web un aspecto magnífico.