Agregar un Formulario de contacto

  • Base de conocimiento
  • Responsive Website Builder
  • Agregar un Formulario de contacto
  • Ayuda de Duda > Responsive Website Builder > Editar un sitio

Descripción general

Use el widget Formulario de contacto para agregar un formulario web completo a su sitio web. El formulario de contacto le permite ofrecer a los visitantes una variedad de campos de ingreso de datos, específicamente textos, menús desplegables, botones de opción, casillas de verificación, fechas, horas, correos electrónicos y números telefónicos. Puede usar el formulario para suscribirse a boletines informativos por correo electrónico, aceptar preguntas de los clientes o simplemente reunir comentarios de quienes visitan su sitio.

Guía

Configurar el formulario de contacto 

1. Agregue el widget de formulario de contacto a su Website Builder. Para aprender más sobre cómo agregar widgets a su sitio web, vea Adición de widgets. Una vez colocado el widget, aparecerá el Editor de contenido.

2. Decida qué información desea obtener de sus visitantes y luego modifique los campos existentes haciendo clic en el nombre del campo.

3. Agregue nuevos campos haciendo clic en el botón Agregar campo.

contactform1_en-US.png

4. Haga clic en la ficha Envío. En la sección Destinatarios del envío, especifique la dirección de correo electrónico y el asunto para recibir las respuestas del formulario. contactform_2_en-US.png

5. En la sección Acciones del envío, establezca los mensajes de confirmación y error que se mostrarán cuando los visitantes envíen el formulario. Utilice el Editor de texto enriquecido para agregar color, énfasis (negrita, cursiva y subrayado) y viñetas al texto en el cuadro de mensajes.

contactform_3_en-US.png

6. En la sección Seguimiento, agregue un código de seguimiento a su formulario. Si tiene AdWords o cualquier otro código de conversión, puede pegar el código aquí. contactform_4_en-US.png

Preparación de su formulario de contacto para cumplir con el GDPR

Para obtener el consentimiento de sus visitantes al momento del envío del formulario de contacto, simplemente agregue un nuevo campo a su formulario de contacto siguiendo las instrucciones indicadas anteriormente y seleccione la opción Participar o Texto libre.

Agregar campo Participar

Al agregar el campo Participar, se agregará una casilla de verificación confirmando el consentimiento de su visitante para compartir las respuestas del formulario. Este campo será obligatorio para enviar la respuesta del formulario.

gdpr_friendly_contact_form1-en_us.png

El texto predeterminado es “Al marcar esta casilla, acepto compartir mis respuestas del formulario”, pero puede sustituirlo por texto personalizado si lo desea.

Agregar campo de texto libre

Puede elegir agregar una notificación diferente usando texto libre. En este caso, el campo simplemente aparecerá como una notificación debajo de los campos de su formulario de contacto.gdpr_friendly_contact_form2-en_us.png

Tenga en cuenta lo siguiente: No hay texto marcador de posición predeterminado para la GDPR o relacionado con la privacidad en el campo de texto libre, ya que se trata de un campo multiuso, por lo que usted deben colocar su texto personalizado.

Eliminar las respuestas del formulario

Para eliminar las respuestas recibidas a través de un formulario de contacto, vaya al tablero de control del sitio, haga clic en en el icono de hamburguesa ubicado al lado del sitio donde aparecía el formulario y seleccione Respuestas de formulario.

gdpr_friendly_contact_form3-en_us.png

También tiene la opción de abrir el campo Administrar respuestas de formulario en la pestaña Contenido de su menú de edición del lado izquierdo.

gdpr_friendly_contact_form4-en_us.png

La página Respuestas de formulario que se abre le permite eliminar cualquier respuesta a cualquier formulario de ese sitio. Puede buscar por respuestas relevantes en el cuadro de búsqueda Buscar información del visitante. Asegúrese de buscar el nombre, la frase o los caracteres exactos.

gdpr_friendly_contact_form5-en_us.png

Al hacer clic en la pestaña del formulario relevante, se abre una tabla que incluye:

  • la fecha del envío de la respuesta del formulario
  • la información de cada uno de los campos del formulario
  • la opción para eliminar la respuesta del formulario

