Widgets: Contact Forms

Categorías de widgets: Negocios

Con el widget Formulario añades un formulario web a tu sitio, por ejemplo para altas en tu newsletter, preguntas de clientes o simplemente para recoger opiniones. El widget Formulario ofrece a tus visitantes distintos campos de entrada: texto, desplegable, radio buttons, casillas de verificación, fecha, hora, correo y número de teléfono.

Advertencia: mejor no dupliques formularios de contacto; el formulario duplicado suele dar problemas.

Si quieres saber cómo añadir widgets, consulta «Add Widgets».

Editor de contenido: configurar el formulario

Haz clic en el elemento para abrir el menú flotante y luego en la opción del editor de contenido.

Campos del formulario de contacto

Para cambiar un campo existente, haz clic en su nombre en la lista.

Para añadir campos nuevos, haz clic en Añadir campo.

Cuando hayas hecho clic en un campo existente o añadido uno nuevo, aparecerán ajustes adicionales. Muchos de ellos dependen del Tipo de campo que elijas.

Nota:

• En los radio buttons y las casillas de verificación puedes añadir imágenes que se muestren en las opciones. Las imágenes no aparecen en el correo que recibes con los envíos del formulario, pero sí la etiqueta seleccionada (aunque esté oculta en el sitio).
• Ten en cuenta que el aspecto de los campos de entrada en tu sitio publicado puede variar un poco respecto a lo que ves en el editor, según el navegador que se use.

Ajustes y consideraciones de los campos de contacto

• La mayoría de los tipos de campo tienen estas opciones:
  • Campo obligatorio. Si un campo obligatorio se queda vacío, al enviar el formulario aparece un borde rojo a su alrededor. Por ahora no se añade ningún aviso (por ejemplo, un asterisco), pero puedes añadir uno a mano en el Etiqueta del campo o en el Marcador.
  • Comenzar una nueva línea en este campo.
  • Tamaño del campo. Ajusta el ancho del campo.
• En los radio buttons y las casillas de verificación puedes añadir imágenes que se muestren en las opciones. Las imágenes no aparecen en el correo que recibes con los envíos del formulario, pero sí la etiqueta seleccionada (aunque esté oculta en el sitio).
• Campo de hora: la opción Use 24-hour clock solo afecta a la hora que se muestra en los envíos; el formato del selector de hora que ven los visitantes depende de la configuración de su navegador.
• Campo de archivo adjunto:
  • El nombre del archivo no puede contener espacios al subirlo.
  • El tamaño máximo de los archivos adjuntos es de 10 MB.
  • Solo se puede subir un archivo por campo de archivo adjunto (si necesitas subir varios archivos, tendrás que incluir un campo para cada uno).
  • Se admiten los siguientes formatos de archivo: .pdf, .xls, .xlsx, .doc, .docx, .zip, .ppt, .pptx, .psd, .txt, .xml, .mp3, .ttf, .otf, .woff, .eot, .svg, .odt, .ott, .js, .css, .png, .jpg, .gif, .jpeg, .rar, además de todos los formatos de archivo de vídeo.
  • Los archivos adjuntos enviados caducan a los 90 días.
  • Los archivos no se añaden al Media Manager.
• Campo de número de teléfono: el campo de número de teléfono comprueba la validación para asegurarse de que se cumplen las condiciones de formato; si no es así, aparece un error con un mensaje. Las condiciones son: al menos un número y ningún carácter no válido. Además de los números, son válidos los espacios, los signos más (+), los guiones (-) y los puntos (.).

Botón Enviar mensaje

Personaliza el texto que quieres que aparezca en el botón Enviar mensaje.

reCAPTCHA

Los formularios nuevos llevan por defecto una validación reCAPTCHA. Protege tu formulario frente a spammers y agiliza el envío para tus visitantes.

Elige una posición para el reCAPTCHA.

Decide si el reCAPTCHA se muestra en el formulario como icono o como texto.

Nota: el reCAPTCHA no se puede desactivar.

Envíos (opciones y ajustes para después de enviar un formulario)

Notificación de nuevo envío

En Nueva notificación de envío defines a qué dirección de correo y con qué asunto llegan las respuestas del formulario. Asegúrate de escribir la dirección de correo en el campo Los formularios se enviarán a; solo así recibes una copia de la información enviada.

Si el campo Los formularios se enviarán a se queda vacío, se usa como destinatario la dirección de correo principal de la Content Library. Si no existe esa dirección, los envíos van por defecto al titular de la cuenta. Todas las respuestas llegan a la página de respuestas del formulario.

Acciones después del envío

Haz clic en Acciones después del envío para configurar lo siguiente:

