Topics

MW WP Form, un plugin japonés popular desde hace mucho tiempo en WordPress, será descontinuado. Es una decepción, ya que es un plugin confiable que ha sido adoptado por muchas organizaciones y sitios web corporativos.

Algunos clientes no pueden permitirse desarrollar un formulario de correo electrónico seguro independiente ni implementar una solución frontend mediante SaaS. Uno de ellos nos solicitó que cambiáramos su formulario de contacto a Formularios de Google. Decidimos integrar un Formulario de Google sin perder el diseño actual, ¡y lo hicimos!

La información está disponible en varios sitios web, así que tuve que investigarla, pero la configuración en sí fue muy sencilla. Hubo algunas partes un poco difíciles, así que me gustaría compartirlas con ustedes hoy.

Ingeniería de operaciones

• Personalizar GoogleForms en una página estática
• Transición a la página de finalización de envío mediante JS después de enviar el formulario
• Envíe correos electrónicos de respuesta automática a los clientes que realicen consultas mediante GAS

Puntos de tropiezo

• GAS para enviar correos electrónicos de respuesta automáticaObtener respuestas del formulario "namedValues" no está definido
• La dirección del remitente del correo electrónico automatizado es la mía.

  　

Acerca de la personalización de Formularios de Google

¡No solo puedes instalar Google Forms tal como está, sino también incorporarlo a formularios creados con HTML/CSS y personalizar el diseño!

Este es nuestro formulario de gestión de visitantes, y también hemos incorporado Formularios de Google en la sección de formularios.

No entraremos en detalles sobre cómo personalizar la incrustación HTML o cómo pasar a la página de finalización después del envío.

Punto de tropiezo #1
GAS para enviar correos electrónicos de respuesta automáticaObtener respuestas del formulario "namedValues" no está definido

Puede implementar Google AppScript (GAS) para enviar correos electrónicos automatizados desde una hoja de cálculo vinculada a las respuestas de Formularios de Google.

Cuando se presiona el botón Enviar en el formulario de consulta, se ejecuta un script que lee la información enviada desde 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 
  });
}

Pensé que podía enviar un correo electrónico con este script, pero recibí un error.

TypeError: No se pueden leer las propiedades de undefined (que lee 'Su nombre') en respuesta (respuesta: 3:29)

No se puede encontrar el primer elemento "Nombre".

¿Has podido obtener la e-mail? Consulta a continuación.

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

Devolvió un valor nulo. ¿Por qué?

Objeto de evento GASnamedValuesCuando lo miré...

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

¡Aparentemente, aquí solo se pueden usar activadores para hojas de cálculo! Así que esta vez...responseUsar.

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

El argumento e de este evento es la configuración del disparador.GoogleFormsmosquitoHoja de cálculoTenga en cuenta que el contenido (propiedades y métodos) variará según el método que utilice.

• GoogleForms

  e.response.getItemResponses()

• Hoja de cálculo

  e.values　e.namedValues

¡El correo electrónico llegó exitosamente con el script reescrito!

Sin embargo, si te fijas bien, verás que la dirección del remitente es la mía. Si esto continúa así, los clientes recibirán correos electrónicos automáticos desde mi dirección.

Punto de tropiezo #2
La dirección del remitente del correo electrónico automatizado es la mía.

• Al utilizar GAS, debes configurar "bajo qué cuenta de Google se ejecutará".
• Al enviar un correo electrónico desde GAS, se enviará desde el "Gmail del ejecutor"

Esta vez lo implementé invitando a mi cuenta a editar el Formulario de Google.
Actualmente, el ejecutor de scripts para el correo electrónico automatizado está configurado para mí, por lo que el correo electrónico se envía desde mi dirección.

Para que este sea el remitente del cliente, debe reconfigurarlo en la cuenta del propietario. También, "Dirección de consulta del cliente".info@example.comSi desea configurar "como remitente", ¿cómo lo configura?

Solución alternativa

• La dirección de Gmail del cliente tendrá una dirección de consulta.info@example.comPídales que establezcan un alias para esto.
• Reconfigurar los ajustes de activación en la cuenta del propietario
• Añade una dirección de correo electrónico con tu propio dominio a tu cuenta、GuionMailApp.sendEmail()Añade el from opcional y escribe la dirección

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

Agregar su propia dirección de dominioQué es

Al agregar una cuenta,info@example.comPuedes enviarlo utilizando la dirección de correo electrónico.
En otras palabras, al enviar desde Gmail,info@example.comLuego puedes seleccionar un nombre de remitente como ". Es como una subdirección.

Si no agrega una cuenta, siempre que utilice una cuenta de Gmail,No puedes personalizar libremente el remitente。
En ese caso, necesitará utilizar un servidor SMTP externo (por ejemplo, SendGrid, Amazon SES).

Así que la manera más sencilla y mejor es
Para consultas a la cuenta del propietarioinfo@example.comAgregar la dirección → Configurar activadores en la cuenta del propietario.

Tenga en cuenta que los correos electrónicos enviados automáticamente se enviarán como Gmail y se acumularán en la carpeta "Enviados".
*Si no desea que su carpeta de Enviados se llene, puede crear una nueva cuenta específicamente para este propósito.

resumen

Google Forms tiene una función de envío automático sencilla, pero no es posible personalizar el asunto ni el cuerpo del correo electrónico.
Otros: Si utiliza una extensión, la versión gratuita tiene un límite diario de 20 respuestas automáticas.
Por otro lado, GAS le permite construir una solución altamente flexible y escalable ¡manteniendo los costos bajos!

Beneficios del uso de GAS

1. Personalización de correo electrónico fácil de usar
   • El contenido y el destinatario del correo electrónico se pueden cambiar automáticamente en función de las respuestas proporcionadas en el formulario.
   • También puedes enviar correos electrónicos diseñados en formato HTML, lo que los hace lucir geniales.
2. Se puede vincular con los servicios de Google.
   • Los datos de respuesta se guardan automáticamente en Hojas de cálculo de Google para facilitar su compilación y gestión.
   • Crea automáticamente eventos y establece recordatorios en Google Calendar.
   • Organice y almacene archivos en Google Drive para facilitar la gestión de datos.
3. Sin costo
   • Disponible de forma gratuita en Google Workspace.
   • Como no es necesario utilizar servicios externos, se puede operar a bajo coste.
4. Movimiento automático y rápido
   • Después de completar el formulario, puede enviar un correo electrónico o guardar los datos inmediatamente.
   • También es posible ejecutar múltiples procesos a la vez.
5. Gestión segura de datos
   • Dado que el procesamiento se realiza dentro de su cuenta de Google, existe poco riesgo de que los datos se filtren al exterior.
   • La seguridad también es sólida, por lo que puedes estar tranquilo.
6. Uso flexible
   • Puede reutilizar fácilmente las configuraciones en formularios nuevos.
   • Con solo cambiar un poco el código, puedes agregar nuevas funciones y personalizarlo.

Mediante el uso de GAS,Flexible, escalable y rentableLo logra operando de forma segura dentro del ecosistema de Google, lo que lo convierte en una opción poderosa, especialmente cuando se requiere un procesamiento detallado y personalización en función de las respuestas.

Esta vez, no se incluyó una pantalla de confirmación en el alcance, por lo que no la implementé, pero me gustaría probarla la próxima vez si llega una solicitud. ¡Escribiré otro artículo al respecto como nota cuando eso suceda!

Si tiene algún problema al modificar o migrar su formulario de consulta, ¡contáctenos!

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