Integraciones

Puede extender el alcance de su formulario de contacto integrándolo a Google Sheets (Hojas de cálculo de Google), MailChimp, Constant Contact o a una aplicación de un tercero usando Webhooks.

Integración a Google Sheets

Los datos de envío del formulario de contacto se agregan instantáneamente a una hoja de cálculo en Google Sheets. Todos los campos de contacto del formulario se rellenarán en la hoja de cálculo, incluida una marca de hora de cuándo se envió el formulario.

Pasos

Haga clic en la ficha Integraciones en el área de configuración general del formulario de contacto.
contactform_5_en-US.png

Expanda la opción de Google Sheets y haga clic en INICIAR SESIÓN CON GOOGLE.

contactform_6_en-US.png

Haga clic en Permitir para dar permiso para conectar a su cuenta de Google. Si su computadora está conectada a varias cuentas de Google, escoja la que desee conectar a esta formulario.

cfgoogle1_en-US.png

Elija si desea agregar datos a una hoja de cálculo existente o a una nueva.

cfgoogle2_en-US.png

Seleccione la hoja de cálculo a la que desea enviar los datos del formulario. Puede seleccionar la hoja de cálculo de una lista o usar la barra de búsqueda para buscar una hoja específica.

cfgoogle3_en-US.png

Consideraciones adicionales

  • Si tiene varios formularios en el sitio, usted puede conectar cada uno a una hoja de cálculo diferente, incluidas hojas de contacto en cuentas de Google diferentes.
  • También puede conectar un par de formularios a la misma hoja de cálculo; en este caso, asegúrese de que los campos y el orden en los formularios son idénticos para que se ajusten a la información enviada.
  • Enviar datos de formulario a una hoja de cálculo de Google no le impide descargar los datos como un archivo CSV o recibir correos electrónicos de envío de formularios.

Integración con MailChimp

MailChimp es una excelente herramienta para la distribución de campañas de correo electrónico, boletines, etc. Al usar la nueva integración de formularios, los propietarios de sitios pueden gestionar listas de contactos de clientes potenciales (visitantes del sitio) al recopilar las direcciones de correo electrónico, que se envían al formulario, y enviarlas automáticamente a MailChimp.

Debe tener una cuenta de MailChimp. Una vez que tenga una cuenta, cree una lista de correo en su cuenta de MailChimp en la que se recopilarán los detalles de contacto.

Pasos

Haga clic en la ficha Integraciones en el área de configuración general del formulario de contacto.

cfmailchimp1_en-US.png

Expanda la opción de MailChimp y elija CONECTAR A MAILCHIMP

cfmailchimp2_en-US.png

Inicie sesión con sus credenciales de MailChimp.

cfmailchimp3_en-US.png

Seleccione su lista de contactos de MailChimp en el menú desplegable.

cfmailchimp4_en-US.png

Configure los campos de su formulario. Además de la dirección de correo electrónico, Duda puede enviar automáticamente los campos de nombre y apellido a MailChimp. Debe configurar los campos correo electrónico/nombre/apellido en el formulario.

cfmailchimp5_en-US.png

Integración a Constant Contact

Esta es una integración similar a la de MailChimp, pero le permite a los propietarios de sitios crear listas de correo en su cuenta de Constant Contact.

Debe tener una cuenta de Constant Contact. Una vez que tenga una cuenta, cree una lista de correo en su cuenta de Constant Contact en la que se recopilarán los detalles de contacto.

Pasos

Haga clic en la ficha Integraciones en el área de configuración general del formulario de contacto.

cfmailchimp6_en-US.png

Expanda la opción de Constant Contact y elija CONECTAR A CONSTANT CONTACT.

cfconstant1_en-US.png

Inicie sesión con sus credenciales de Constant Contact.

cfconstant2_en_US.png

Seleccione su lista de contactos de Constant Contact en el menú desplegable.

cfconstant3_en-US.png