• Mensajes de agradecimiento y de error. Usa el Rich Text Editor para añadir color, énfasis (negrita, cursiva y subrayado) y viñetas, y escribe el texto en los campos.
• Ajustes de redirección. Puedes redirigir a una página de tu sitio o a una web externa.
• Ajustes de correo: por defecto se envía una respuesta automática a la persona que envió el formulario, junto con una copia de su envío (siempre que la dirección de correo indicada sea válida). Cuando esta opción está activada, aparecen los ajustes adicionales que se indican a continuación.
  • Respuesta automática al formulario del remitente. Por defecto se envía una respuesta automática a quien envía el formulario (siempre que la dirección de correo indicada sea válida). Para desactivarlo, desactiva la opción Respuesta automática al formulario del remitente.
  • Nombre del formulario. También puedes definir el Nombre del formulario (el nombre que escribas aquí aparece en el campo «From» del correo enviado). Si la respuesta automática está desactivada, este ajuste no está disponible.
  • Asunto del correo electrónico. Si la respuesta automática está desactivada, este ajuste no está disponible.
  • Mensaje de correo electrónico. Si la respuesta automática está desactivada, este ajuste no está disponible.
  • Incluya una copia de la respuesta al formulario del remitente en el correo electrónico. Esta opción está activada por defecto. Quita la marca para desactivarla. Si la respuesta automática está desactivada, este ajuste no está disponible.

Seguimiento

Para añadir código de seguimiento a tu formulario, haz clic en Seguimiento y pega el código de conversión o de AdWords en el campo correspondiente.

Título del formulario

Escribe un título para el formulario. Para ocultarlo, haz clic en el icono del ojo.

Nota: un título modificado no surte efecto hasta que se envía una respuesta nueva. Si tienes prisa, envía una respuesta de prueba y espera unos minutos a que el formulario se actualice.

Pestaña Integrations (opciones de terceros)

En la pestaña Integration envías los datos de los envíos correctos a un servicio de terceros. Encontrarás más información más abajo, en el apartado «Integraciones del formulario de contacto (opciones de configuración adicionales)».

Integraciones del formulario de contacto (opciones de configuración adicionales)

Para ampliar el alcance de tu formulario de contacto, conéctalo con distintas soluciones de terceros.

Para añadir una integración, en el área de contenido haz clic en la pestaña Integraciones.

Nota: ya no ofrecemos Mailchimp ni Constant Contact como integraciones del formulario de contacto. Si las tenías instaladas antes, seguirán disponibles para tu sitio.

Integración con Google Sheets

Con la integración con Google Sheets, los datos de cada envío del formulario de contacto llegan al instante a una hoja de cálculo en Google Sheets. Se incluyen todos los campos de contacto del formulario, más una marca de tiempo del momento del envío.

1. Haz clic en Google Sheets y luego en INICIAR SESIÓN CON GOOGLE.
2. Haz clic en Autorizar para conceder los permisos de conexión con tu cuenta de Google. Si tu ordenador tiene varias cuentas de Google conectadas, elige la que quieres conectar con este formulario.
3. Elige si quieres añadir los datos a una hoja de cálculo existente o a una nueva.
4. Elige la hoja de cálculo a la que quieres enviar los datos del formulario. Puedes seleccionarla de una lista o buscar una concreta con la barra de búsqueda.

Nota:

• Si tienes varios formularios en el sitio, puedes conectar cada uno con una hoja de cálculo distinta, incluso con hojas de cuentas de Google diferentes.
• Puedes conectar varios formularios con la misma hoja de cálculo. En ese caso, asegúrate de que los campos y su orden sean idénticos en los formularios, para que la información enviada encaje.
• Aunque envíes los datos del formulario a una hoja de cálculo de Google, puedes seguir descargándolos como archivo .csv y seguir recibiendo los correos de los envíos.

Integraciones con webhooks

Muchos servicios en línea y en la nube se pueden conectar mediante lo que se conoce como webhooks. Un webhook envía notificaciones a una dirección web concreta, la URL de endpoint. Así, tu formulario de contacto puede enviar un evento cada vez que se envía.

Para conectarlo con otro servicio: crea una URL de endpoint propia en el servicio que quieras y pégala en el campo de integración de webhooks del formulario de contacto. A partir de ahí, con cada envío el formulario manda una petición POST al endpoint, con los datos en formato JSON en el cuerpo. Un ejemplo de estos datos JSON sería:

{"Submission Date":"06/02/2016 10:23:54","Form Title":"Contact Us","Name":"John Smith","Email":"test@example.com","Phone":"(555).555.1212","Message":"Webhook Form Submission!"}

