Errores comunes al crear formularios con Google Form

El complemento de fabricación japonesa MW WP Form, que fue ampliamente utilizado en WordPress durante mucho tiempo, será descontinuado. Es una pena que un complemento tan confiable haya sido adoptado por muchas organizaciones y sitios corporativos.

Algunos clientes no pueden permitirse el costo de desarrollar un formulario de correo electrónico seguro por separado o implementar una solución SaaS en el frontend. En esta situación, recibimos una solicitud para cambiar el formulario de contacto a Google Forms. Decidimos mantener el diseño actual e implementarlo mediante la incrustación de Google Forms.

Aunque había documentación disponible en varios sitios para consultar, la implementación en sí fue muy sencilla. Hubo algunas partes que resultaron un poco complicadas, así que en esta ocasión me gustaría compartir esos puntos clave.

Proceso de trabajo

• Personalizar Google Forms para una página estática
• Redirigir a la página de confirmación de envío con JavaScript después del envío del formulario
• Enviar correos electrónicos de respuesta automática a los clientes que se comuniquen con nosotros mediante GAS

Puntos donde nos atascamos

• En GAS para enviar correos de respuesta automática, "namedValues" para obtener respuestas del formulario es undefined
• La dirección remitente del correo de envío automático se convierte en mi dirección

  　

Acerca de la personalización de Google Forms

Google Forms no solo se puede implementar tal cual, sino que también se puede incrustar en formularios creados con HTML/CSS para personalizar el diseño.

Este es nuestro registro de gestión de visitantes, y también hemos incrustado Google Forms en la sección del formulario.

Omitiremos esta vez la explicación sobre la personalización de la incrustación en HTML y el método de transición a la página de finalización después del envío.

Punto donde tuvimos dificultades 1:
En GAS para enviar correos de respuesta automática, "namedValues" para obtener respuestas del formulario es undefined

Puede implementar Google AppScript (GAS) en la hoja de cálculo vinculada a las respuestas de Google Forms para enviar correos de envío automático.

Cuando se presiona el botón enviar del formulario de contacto, se ejecuta un script que lee la información de la hoja de cálculo vinculada y la refleja en el correo electrónico.

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 
  });
}

Aunque pensábamos que el correo se enviaría con este script, resultó en un error.

TypeError: Cannot read properties of undefined (reading 'Nombre')at reply(reply:3:29)

No se encontró el primer elemento "Nombre".

¿Se estará obteniendo 'e' correctamente? Vamos a verificarlo a continuación.

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

Devolvió null. ¿Por qué?

Investigué sobre el objeto de evento namedValues de GAS...

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

¡Parece que solo se pueden usar activadores para hojas de cálculo! Por lo tanto, esta vez 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 
  });
}

Tenga en cuenta que el parámetro 'e' de este evento tiene diferentes propiedades y métodos dependiendo de si la configuración del activador es GoogleForms o Hoja de cálculo.

• GoogleForms

  e.response.getItemResponses()

• Hoja de cálculo

  e.values　e.namedValues

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

Sin embargo, si miramos más de cerca, el remitente resulta ser mi dirección. En este estado, los correos de envío automático se entregarían a los clientes desde mi dirección.

Problema encontrado 2:
El remitente del correo de envío automático termina siendo mi dirección

• GAS siempre requiere configurar «bajo qué cuenta de Google se ejecutará».
• Al enviar correos desde GAS, se envían desde el «Gmail del ejecutor».

En esta ocasión, me invitaron a editar el formulario de Google e implementé la solución.
Actualmente, dado que el ejecutor del script de envío automático soy yo, los correos se envían desde mi dirección.

Para usar la dirección del cliente como remitente, es necesario reconfigurar con la cuenta del propietario. Además, si hay una solicitud como «¿Podrías enviar desde la dirección de contacto del cliente info@example.com?», ¿cómo se configura?

Solución

• Pedir que la dirección de contacto del cliente info@example.com se configure como alias en la dirección de Gmail del cliente.
• Reconfigurar la configuración del trigger con la cuenta del propietario.
• Agregar una dirección de correo de dominio personalizado a la cuenta, y añadir la opción from al MailApp.sendEmail() del script con la dirección.

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

Agregar una dirección de dominio personalizado¿Qué es?

Al agregar una cuenta, puedes enviar correos usando la dirección de correo info@example.com.
En otras palabras, al enviar desde Gmail, podrás seleccionar "info@example.com" como la dirección remitente. Es similar a usar una subdirección.

Si no agregas una cuenta, mientras uses una cuenta de Gmail, no podrás personalizar libremente la dirección remitente.
En ese caso, necesitarás utilizar un servidor SMTP externo (por ejemplo: SendGrid, Amazon SES).

Por lo tanto, el flujo más simple y óptimo es
agregar la dirección info@example.com para consultas en la cuenta del propietario → configurar el disparador en la cuenta del propietario.

Ten en cuenta que los correos de envío automático se enviarán como Gmail, por lo que se acumularán en la carpeta "Enviados".
Si prefieres no llenar la carpeta de envío, también puedes crear una cuenta dedicada nueva.

Conclusión

Google Forms en sí tiene una función básica de envío automático, pero no permite personalizar el asunto ni el cuerpo del correo.
Si usas otras extensiones, la versión gratuita tiene un límite de 20 respuestas automáticas por día.
Por otro lado, GAS te permite crear una solución flexible y escalable mientras mantienes los costos bajos.

Ventajas de usar GAS

1. Personalización de correo fácil de usar
   • Puedes cambiar automáticamente el contenido y la dirección del correo que se envía según las respuestas del formulario.
   • También puedes enviar correos diseñados en formato HTML, lo que resulta en una presentación más atractiva.
2. Integración con servicios de Google
   • Los datos de respuesta se guardan automáticamente en Google Sheets, lo que facilita la tabulación y la gestión.
   • Crea automáticamente eventos en Google Calendar y configura recordatorios.
   • Organiza y guarda archivos en Google Drive para una gestión de datos más sencilla.
3. Sin costos adicionales
   • Disponible de forma gratuita dentro de Google Workspace.
   • No necesitas servicios externos, por lo que puedes operar con costos reducidos.
4. Rápido y automatizado
   • Puedes enviar correos electrónicos y guardar datos inmediatamente después de recibir respuestas del formulario.
   • También es posible ejecutar múltiples procesos a la vez.
5. Gestión segura de datos
   • El procesamiento se completa completamente dentro de la cuenta de Google, por lo que hay poco riesgo de fuga de datos hacia el exterior.
   • La seguridad es sólida, así que puedes estar tranquilo.
6. Adaptabilidad flexible
   • Los ajustes se pueden reutilizar fácilmente incluso en nuevos formularios.
   • Con solo cambiar un poco el código, puedes agregar nuevas funciones o realizar personalizaciones.

Al utilizar GAS, se logra flexibilidad, escalabilidad y eficiencia de costos, permitiendo una operación segura dentro del ecosistema de servicios de Google. Es una opción particularmente potente cuando se requieren procesamiento detallado y personalizaciones basadas en el contenido de las respuestas.

Esta vez no lo implementamos porque la pantalla de confirmación no estaba en el alcance, pero si hay una solicitud la próxima vez, me gustaría intentarlo. ¡Escribiré un artículo de referencia entonces!

Si necesitas ayuda con mejoras de formularios de contacto o migraciones, por favor contáctanos.

Sitio de referencia Zenn Artículo de ryotoitoiさん: https://zenn.dev/ryotoitoi/articles/3cedb115d816e5