Formularios, botones y widgets

Módulo 4: Páginas, aspecto y funciones · Tiempo de lectura: 8 minutos

Objetivo de aprendizaje: Después de esta lección sabrá configurar el formulario de contacto (destinatario, confirmación, página de agradecimiento, control de spam, boletín y método de envío), colocar botones flotantes de WhatsApp y de contacto e insertar un widget de otro servicio. También sabrá cuándo conviene usar Código propio y HTML propio.

Conceptos clave: formulario de contacto, destinatario, correo de confirmación, página de agradecimiento, captcha, doble suscripción, método de envío, botón flotante, widget, código de inserción, consentimiento, Código propio, HTML propio

El formulario de contacto: dos lugares

Un formulario de su sitio tiene dos partes. El formulario en sí, con los campos que rellena el visitante, está en una página. Lo coloca con la sección Contacto (desde Secciones o Añadir sección) o a través del chat. Lo que ocurre cuando alguien hace clic en enviar se configura en Ajustes > Formularios. Ese panel lo configura siempre usted; el chat no lo hace.

El formulario siempre tiene los campos nombre, correo electrónico y mensaje. A través del chat puede añadir campos adicionales, como máximo ocho: un campo de texto, una lista desplegable (por ejemplo, "¿Interior o exterior?"), correo electrónico, teléfono, un campo de texto largo, una fecha o un número. No existe un campo para enviar un archivo o una foto. Si Schildersbedrijf Example quiere recibir fotos del trabajo, lo indica en el texto de agradecimiento: "No dude en enviarnos fotos a nuestra dirección de correo electrónico."

Importante: en el sitio gratuito sin paquete, el formulario se ve pero aparece en gris y no envía ningún correo. Los formularios solo envían de verdad cuando su sitio está en un paquete de AI Builder. Sin embargo, ya puede dejar preparados los ajustes que se explican a continuación; se usarán en cuanto los formularios funcionen.

Ajustes > Formularios

El panel tiene cinco bloques.

Recibir mensajes. En Enviar los mensajes a indique la dirección de correo a la que deben llegar los formularios enviados. Si lo deja vacío, llegan a la dirección de correo de su cuenta en WebOké. Rellénelo de forma consciente. En Asunto del correo elige el asunto (si lo deja vacío: "Nuevo mensaje a través de su web"). En Después de enviar elige Mostrar un agradecimiento con su propio texto, o Redirigir a una página: una página de agradecimiento que crea usted mismo y deja fuera del menú (lección 4.1). Así podrá medir más adelante cuántas veces se envía el formulario.

Enviar mediante. Cómo se envía el correo. Servidor de WebOké funciona de inmediato, con noreply@weboke.site como remitente. Se recomienda Su propia dirección de correo (SMTP): el correo sale entonces de su propio dominio y acaba con menos frecuencia en la carpeta de spam. Con Configurarlo por mí, el constructor crea esa dirección en su dominio. Dentro de su propia dirección de correo también puede elegir un servicio de correo, como Postmark, Brevo, Mailgun o SendGrid. En la lección 5.3 verá por qué el remitente es tan importante.

Confirmación al visitante. Active Enviar una copia al visitante y el visitante recibirá un correo de confirmación. A menudo es el primer mensaje que alguien recibe de usted. Usted elige el asunto, Su texto (con {naam} para el nombre del visitante), la Firma y si se incluye el mensaje enviado. El constructor aplica a su texto el diseño de su sitio, con su logotipo. Con Dejar que la IA escriba este texto obtiene una propuesta.

Bloquear el spam. Todo formulario tiene siempre un control invisible: un campo oculto y un límite de tiempo. Detiene la mayor parte del spam sin que los visitantes lo noten. Si aun así recibe mucho spam, elija un control adicional, un captcha: Cloudflare Turnstile o hCaptcha. Para ello crea una cuenta gratuita en ese servicio e introduce la Site key y la Secret key. Active un captcha solo cuando sea necesario: cada paso adicional le hace perder visitantes.