Nota: «Submission Date» y «Form Title» se incluyen siempre. Los demás campos (field_name : value) dependen de los campos configurados en el formulario. Toda la información de los campos se envía como cadena de texto y entre comillas. Por ejemplo, el 7 se envía como «7».

Crear una URL de endpoint

Un endpoint está en un servicio de terceros (por ejemplo, Zapier o Slack) o en un servidor que controlas tú. Está preparado especialmente para recibir las notificaciones del webhook.

Ideas de integraciones:

• Slack. Una app de mensajería robusta que puedes conectar para recibir notificaciones en cuanto se envían datos del formulario.
• Integración propia. Crea tus propios webhooks para conectarlos con el formulario de contacto. Por ejemplo, guarda los envíos en una base de datos o conéctalos con apps propias o servicios de terceros.

Ejemplo de configuración de webhooks/URL de endpoint en Slack

1. En la app de Slack, abre el desplegable principal de la cuenta y haz clic en Apps & Integrations.
2. Se abre la web de Slack. Arriba a la derecha, haz clic en Build.
3. Haz clic en Make a Custom Integration.
4. Elige Incoming Webhooks.
5. Elige un channel existente o crea uno nuevo donde se publicarán tus mensajes.
6. Copia tu URL de webhooks.
7. Ajusta la configuración y las opciones a tu gusto y haz clic en GUARDAR CONFIGURACIÓN.
8. Abre el editor del formulario de contacto y pega tu URL de webhooks en el campo Webhooks.
9. Haz clic en Hecho.

Previsualiza tu sitio y envía el formulario de contacto para probar la integración.

A partir de ahora, cada vez que se envíe tu formulario de contacto recibirás un mensaje en Slack.

Editor de diseño: dar estilo al formulario

Haz clic en el elemento para abrir el menú flotante y luego en la opción para editar el diseño.

Diseño

En la pestaña Diseño:

• Haz clic en el icono de layout para elegir un diseño de layout para el formulario de contacto.
• Para cambiar la alineación del formulario, haz clic en Izquierda o Derecha.

Item

En la pestaña Elemento:

• Para editar el estilo y el texto de los campos, haz clic en Campos.
• Para editar el estilo y el texto del botón, haz clic en Botón. Para volver al estilo del tema, haz clic en Revert to theme button.

Frame

En la pestaña Frame:

• Para editar el estilo del marco, haz clic en Estilo de marco. Puedes cambiar el fondo añadiendo un color o una imagen.
• Para cambiar el estilo del texto del título, haz clic en Título del formulario.
• Para cambiar el estilo del texto de la notificación de envío, haz clic en Mensaje de envío.

Si quieres información sobre opciones de diseño que no son específicas de este widget (por ejemplo, layout, estilo o espaciado), consulta «Widget Design».

Resumen de las respuestas del formulario: envíos desde tu sitio

Hay varios sitios desde los que acceder a las respuestas: el Panel de control del proyecto, el editor y el propio formulario.

Nota: los envíos del formulario hechos desde el enlace de vista previa o desde la vista previa en el sitio llegan al destinatario definido (o al titular de la cuenta si no se ha definido ninguno). Sin embargo, no aparecen en las respuestas del sitio ni se incluyen en la exportación a CSV.

Project Dashboard (gestionar, eliminar y exportar)

Para llegar a las respuestas del formulario en el Panel de control del proyecto:

1. En el panel lateral, haz clic en Más y luego en Panel de control del proyecto. Selecciona Form Response (en la barra lateral de opciones, dentro de Descripción general del sitio).
2. Para exportar las respuestas, haz clic en Exportar a CSV, arriba a la derecha del apartado «Form Responses».
3. Para gestionar las respuestas, haz clic en Gestionar respuestas.
4. Se abre la página «Form Responses», que te permite eliminar cualquier respuesta de cualquier formulario del sitio. En el cuadro de búsqueda Buscar respuestas puedes buscar las respuestas que te interesen. Asegúrate de buscar el nombre, la frase o los caracteres exactos.
5. Haz clic en la pestaña del formulario correspondiente para abrir una tabla que incluye:
   • la fecha de envío de la respuesta del formulario.
   • lo que se escribió en cada uno de los campos del formulario.
   • la opción de eliminar la respuesta del formulario.

En el editor (gestionar y eliminar)

Para llegar a las respuestas del formulario en el editor:

1. En el panel lateral, haz clic en Más y luego en Configuración.
2. Haz clic en Gestionar respuestas de formulario.
3. Se abre la pantalla «Form Responses», que te permite eliminar cualquier respuesta de cualquier formulario del sitio. En el cuadro de búsqueda Buscar respuestas puedes buscar las respuestas que te interesen. Asegúrate de buscar el nombre, la frase o los caracteres exactos.
4. Haz clic en la pestaña del formulario correspondiente para abrir una tabla que incluye:
   • la fecha de envío de la respuesta del formulario.
   • lo que se escribió en cada uno de los campos del formulario.
   • la opción de eliminar la respuesta del formulario.

