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

Setting up the Contact Form 

1. Add the contact form widget onto your responsive website. To learn more about adding widgets to your website, see Adding Widgets. Once the widget has been placed, the Content Editor will appear.

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

3. Add new fields by clicking the 'Add field' button.

contactform1_en-US.png

4. Click the Submission tab. In the Submission recipients section, set the email address and subject for receiving form responses. contactform2_en-US.png

5. In the Submission actions section, set the confirmation and error messages to display when visitors submit the form. Use the Rich Text Editor to add color, emphasis (bold, italics and underline), and bullets to text in the message boxes.

contactform3_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í. contactform4_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.
contactform5_en-US.png

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

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

contactform7_en-US.png

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

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

contactform9_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.
  • You can also connect a couple of forms to the same spreadsheet, in this case, make sure that the fields and order in the form are identical to fit the info submitted.
  • 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 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.

contactform10_en-US.png

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

contactform11_en-US.png

Inicie sesión con sus credenciales de MailChimp.

contactform12_en-US.png

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

contactform13_en-US.png

Configure your form fields. In addition to the email address, the website builder can automatically send first name and last name fields to MailChimp. You must setup the email / first name / last name fields within the form.

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

contactform15_en-US.png

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

contactform16_en-US.png

Inicie sesión con sus credenciales de Constant Contact.

contactform17_en-US.png

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

contactform18_en-US.png

Configure your form fields. In addition to the email address, the website builder can automatically send first name, last name, and phone number to Constant Contact. The user is required to set up the email / first name / last name fields within the contact form. Email address and text message are added by default.

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

To connect the contact form to another service using webhooks, you simply need to create a custom endpoint URL with your desired service, and paste it into the Webhooks integration field in the contact form. Once you've added a webhook URL, the contact form will send a POST request to the end point with the data in the body in JSON format, when the contact form is submitted on the website. Here's an example of the JSON data that will be sent:

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

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

Custom Integration - Create your own custom Webhooks to integrate with the contact form. For example, save submissions into a database or connect to custom apps or 3rd party services.

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.

contactform21_en-US.png

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

contactform22_en-US.png

Haga clic en Realizar una integración personalizada.

contactform23_en-US.png

Seleccionar Webhooks entrantes.

contactform24_en-US.png

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

contactform25_en-US.png

Copie los URL de sus Webhooks .

contactform26_en-US.png

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

contactform27_en-US.png

Then head back and paste your Webhooks URL into Webhooks field. Click Done to complete the setup.

contactform28_en-US.png

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

contactform28.5_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.

contactform29_en-US.png

 

Diseño

Open the Design Editor by clicking the design tab on the top left corner or by right-clicking the widget and selecting 'Edit Design' to change the button layout, items, frame and spacing. 

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.

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

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

contactform32_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í.

contactform33_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