Boletín. Puede añadir al formulario una casilla con la que los visitantes se suscriben en Mailchimp, Laposta, Brevo o MailerLite. Solo se añade a quien marque la casilla por sí mismo. Siempre con doble suscripción: el visitante confirma primero a través de un correo. En Laposta y MailerLite usted mismo lo activa en ese servicio; el constructor le indica dónde. Sin doble suscripción, cualquiera podría añadir direcciones ajenas a su lista.

Además: un visitante puede enviar como máximo 5 mensajes por hora. Si tiene una política de privacidad, debajo del formulario aparece un enlace a ella. Un formulario recoge datos personales; lo que debe tener en orden para ello se explica en la lección 7.1.

Error frecuente: pruebe usted mismo el formulario después de cada cambio, desde una dirección distinta de la de recepción. Mire también en su carpeta de spam y compruebe si la confirmación llega al "visitante".

Botones flotantes

En Ajustes > Botones coloca botones que permanecen visibles en la parte inferior de cada página, a la derecha o a la izquierda (Esquina: Abajo a la derecha o Abajo a la izquierda).

• Número de WhatsApp: en formato internacional, con el prefijo del país (por ejemplo +34 para un número español o +31 para uno neerlandés) y sin el 0 inicial que algunos países usan. Si lo deja vacío, no habrá botón de WhatsApp. Puede añadir un Mensaje predefinido, por ejemplo "Me gustaría pedir un presupuesto para trabajos de pintura." El botón abre una conversación con su número.
• Botón de contacto flotante: abre su formulario de contacto en una ventana. El mensaje llega a la misma dirección que su formulario. Usted elige el Texto del botón.

En la vista previa, los botones aparecen algo más arriba que en su sitio real, para que no queden detrás del botón de ayuda del constructor.

Atención: un botón de WhatsApp promete una respuesta rápida. Si solo lee WhatsApp por la noche, es mejor que elija el botón de contacto.

Widgets de otros servicios

Un widget es un fragmento de otro servicio dentro de su página: un vídeo de YouTube, un mapa de Google Maps, un planificador de citas de Calendly, su Instagram, una lista de Spotify. En muchos servicios basta con el enlace; el constructor crea él mismo el reproductor o el formulario. Ejemplos: YouTube, Vimeo, Spotify, Calendly, Google Maps (basta con la dirección), Google Calendar, Instagram y TikTok (basta con su @nombre) y Formularios de Google. En otros servicios, como Salonized, Trustpilot o Bandcamp, pega el código de inserción: el fragmento de código que le da ese servicio para colocarlo en un sitio web.

Así se hace: dígalo en el chat junto con el enlace ("pon nuestro mapa de cómo llegar debajo del bloque de contacto, dirección calle Mayor 1"), pegue el código en el chat o elija la sección Widget en Secciones. El constructor reconoce el servicio, propone una altura y un título, y le avisa si algo no va a funcionar. Si deja que la IA lo coloque, se trata de una instrucción y consume ediciones; verá antes cuántas. Un widget ya colocado se modifica con Modificar código en el bloque de la vista previa.

Tres cosas que conviene saber:

1. Un widget solo se carga tras el consentimiento. Los servicios de terceros suelen instalar cookies o rastrear a los visitantes. Con el banner de cookies activado, un widget solo se carga cuando el visitante da su consentimiento para ese tipo de cookies. El servicio aparece automáticamente en su banner de cookies, en "Lo que se ejecuta ahora en su web". Revise después también su política de privacidad (lecciones 7.1 y 7.2).
2. Google Calendar debe ser público. Nadie más puede ver un calendario privado. En Google Calendar, haga público solo un calendario aparte con lo que los visitantes pueden ver, nunca su calendario personal.
3. El código inseguro no se publica. La IA no coloca en su sitio código que pueda reenviar datos de los visitantes, que oculte lo que hace o que cargue algo de un sitio web desconocido. Le explica el motivo.

Código propio y HTML propio, a grandes rasgos

Para usuarios avanzados hay dos lugares.