Desde el propio formulario (solo exportar)

Para exportar las respuestas desde el formulario:

1. En el editor del sitio, ve al formulario que quieras.
2. Haz clic derecho en el formulario.
3. En el menú contextual, selecciona Descargar respuestas.

Nota: si la opción no está disponible, puede significar que todavía no ha habido respuestas en el sitio publicado.

Responder a los envíos del formulario de contacto de tus clientes

Puedes responder al envío del formulario de contacto de un cliente directamente desde tu correo: solo tienes que hacer clic en Responder al cliente en el correo que recibes del Creador de sitios web. La dirección de correo de quien envió el formulario aparece entonces automáticamente en el campo «To». Ten en cuenta que, si el cliente indicó varias direcciones de correo, solo se usa la primera.

Nota: una respuesta enviada así puede acabar marcada como spam, según la dirección de correo y la configuración de quien envió el formulario. Es más seguro copiar su dirección de correo y escribir un correo nuevo.

Configurar un formulario de contacto que respete el RGPD

Para pedir el consentimiento de tus visitantes al enviar el formulario de contacto, añade un campo nuevo a tu formulario y elige como Tipo de campo la opción Inclusión o Texto libre.

Opt-in frente a Free Text

Un campo Inclusión obliga a quien envía el formulario a marcarlo; si no, el formulario no se puede enviar. Este campo trae además un texto predeterminado: «By checking, I agree to share my form responses.».

El campo Texto libre, en cambio, solo muestra el aviso que quieras. Al ser un campo polivalente, no incluye ningún texto predeterminado ni sugerido.

Para añadir un campo Inclusión o Texto libre:

1. Abre la pestaña de contenido del formulario. Haz clic en el elemento para abrir el menú flotante y luego en la opción del editor de contenido.
2. Haz clic en Añadir campo.
3. Haz clic en el desplegable Tipo de campo y elige Inclusión o Texto libre.
4. Configura el campo a tu gusto.

Preguntas frecuentes y solución de problemas

Nota: si no hay ningún destinatario de envíos, se usa como destinatario la dirección de correo principal de la Content Library. Si no existe esa dirección, los envíos van por defecto al titular de la cuenta. Todas las respuestas llegan a la página de respuestas del formulario.

No recibo los envíos del formulario

Si no recibes ningún envío del formulario hecho con el widget Formulario, lo más probable es que nuestros correos se estén filtrando como spam en tu servidor de correo.

Si no recibes correos del Creador de sitios web, mira en tu carpeta de spam. Si tampoco están ahí, añade a la lista de permitidos las direcciones IP 167.89.22.215, 149.72.216.48, 149.72.184.31, 149.72.166.161 y 149.72.162.205 en los ajustes de tu proveedor de correo.

Más consejos para solucionar el problema:

• Revisa las respuestas del formulario para comprobar que el formulario de contacto funciona. Puedes hacer clic en el formulario de contacto y luego en Respuestas de formulario para descargarlas.
• Comprueba que la dirección de correo sea válida. Si escribes varias direcciones, sepáralas con una coma (sin espacios).
• Mira en tu carpeta de spam.
• Revisa los ajustes de filtros y de listas de bloqueo de tu correo para asegurarte de que no estén bloqueando los correos.
• Añade no-reply@multiscreensite.com a tu lista de permitidos.
• Crea una página nueva e inserta ahí tu formulario de contacto para ver si funciona.
• Desactiva todos los scripts propios de tu sitio en los ajustes del sitio.

Nota: si tu formulario de contacto sigue sin funcionar después de repasar esta lista, ponte en contacto con tu proveedor de correo para averiguar por qué no llegan los correos de los envíos del formulario de contacto.

Si funciona en otra página de tu sitio móvil pero no en la página en la que debería, suele ser porque un script propio interfiere con el funcionamiento del formulario de contacto. Restablece la página o revisa el HTML del head de la página y del sitio en busca de scripts propios que puedan estar causando el problema.

¿Cómo hago para que quien envía el formulario reciba un correo automático después?

Hay un ajuste, activado por defecto, que envía un correo automático junto con una copia del envío.

Para gestionar este ajuste:

1. Haz clic en el elemento para abrir el menú flotante y luego en la opción del editor de contenido.
2. Selecciona la pestaña Envío.
3. Haz clic en Acciones después del envío.
4. Baja hasta Configuración de correo.

Encontrarás más información sobre las acciones después del envío en el apartado «Acciones después del envío» de este artículo.