WebページにGoogleフォーム風のお問い合わせフォームを追加する方法

const SHEET_NAME = 'お問い合わせ';
const NOTICE_EMAIL = 'your@example.com'; // 通知が不要なら空文字にする

function doPost(e) {
  const lock = LockService.getScriptLock();
  lock.waitLock(10000);

  try {
    const sheet = SpreadsheetApp
      .getActiveSpreadsheet()
      .getSheetByName(SHEET_NAME);

    const params = e.parameter;

    // 空の項目は空文字として扱う
    const name = params.name || '';
    const email = params.email || '';
    const category = params.category || '';
    const message = params.message || '';
    const source = params.source || '';

    // 簡単なスパム対策。HTML側の隠し項目に入力があれば保存しない
    if (params.website) {
      return createResponse({ result: 'ok' });
    }

    sheet.appendRow([
      new Date(),
      name,
      email,
      category,
      message,
      source,
    ]);

    if (NOTICE_EMAIL) {
      MailApp.sendEmail({
        to: NOTICE_EMAIL,
        subject: 'Webサイトからお問い合わせがありました',
        body: [
          `お名前: ${name}`,
          `メールアドレス: ${email}`,
          `相談内容: ${category}`,
          '',
          message,
        ].join('n'),
      });
    }

    return createResponse({ result: 'ok' });
  } catch (error) {
    return createResponse({ result: 'error', message: error.message });
  } finally {
    lock.releaseLock();
  }
}

function createResponse(data) {
  return ContentService
    .createTextOutput(JSON.stringify(data))
    .setMimeType(ContentService.MimeType.JSON);
}

<form id="contact-form" class="contact-form">
  <label>
    お名前
    <input type="text" name="name" autocomplete="name" required>
  </label>

  <label>
    メールアドレス
    <input type="email" name="email" autocomplete="email" required>
  </label>

  <label>
    相談内容
    <select name="category" required>
      <option value="">選択してください</option>
      <option value="Webサイト制作">Webサイト制作</option>
      <option value="WordPress構築・改修">WordPress構築・改修</option>
      <option value="サイト運用・保守">サイト運用・保守</option>
      <option value="その他">その他</option>
    </select>
  </label>

  <label>
    お問い合わせ内容
    <textarea name="message" rows="8" required></textarea>
  </label>

  <!-- スパム対策用。通常のユーザーには見せない -->
  <label class="form-trap">
    Webサイト
    <input type="text" name="website" tabindex="-1" autocomplete="off">
  </label>

  <input type="hidden" name="source" value="example.com/contact">

  <button type="submit">送信する</button>
  <p id="form-status" role="status"></p>
</form>

<script>
const endpoint = 'YOUR_APPS_SCRIPT_WEB_APP_URL';
const form = document.getElementById('contact-form');
const statusText = document.getElementById('form-status');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  statusText.textContent = '送信中です';

  try {
    const formData = new FormData(form);

    await fetch(endpoint, {
      method: 'POST',
      body: formData,
      mode: 'no-cors',
    });

    form.reset();
    statusText.textContent = '送信しました。お問い合わせありがとうございます。';
  } catch (error) {
    statusText.textContent = '送信できませんでした。時間をおいて再度お試しください。';
  }
});
</script>

.contact-form {
  display: grid;
  gap: 16px;
  max-width: 640px;
}
.contact-form label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font: inherit;
}
.contact-form button {
  width: fit-content;
  padding: 12px 24px;
  border: 0;
  border-radius: 4px;
  background: #111;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.form-trap {
  position: absolute;
  left: -9999px;
}

<label>
  電話番号
  <input type="tel" name="tel" autocomplete="tel">
</label>

const tel = params.tel || '';
sheet.appendRow([
  new Date(),
  name,
  email,
  tel,
  category,
  message,
  source,
]);