Errores comunes al crear formularios de Google para clientes

Lamentablemente, el plugin japonés MW WP Form, muy utilizado durante mucho tiempo en WordPress, será descontinuado. Es una pena, ya que se trataba de un plugin de confianza adoptado por numerosas organizaciones y empresas.

Hay clientes que no pueden permitirse desarrollar por separado un formulario de correo seguro ni implementar en el frontend mediante un SaaS. En este contexto, recibimos la solicitud de cambiar el formulario de contacto a Google Forms. Pensando en aprovechar el diseño actual, decidimos integrar Google Form en él y lo implementamos.

La información necesaria está publicada en muchos sitios, así que tuvimos que verificarla paso a paso, pero la implementación en sí fue muy sencilla. Sin embargo, hubo algunas partes que nos dieron problemas, así que en esta ocasión queremos compartir esos puntos clave.

Proceso de trabajo

• Personalización de Google Forms en una página estática
• Redirección con JS a la página de confirmación tras enviar el formulario
• Envío de un correo automático de respuesta con GAS a los clientes que realizaron una consulta

Puntos problemáticos

• Al enviar el correo automático con GAS, "namedValues" al obtener las respuestas del formulario devuelve undefined
• La dirección de envío de los correos automáticos termina siendo mi propia dirección

  　

Sobre la personalización de Google Forms

Google Forms no solo se puede usar tal cual: también es posible integrarlo en un formulario creado con HTML/CSS y personalizar su diseño.

Este es el registro de visitas de recepción de nuestra empresa, y en su parte de formulario también hemos integrado Google Forms.

En esta ocasión omitimos la explicación sobre la integración y personalización en HTML, así como sobre cómo redirigir a una página de finalización tras el envío.

Un obstáculo, parte 1: al enviar el correo de respuesta automática, el "namedValues" que obtiene GAS de las respuestas del formulario
es undefined

Desde la hoja de cálculo vinculada a las respuestas de Google Forms, es posible implementar Google Apps Script (GAS) para enviar correos automáticos.

Cuando se pulsa el botón de envío del formulario de contacto, se activa un disparador que ejecuta un script que lee la información enviada desde la hoja de cálculo vinculada y la incluye en el correo.

function reply(e) {
  // フォームの回答を取得
  const name = e.namedValues['お名前'][0];
  const email = e.namedValues['メールアドレス'][0];

  
  // 自動返信メール件名
  const subject = '【テスト】お問い合わせありがとうございます';
      
  // 自動返信メール本文
  const body = name + '様\n' +
    '\n' +
    '下記の内容で申し込みを受付いたしました。\n' +
    '\n' +
    '【お名前】\n' +
    name + '\n' + 
    '\n' +
    '【メールアドレス】\n' +
    email + '\n' ;
  
  // メール送信
  MailApp.sendEmail({
    to: email,　 
    subject: subject,
    body: body 
  });
}

Pensábamos que el script enviaría el correo sin problemas, pero se produjo un error.

TypeError: Cannot read properties of undefined (reading 'お名前')at reply(reply:3:29)

No se encontró el primer campo "お名前". Y eso es todo.

¿Se estará obteniendo bien el e...? Lo compruebo abajo.

function reply(e) {
  Logger.log(JSON.stringify(e)); 
}

Devolvió null. ¿Por qué?

Al investigar el objeto de evento de GAS, namedValues...

Nota: use este activador de envío de formulario junto con SpreadsheetTriggerBuilder.

Parece que solo se pueden usar activadores para hojas de cálculo, así que en esta ocasión usaré response.

function reply(e) {
  // フォームの回答を取得
  const responses = e.response.getItemResponses();
  let name = '';
  let email = '';
  
  // 回答をループして必要な項目を抽出
  responses.forEach(response => {
    const itemTitle = response.getItem().getTitle(); // 質問のタイトルを取得
    const answer = response.getResponse(); // 回答を取得

    if (itemTitle === 'お名前') {
      name = answer;
    } else if (itemTitle === 'メールアドレス') {
      email = answer;
    }
  });

  // 自動返信メール件名
  const subject = '【テスト】お問い合わせありがとうございます';
  
  // 自動返信メール本文
  const body = name + '様\\n' +
    '\\n' +
    '下記の内容で申し込みを受付いたしました。\\n' +
    '\\n' +
    '【お名前】\\n' +
    name + '\\n' + 
    '\\n' +
    '【メールアドレス】\\n' +
    email + '\\n';
  
  // メール送信
  MailApp.sendEmail({
    to: email,　 
    subject: subject,
    body: body 
  });
}

Hay que tener cuidado con el argumento e de este evento, ya que sus propiedades y métodos varían según si el activador se configura en Google Forms o en Hojas de cálculo.

