Añadir un formulario de contacto

Descripción general

Utiliza el complemento Formulario de contacto para añadir a tu sitio web un formulario web completo. Con un formulario de contacto ofreces a los visitantes diferentes campos de entrada (como texto, opciones desplegables, botones de selección, casillas de verificación, fecha, hora, correo electrónico y números de teléfono). Puedes utilizar el formulario para ofrecer la opción de recibir boletines informativos por correo electrónico, realizar preguntas a los clientes o simplemente para conocer la opinión y recibir comentarios de los visitantes de tu sitio.

Guía

1. Añade el complemento del formulario de contacto al creador de tu sito web. Para obtener más información acerca de cómo añadir complementos a tu sitio web, consulta Añadir complementos. Una vez añadido el complemento, aparecerá el editor de contenido.

2. Decide qué información te gustaría obtener de los visitantes y, a continuación, modifica el campo existente haciendo clic en el nombre del campo.

3. Añade nuevos campos haciendo clic en el botón Añadir campo.

addacontactform_1_en-US.png

4. Haga clic en la pestaña Envío. En el apartado Destinatarios del envío, indique la dirección de correo electrónico y el asunto para recibir respuestas del formulario.  addacontactform_2_en-US.png5. En el apartado Acciones de envío, introduzca los mensajes de confirmación y error que quiere que aparezcan cuando los visitantes envíen el formulario. Utilice el editor de texto enriquecido para dar color y énfasis (negrita, cursiva y subrayado) y añadir viñetas al texto de los cuadros de mensaje.

addacontactform_3_en-US.png6. En el apartado Seguimiento, asigne un código de seguimiento al formulario. Si tiene AdWords o cualquier otro código de conversión, puede pegarlo aquí. addacontactform_4_en-US.png

Integraciones

Puedes ampliar el alcance del formulario de contacto integrándolo con Hojas de cálculo de Google, Mailchimp, Constant Contact o una aplicación de terceros mediante Webhooks.

Integración con Hojas de cálculo de Google

Añade al instante los datos sobre el envío de formularios de contacto a una hoja de cálculo de Google. Todos los campos del formulario referentes a los contactos se rellenarán en la hoja de cálculo, incluida la marca de tiempo del envío del formulario.

Pasos

Haz clic en la pestaña Integraciones del apartado de configuración general del formulario de contacto.
addacontactform_5_en-US.png

Despliega la opción Hojas de cálculo de Google y haz clic en INICIAR SESIÓN CON GOOGLE.

addacontactform_6_en-US.png

Haz clic en Permitir para otorgar permisos de conexión con tu cuenta de Google. Si tu equipo está conectado a varias cuentas de Google, elige la que desees que se conecte este formulario.

addacontactform_7_en-US.png

Indica si deseas añadir un dato a una hoja de cálculo existente o a una nueva.

addacontactform_13_en-US.png

Selecciona la hoja de cálculo a la que desees enviar los datos del formulario. Puedes hacerlo a través de una lista o buscando una hoja de cálculo determinada en la barra de búsqueda.

addacontactform_9_en-US.png

Otras consideraciones

  • Si en el sitio tienes varios formularios, puedes conectar cada uno de ellos a una hoja de cálculo diferente, aunque se encuentren en cuentas de Google distintas.
  • Asimismo, puedes conectar un par de formularios a la misma hoja de cálculo; en este caso, asegúrate de que los campos y el orden del formulario coincidan para que se ajusten a la información enviada.
  • El envío de los datos de un formulario a una hoja de cálculo de Google no impide que se puedan descargar como archivo CSV, ni que recibas correos electrónicos de envío de formularios.

Integración con MailChimp

MailChimp es una estupenda herramienta de distribución por correo electrónico de campañas, boletines de noticias, etc. Con el uso de la nueva integración de formularios, los propietarios de sitios web pueden gestionar listas de contactos de posibles clientes (visitantes del sitio) recopilando sus direcciones de correo electrónico, que se envían al formulario y automáticamente a MailChimp.

Debes tener una cuenta de MailChimp. Cuando dispongas de una, crea en ella una lista de correo en la que se recopilará la información de los contactos.

Pasos

Haz clic en la pestaña Integraciones del apartado de configuración general del formulario de contacto.