Configure los campos de su formulario. Además de la dirección de correo electrónico, Duda puede enviar automáticamente nombre, apellido y número telefónico a Constant Contact. Se requiere que el usuario configure los campos de correo electrónico/nombre/apellido en el formulario de contacto. La dirección de correo electrónico y los mensajes de texto se agregan por opción predeterminada.

cfmailchimp5_en-US.png

Integraciones Webhooks

Numerosos servicios en línea y en la nube ofrecen integraciones a través de una ruta llamada WebhooksLos Webhooks envían notificaciones a una dirección web específica denominada URL de extremo. En Duda, usted puede conectar el formulario de contacto para enviar un evento cuando se envía el formulario de contacto.

Para conectar el formulario de contacto de Duda a otro servicio usando webhooks, usted solo debe crear un URL de extremo personalizado con el servicio que desea y pegarlo en el campo de integración de Webhooks en el formulario de contacto. Una vez que haya agregado un URL de webhook, Duda enviará una solicitud POST al extremo con los datos del cuerpo en formato JSON , cuando el formulario de contacto se envía en el sitio web. Este es un ejemplo de los datos JSON que se enviarán:

{"Fecha de envío":"06/02/2016 10:23:54","Título del formulario":"Contáctenos","Nombre":"John Smith","Correo electrónico":"prueba@ejemplo.com","Teléfono":"(555).555.1212","Mensaje":"¡Envío de formulario webhooks!"}

Tenga en cuenta que “Fecha de envío” y “Título de formulario” siempre se especificarán; los otros campos (field_name : value) se basan en los campos que están configurados en el formulario.

Crear un URL de extremo

Los extremos se configuran en servicios de terceros (por ej., Zapier o Slack) u otro servicio que usted controle. Estos extremos se configuran específicamente para recibir notificaciones del Webhook.

cfmailhooks1_en-US.png

Ideas de integración

Zapier Conecte datos de formulario de contacto a Zapier para posibilidades ilimitadas. Conecte a virtualmente casi todos los servicios en la nube modernos, incluidos CMR como Salesforce, Sugar CRM, Zoho y otros.

Slack Sólida aplicación de mensajería; conecte para recibir notificaciones apenas se envíen datos de formulario.

Integración personalizada - Cree sus propios Webhooks para integrar con el formulario de contacto de Duda . Por ejemplo, guarde los envíos en una base de datos o conecte a aplicaciones personalizadas o servicios de terceros .

Ejemplo de Webhooks / Configuración de URL de extremo en Slack

En la aplicación de Slack, abra el menú desplegable de la cuenta principal, luego haga clic en Aplicaciones e integraciones.

cfmailhooks2_en-US.png

El sitio web de Slack se abrirá. En la esquina superior derecha, haga clic en el botón Crear.

cfintegration2_en-US.png

Haga clic en Realizar una integración personalizada.

cfintegrations3_en-US.png

Seleccionar Webhooks entrantes.

cfintegration4_en-US.png

Seleccione un canal existente o cree un nuevo canal donde se publicarán sus mensajes.

cfintegrations5_en-US.png

Copie los URL de sus Webhooks .

cfintegrations6_en-US.png

Ajuste la configuración y las opciones a su gusto, luego haga clic en Guardar configuración.

cfintegrations7_en-US.png

Luego regrese al formulario de contenido y pegue el URL de sus Webhooks en el campo Webhooks . Haga clic en Listo para concluir la configuración.

cfintegrations8_en-US.png

Obtenga una vista previa de su sitio y envíe el formulario de contacto para someter a prueba la integración.

cfintegrations9_en-US.png

Si ve el mensaje en el canal que seleccionó, ¡felicitaciones, ya está listo! Ahora recibirá un mensaje en Slack cada vez que se envíe su formulario de contacto.

cfintegrations10_en-US.png

Archivos adjuntos

Se pueden adjuntar archivos a los envíos de formularios de contacto. Esto se puede hacer creando un campo de archivo adjunto en el formulario de contacto. Los enlaces a los archivos cargados están disponibles en el archivo de descarga de envíos de formulario, así como en cualquiera de las integraciones de formularios, tales como Webhooks y Google Sheets.

Pasos

