Agregar un Formulario de contacto

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

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 el campo existente haciendo clic en el nombre del campo.

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

addacontactform_1_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. addacontactform_2_en-US.png5. 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.

addacontactform_3_en-US.png6. 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í. addacontactform_4_en-US.png

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.
addacontactform_5_en-US.png

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

addacontactform_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.

addacontactform_7_en-US.png

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

addacontactform_13_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.

addacontactform_9_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.

addacontactform_10_en-US.png

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

addacontactform_11_en-US.png

Inicie sesión con sus credenciales de MailChimp.

addacontactform_12_en-US.png

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

addacontactform_18_en-US.png

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

addacontactform_14_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.

addacontactform_15_en-US.png

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

addacontactform_16_en-US.png

Inicie sesión con sus credenciales de Constant Contact.

addacontactform_17_en-US.png

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

addacontactform_18_en-US.png

Configure los campos de su formulario. Además de la dirección de correo electrónico, el formulario de contacto 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.

addacontactform_19_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. Puede conectar el formulario de contacto para enviar un evento cuando se envía el formulario de contacto.

Para conectar el formulario de contacto 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, el formulario de contacto 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.

addacontactform_20_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 personalizados para integrar al formulario de contacto. 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.

addacontactform_21_en-US.png

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

addacontactform_22_en-US.png

Haga clic en Realizar una integración personalizada.

addacontactform_23_en-US.png

Seleccionar Webhooks entrantes.

addacontactform_24_en-US.png

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

addacontactform_25_en-US.png

Copie los URL de sus Webhooks .

addacontactform_26_en-US.png

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

addacontactform_27_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.

addacontactform_28_en-US.png

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

addacontactform_29_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.

addacontactform_30_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.

addacontactform_31_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.

addacontactform_32_en-US.png

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

addacontactform_33_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. 

addacontactform_34_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.

addacontactform_35_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".

addacontactform_36_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.

addacontactform_37_en-US.png

Espaciado 

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

addacontactform_38_en-US.png

Archivos adjuntos

Se pueden adjuntar archivos a un formulario de contacto. Esta opción se habilita al crear un campo de archivos adjuntos en el formulario de contacto. Se incluirá un enlace para que los visitantes carguen sus archivos a través del formulario de contacto.

Para agregar esta opción a su formulario:

  1. Agregue un nuevo campo a cualquier formulario de contacto.
  2. Seleccione el archivo adjunto en el menú desplegable. Puede editar el texto del marcador de posición para cambiar el nombre de este campo.
  3. Un enlace para cargar archivos se agregará a su formulario.

Consideraciones

Los formularios de contacto son una excelente herramienta para obtener información valiosa de los visitantes y clientes. Asegúrese de ingresar su dirección de correo electrónico en el paso para especificar los destinatarios de Configuración de entrega para tener una copia de la información enviada.

Recursos