addacontactform_10_en-US.png

Despliega la opción MailChimp y selecciona CONECTARSE A MAILCHIMP.

addacontactform_11_en-US.png

Inicia sesión con tus credenciales de MailChimp.

addacontactform_12_en-US.png

En el menú desplegable, selecciona tu lista de contactos de MailChimp.

addacontactform_18_en-US.png

Configura los campos del formulario. Además de las direcciones de correo electrónico, el contacto puede enviar automáticamente a MailChimp los campos de nombre y apellidos. Debes configurar los campos de correo electrónico, nombre o apellidos dentro del propio formulario.

addacontactform_14_en-US.png

Integración con Constant Contact

Es similar a la integración con MailChimp, con la diferencia de que, con Constant Contact, los propietarios del sitio pueden crear listas de correo en su cuenta.

Debes tener una cuenta de Constant Contact. Cuando dispongas de una, crea en ella una lista de correo en la que se recopilará la información de los contactos.

Pasos

Haz clic en la pestaña Integraciones del apartado de configuración general del formulario de contacto.

addacontactform_15_en-US.png

Despliega la opción Constant Contact y selecciona CONECTARSE A CONSTANT CONTACT.

addacontactform_16_en-US.png

Inicie sesión con sus credenciales de Constant Contact.

addacontactform_17_en-US.png

En el menú desplegable, selecciona tu lista de contactos de Constant Contact.

addacontactform_18_en-US.png

Configura los campos del formulario. Además de las direcciones de correo electrónico, el formulario de contacto puede enviar automáticamente a Constant Contact los campos de nombre, apellidos y número de teléfono. El usuario debe configurar los campos de correo electrónico, nombre o apellidos dentro del propio formulario de contacto. La dirección de correo electrónico y el mensaje de texto se añaden de forma predeterminada.

addacontactform_19_en-US.png

Integraciones con Webhooks

Numerosos servicios en línea y en la nube ofrecen integraciones a través de una ruta llamada WebhooksWebhooks envía notificaciones a una dirección web específica llamada URL de punto de conexión. Puedes conectar el formulario de contacto para enviar un evento una vez enviado el formulario.

Para conectar el formulario de contacto a otro servicio mediante Webhooks solo tiene que crear una URL de punto de conexión personalizada con el servicio deseado y pegarla en el campo de la integración de Webhooks del formulario de contacto. Una vez añadida la URL de Webhooks, el formulario de contacto enviará una solicitud de POST al punto de conexión con los datos del cuerpo en formato JSON una vez enviado el formulario de contacto al sitio web. A continuación se muestra un ejemplo de los datos de JSON que se enviarán:

{"Fecha de envío":"02/06/2016 10:23:54","Título del formulario":"Contáctanos","Nombre":"Juan García","Correo electrónico":"prueba@ejemplo.com","Teléfono":"(555).555.1212","Mensaje":"Envío de formulario de Webhook"}

Ten cuenta que siempre se aportarán los datos "Fecha de envío" y "Título del formulario", mientras que los demás campos (field_name : value) se basan en aquellos que se han configurado en el formulario.

Creación de una URL de punto de conexión

Los puntos de conexión se configuran en los servicios de terceros (por ejemplo, Zapier o Slack), o bien en otro servidor que controles. Estos puntos de conexión están específicamente configurados para recibir notificaciones del Webhook.

addacontactform_20_en-US.png

Ideas de integración

Zapier: conecta los datos del formulario de contacto con Zapier y obtén un sinfín de posibilidades. Conecta prácticamente con todos los servicios en la nube modernos, entre los que se incluyen CRM como Salesforce, Sugar CRM, Zoho, etc.

Slack: excelente aplicación de mensajería a la que te puedes conectar para recibir notificaciones inmediatamente después de que se envíen los datos del formulario.

Integración personalizada: crea tu propio Webhooks personalizado que se integrará con el formulario de contacto. Por ejemplo, guarda envíos en una base de datos o conéctalo con aplicaciones personalizadas o servicios de terceros.

Ejemplo de configuración de URL de Webhooks o de punto de conexión en Slack

En la aplicación Slack, abra el menú desplegable de la cuenta principal y, a continuación, haga clic en Aplicaciones e Integraciones.