Agregue un nuevo campo a cualquier formulario de contacto.

cfattachfile1_en-US.png

Seleccione el archivo adjunto en el menú desplegable. Puede editar el texto del marcador de posición para cambiar el nombre de este campo.

cfattachfile2_en-US.png

Un enlace para cargar archivos se agregará a su formulario.

cfattachfile3_en-US.png

Diseño

Para abrir el Editor de diseño, haga clic en la ficha de diseño en la esquina superior izquierda o haga clic con el botón derecho en el widget y seleccione "Editar diseño" para cambiar la disposición, los elementos, el marco y el espaciado de los botones. 

cfdesign1_en-US.png

Disposición

Haga clic en la ficha Disposición, luego haga clic en en el icono de disposición para elegir un diseño de disposición diferente para el formulario de contacto. Cambie la alineación del formulario haciendo clic con el botón izquierdo o derecho, dependiendo de cómo desee que se alineen los espacios de los campos.

cfdesign2_en-US.png

Elemento

Haga clic en la ficha Elemento para editar el estilo y el texto de los campos, así como el estilo y texto de los botones. Puede realizar cambios en el diseño de los campos y los botones, tales como color de fondo y estilos de borde, y realizar cambios en el texto de los campos y los botones, tales como tamaño, fuente, alineación y más. Para volver al estilo global, haga clic en el botón "Volver al diseño global".

cfdesign3_en-US.png

Marco

Haga clic en la ficha Marco para editar el estilo de marco. Puede cambiar el fondo agregando un color o una imagen, cambiar el estilo de texto de la notificación de envío, agregar un borde y personalizar la fuente del título del formulario.

cfdesign4_en-US.png

Espaciado 

Haga clic en la ficha Espaciado para editar el relleno y los márgenes del formulario de contacto. Aprenda más sobre cómo espaciar aquí.

cfdesign5_en-US.png

Consideraciones

Los formularios de contacto son una excelente herramienta para obtener información valiosa de los visitantes y clientes. Asegúresenbspde ingresar su dirección de correo electrónico en el paso Destinatarios del envío para tener una copia de la información enviada.

Recursos

Guía de solución de problemas del formulario de contacto

Si no puede recibir envíos de formularios que son enviados usando un formulario de contacto, lo más probable es que se deba a que nuestro correo está siendo filtrado como spam en el extremo de su servidor de correo.

IMPORTANTE: Esta lista de verificación solo se aplica a los formularios de contacto que usan el widget de formulario de contacto de Duda.

Lista de verificación

  • Revise las respuestas del formulario para asegurarse de que el formulario de contacto esté funcionando. Para descargarlo, puede hacer clic en el formulario de contacto >>> hacer clic en respuestas del formulario.
  • Verifique si el correo electrónico es válido. Si está ingresando varios correos electrónicos, recuerde usar una coma (no espacios) para separarlos.
  • Revise la carpeta de spam de su sitio.
  • Revise su configuración del filtro de correos electrónicos y de la lista negra para asegurarse de que estos no están siendo bloqueados.
  • Agregue form-processor@duda.co a su lista blanca de correos electrónicos.
  • Cree una nueva página e inserte su formulario de contacto allí para ver si funciona.
  • Desactive los scripts personalizados en su sitio en la configuración del sitio.

¿Aún no funciona?

Si su formulario de contacto sigue sin funcionar luego de revisar los puntos de la lista de verificación de solución de problemas, contacte con el proveedor de correo electrónico para estudiar por qué sus correos no están siendo recibidos.

Si este funciona en otra página en su sitio móvil, pero no en la página en la que debería funcionar, eso normalmente significa que existe un script personalizado interfiriendo con el funcionamiento de su formulario de contacto. Restablezca la página o revise su página para verificar si algún script podría estar causando este problema.

 

×

Por favor inicie sesión como Pro

Soporte telefónico prioritario está disponible exclusivamente para DudaPros. Inicie sesión en su cuenta DudaPro ahora para ver nuestros números de asistencia internacional.

Inicie sesión
¿No eres un DudaPro?¡Compra DudaPro!