Código propio está al final de Ajustes > Integraciones: código que debe estar en todas las páginas, En el head de cada página o Al final de cada página. Por ejemplo, el script de carga de un servicio de chat o de un widget de reseñas. El constructor no revisa ese código ("No revisamos este código"). El banner de cookies bloquea los servicios conocidos hasta que hay consentimiento. Marque Este código es necesario solo para código que no rastrea a los visitantes, porque entonces se carga de inmediato. En la vista previa del constructor el código propio no se ejecuta; en su sitio real, sí. En el sitio gratuito el código propio no funciona. Para un ID de medición como el de Google Analytics no use Código propio, sino el campo fijo de Integraciones (lección 7.2).

HTML propio es una sección de Secciones. Pega su propio HTML y, si quiere, CSS, y lo modifica más adelante con Editar HTML. Los colores y las fuentes siguen su identidad visual. Aquí no funcionan los scripts, los iframes ni los formularios; para eso utilice un widget.

Use ambos solo cuando no haya otra opción: el código de terceros es un riesgo para la velocidad, la seguridad y la privacidad.

En el constructor: cómo hacerlo

1. Coloque la sección Contacto con formulario en su página de contacto.
2. Abra Ajustes > Formularios. Rellene Enviar los mensajes a.
3. En Enviar mediante, elija su propia dirección de correo, o déjelo en el servidor de WebOké hasta que su dominio esté listo (lección 5.3).
4. Active Enviar una copia al visitante y escriba su propio texto.
5. En Después de enviar, elija un agradecimiento o una página de agradecimiento.
6. Si lo necesita, coloque un botón de WhatsApp o de contacto en Ajustes > Botones.
7. Publique su sitio y envíe un mensaje de prueba.

Resumen

• El formulario está en una página; lo que ocurre con él se configura en Ajustes > Formularios.
• Rellene Enviar los mensajes a de forma consciente; como remitente, elija preferiblemente su propia dirección de correo.
• En el sitio gratuito el formulario no envía correo; adjuntar un archivo no es posible nunca.
• Los botones flotantes de WhatsApp y de contacto están en Ajustes > Botones.
• Los widgets solo se cargan tras el consentimiento; Código propio y HTML propio son para usuarios avanzados.

Cuestionario

Ejercicio

Ejercicio D4.3: Su formulario de contacto y un widget. Configure su formulario por completo y coloque un widget que aporte algo de verdad.

Lista de comprobación:

• [ ] sección Contacto con formulario en su página de contacto;
• [ ] Enviar los mensajes a rellenado con una dirección que lee a diario;
• [ ] método de envío elegido y entendido el porqué;
• [ ] confirmación al visitante con su propio texto;
• [ ] agradecimiento o página de agradecimiento configurados;
• [ ] un widget colocado (por ejemplo, un mapa o un planificador de citas) y comprobado que aparece en el banner de cookies;
• [ ] sitio publicado y mensaje de prueba enviado (solo con un paquete; en el sitio gratuito revise los ajustes).

Preguntas:

1. ¿A qué dirección llegan los mensajes de su formulario y con qué método de envío?
2. ¿Qué widget eligió, qué aporta a su visitante y qué ve un visitante que no da su consentimiento?
3. ¿Llegó su mensaje de prueba? ¿Llegó la confirmación al "visitante" o acabó en el spam?

Después de marcar "hecho" verá una respuesta de ejemplo: Schildersbedrijf Example envía los mensajes a info@example.com mediante su propia dirección de correo en el dominio; el widget es un mapa de Google Maps con la dirección, que solo se carga tras el consentimiento y, si no, muestra un recuadro con un botón para darlo; el mensaje de prueba llegó, la confirmación también, y no en el spam.

Para seguir leyendo

• Un formulario de contacto en su sitio web: enviar los campos por correo y evitar el spam
• Curso gratuito: El correo electrónico en orden: configuración y buena entrega 7.3: Correo desde su sitio web y formularios
• Curso gratuito: El correo electrónico en orden: configuración y buena entrega 7.2: Consentimiento, baja y una lista limpia
• Cómo usar el enlace para chatear (Servicio de ayuda de WhatsApp): https://faq.whatsapp.com/5913398998672934
• Create & manage a public Google calendar (Ayuda de Google Calendar, en inglés): https://support.google.com/calendar/answer/37083