addacontactform_21_en-US.png

Se abrirá el sitio web de Slack. A continuación, haz clic en el botón Crear que se encuentra en la esquina superior derecha.

addacontactform_22_en-US.png

Haz clic en Realizar una integración personalizada.

addacontactform_23_en-US.png

Selecciona Entrada de Webhooks.

addacontactform_24_en-US.png

Selecciona un canal existente o crea uno nuevo en el que se publicarán tus mensajes.

addacontactform_25_en-US.png

Copia la URL de Webhooks.

addacontactform_26_en-US.png

Modifica la configuración y las opciones como desees y haz clic en Guardar configuración.

addacontactform_27_en-US.png

A continuación vuelve al formulario de contacto y pega la URL de Webhooks en el campo Webhooks.Al final, haz clic en Aceptar para completar la configuración.

addacontactform_28_en-US.png

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

addacontactform_29_en-US.png

Si ve el mensaje en el canal seleccionado, enhorabuena, porque ya está todo configurado. Ahora recibirá un mensaje en Slack cada vez que se envíe un formulario de contacto.

addacontactform_30_en-US.png

Archivos adjuntos

Es posible adjuntar archivos a un formulario de contacto. Para ello, hay que crear un campo para adjuntar archivos en el formulario de contacto. Los enlaces a los archivos cargados están disponibles en el archivo de descarga de los envíos de los formularios, así como en cualquiera de las integraciones de estos, como por ejemplo Webhooks y Hojas de cálculo de Google.

Pasos

Añade campos a cualquier formulario de contacto.

addacontactform_31_en-US.png

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

addacontactform_32_en-US.png

En el formulario se incluirá un enlace para cargar archivos.

addacontactform_33_en-US.png

Diseño

Abre el editor de diseño haciendo clic en la pestaña de diseño de la esquina superior izquierda o haciendo clic con el botón derecho en el complemento y seleccionando "Editar diseño" para cambiar el diseño del botón, los elementos, el marco y el espaciado. 

addacontactform_34_en-US.png

Presentación

Haz clic en la pestaña Presentación y, a continuación, haz clic en el icono de la presentación para elegir otro diseño para el formulario de contacto. Cambia la alineación del formulario haciendo clic en Izquierda o Derecha, dependiendo de cómo desees que se alineen los espacios de los campos.

addacontactform_35_en-US.png

Elemento

Haz clic en la pestaña Elemento para modificar el estilo y el texto de los campos, así como el estilo y el texto del botón. Puedes realizar modificaciones en el diseño de los campos y el botón como, por ejemplo, el color de fondo y los estilos de los bordes; así como en el texto del campo y el botón, como el tamaño, la fuente, la alineación, etc. Con el botón "Volver al diseño general" puedes cancelar los cambios y volver al estilo general.

addacontactform_36_en-US.png

Marco

Haga clic en la pestaña Marco para modificar el estilo del marco. Puede cambiar el fondo añadiendo un color o una imagen, cambiar el estilo de texto de la notificación de envío, añadir un borde y personalizar la fuente del título del formulario.

addacontactform_37_en-US.png

Espaciado 

Haz clic en la pestaña Espaciado para realizar modificaciones en el espaciado interno y externo del formulario de contacto. Puedes obtener más información acerca del espaciado aquí.

addacontactform_38_en-US.png

Archivos adjuntos

Es posible adjuntar archivos a un formulario de contacto. Para ello, hay que crear un campo para adjuntar archivos en el formulario de contacto. Los visitantes dispondrán de un enlace para que carguen los archivos a través del formulario de contacto.

Para añadir esta opción al formulario:

  1. Añade un nuevo campo a cualquier formulario de contacto.
  2. Seleccione el archivo adjunto en el menú desplegable. Puede modificar el texto del marcador de posición para cambiar el nombre de este apartado.
  3. En el formulario se incluirá un enlace para cargar archivos.

Consideraciones

Los formularios de contacto son una excepcional herramienta para obtener información valiosa de los visitantes y los clientes. Asegúrate de introducir tu dirección de correo electrónico en los Destinatarios en la configuración del envío para obtener una copia de la información enviada.

Recursos