• GoogleForms

  e.response.getItemResponses()

• Hoja de cálculo

  e.values　e.namedValues

¡El correo se envió correctamente con el script reescrito!

...Pero al revisarlo bien, la dirección del remitente es mi propia dirección. Si sigue así, los correos automáticos se enviarán a los clientes desde mi dirección.

Problema que tuve, parte 2:
la dirección del remitente de los correos automáticos termina siendo mi dirección

• GAS siempre requiere configurar con qué cuenta de Google se ejecuta.
• Cuando GAS envía correos, estos se envían desde el Gmail de quien ejecuta el script.

En esta ocasión, implementé la función invitándome con permisos de edición en Google Forms.
Actualmente, quien ejecuta el script de los correos automáticos soy yo, por lo que los correos se envían desde mi dirección.

Para que el remitente sea la cuenta del cliente, hay que volver a configurarlo con la cuenta propietaria. Además, si el cliente solicita que el remitente sea su dirección exclusiva de consultas, [email protected], ¿qué hay que configurar para lograrlo...?

Solución

• Pedir al cliente que configure el alias [email protected] en su cuenta de Gmail.
• Volver a configurar el activador con la cuenta propietaria
• Añadir la dirección de correo con dominio propio a la cuenta; y en el script, agregar la opción from a MailApp.sendEmail() e indicar la dirección

GmailApp.sendEmail(email, replySubject, body, {
    from: 'info＠example.com'  // 追加した送信元アドレス
  });

Añadir una dirección de correo con dominio propio ¿Qué es?

Al agregar una cuenta, podrás enviar correos desde la dirección [email protected].
Es decir, al enviar desde Gmail podrás elegir un remitente llamado "[email protected]". Funciona como una subdirección.

Si no agregas una cuenta, mientras uses una cuenta de Gmail, no podrás personalizar libremente el remitente.
En ese caso, será necesario utilizar un servidor SMTP externo (por ejemplo, SendGrid o Amazon SES).

Por lo tanto, el flujo más sencillo y eficaz es:
pedir al propietario de la cuenta que agregue la dirección [email protected] para consultas, y después configurar el activador desde la cuenta del propietario.

Ten en cuenta que los correos automáticos se enviarán como Gmail y se acumularán en la carpeta de "Enviados".
Si no quieres que la carpeta de enviados se llene, puede ser buena idea crear una cuenta dedicada.

Conclusión

Google Forms tiene su propia función básica de envío automático, pero no permite personalizar el asunto ni el cuerpo del correo.
Con extensiones externas, la versión gratuita tiene un límite de 20 respuestas automáticas por día.
En cambio, GAS permite crear una solución flexible y escalable con bajo coste.

Ventajas de usar GAS

1. Personalización de correos sencilla
   • El contenido y los destinatarios del correo se pueden cambiar automáticamente según las respuestas del formulario.
   • También permite enviar correos con diseño HTML, para que queden con una apariencia cuidada.
2. Integración con servicios de Google
   • Guarde automáticamente las respuestas del formulario en Google Sheets para facilitar la gestión y el análisis de datos.
   • Cree eventos automáticamente en Google Calendar y configure recordatorios.
   • Organice y guarde archivos en Google Drive para gestionar sus datos de forma sencilla.
3. Sin costes adicionales
   • Disponible sin costo dentro de Google Workspace.
   • Al no depender de servicios externos, puede operarlo con un bajo coste.
4. Automático y rápido
   • Envíe correos y guarde datos al instante después de cada respuesta del formulario.
   • También es posible ejecutar varios procesos a la vez.
5. Gestión segura de datos
   • Como el procesamiento se completa dentro de la cuenta de Google, hay menos preocupación por que los datos se filtren al exterior.
   • La seguridad también está bien cuidada, así que se puede usar con tranquilidad.
6. Se puede cambiar la forma de uso con flexibilidad
   • La configuración se puede reutilizar fácilmente en nuevos formularios.
   • Con solo modificar un poco el código, se pueden añadir nuevas funciones o personalizarlo.

Al utilizar GAS, se logra flexibilidad, escalabilidad y buena relación coste-eficacia, y se puede operar de forma segura dentro del ecosistema de servicios de Google. Es una opción muy potente cuando se necesitan procesos detallados o personalizaciones basadas en el contenido de las respuestas.

En esta ocasión no estaba incluida la pantalla de confirmación en el alcance, así que no la implementamos. Nos gustaría probarla si surge una solicitud en el futuro. En ese momento escribiré un artículo a modo de apuntes.

Si tiene alguna dificultad con la modificación o migración de formularios de contacto, no dude en consultarnos.

Sitio de referencia en Zenn: artículo de ryotoitoi: https://zenn.dev/ryotoitoi/articles/3cedb115d816e5