【プラグインなし】WordPressお問い合わせフォームを超簡単に作成！GASでメール受信設定する方法

ブログでお問い合わせページを作りたい方は、次のようなフォームを使用してみてはいかがでしょうか。

バックエンドにGASを使用することで、メッセージをメールで受け取ることができます。
また、honeypotを使ったスパム対策も万全です。

以下の手順に従って、簡単で便利なお問い合わせフォームを作成してみてください。

（手順１）Google Appsスクリプト（GAS）の設定
（手順２）WordPress（お問い合わせページ）の作成
完成
おわりに

（手順１）Google Appsスクリプト（GAS）の設定

Googleアカウントにログインし、Googleドライブを開きます。
Googleドライブの左上にある「+ 新規」ボタンをクリックします。
「その他」にカーソルを合わせ、「Google Apps Script」を選択します。

Google Apps Script (GAS) の編集

以下のGASをエディタに貼り付けます。

function doPost(e) {
  try {
    const params = e.parameter;

    const name = params.name || '名前なし';
    const email = params.email || 'メールアドレスなし';
    const comment = params.comment || 'コメントなし';

    const address = 'your@email.com';

    const subject = `【お問い合わせ】${name} さんより`;
    const body = `以下の内容が送信されました。\n\n` +
                 `【名前】: ${name}\n` +
                 `【メール】: ${email}\n` +
                 `【コメント】:\n${comment}`;

    GmailApp.sendEmail(address, subject, body, {
      replyTo: email.includes('@') ? email : ''
    });

    return ContentService.createTextOutput('OK').setMimeType(ContentService.MimeType.TEXT);
  } catch (error) {
    return ContentService.createTextOutput('Error: ' + error.message);
  }
}

赤文字の箇所は、お好きな言葉に変更できます。

　　↓　　↓　　コピペ　　↓　　↓

メールアドレスを修正します。
- const address = "your@email.com";の部分を、実際にメールを受信したいあなたのメールアドレスに修正してください。

GASの保存:
- 上部のフロッピーディスクのアイコン（保存ボタン）をクリックします。

GASをウェブアプリとしてのデプロイ

エディタの右上にある「デプロイ」ボタンをクリックし、「新しいデプロイ」を選択します。

以下の設定を行います。
- 種類の選択：「ウェブアプリ」を選択します。
- 説明（省略可）：「問合せメールアプリ」など、分かりやすい説明を入力します。
- 次のユーザーとして実行：「自分（オーナーのGoogleアカウント名）」を選択します。
- アクセスできるユーザー：「全員」を選択します。
- 「デプロイ」ボタンをクリックします。

初回デプロイ時、Googleからアクセス承認を求められます。Googleアカウントを選択して権限を許可してください。

※承認を求められたら、「Advanced」、あるいは「詳細」→「Go to ～(Unsafe)」、あるいは「～に移動」→「Allow」、あるいは「許可」

デプロイが成功すると、「ウェブアプリのURL」が発行されます。このURLをコピーして控えておきます。
このURLは後でWordPress側のスクリプトで使います。

デプロイ後、GASを修正した場合

GASを修正・保存したら、右上の「デプロイ」ボタンを再度クリックし、「デプロイを管理」を選択します。
右上の鉛筆ボタン（編集）をクリックし、バージョン項目で「新しいバージョン」を選択して再デプロイすることで、更新が反映されます。

（手順２）WordPress（お問い合わせページ）の作成

WordPressのお問い合わせページ（固定ページ）の編集画面を開きます。
任意の箇所に「カスタムHTML」ブロックを追加します。

以下のスクリプトを「カスタムHTML」ブロックに貼り付けます。

<style>
  /* 入力フィールドとテキストエリアのスタイル */
  .form-input, 
  .form-textarea {
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    margin-bottom: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 16px;
  }

  /* ボタンのスタイル */
  .form-button {
    background-color: #4CAF50;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .form-button:hover {
    background-color: #45a049;
  }

  /* 任意項目のスタイルを追加 */
  .optional {
    font-weight: normal;
    color: #777;
    font-size: 0.9em;
  }

  /* レスポンスメッセージのスタイル */
  #responseMessage {
    margin-top: 10px;
    color: green;
    font-weight: bold;
  }
  
  /* レスポンシブ対応 */
  @media screen and (max-width: 600px) {
    #contactForm {
      padding: 16px;
    }
    .form-button {
      width: 100%;
    }
  }
</style>

<form id='contactForm'>
  <label for='name'>名前<span class='optional'>(任意)</span>：</label><br>
  <input type='text' name='name' id='name' class='form-input' placeholder='お名前'>
  <br>

  <label for='email'>メールアドレス：</label><br>
  <input type='email' name='email' id='email' class='form-input' placeholder='your@email.com' required>
  <br>

  <label for='comment'>お問い合わせ：</label><br>
  <textarea name='comment' id='comment' class='form-textarea' rows='8' placeholder='メッセージを入力…' required></textarea>
  <br>

  <input type='text' name='_honey' style='display:none'>

  <button type='submit' id='submitButton' class='form-button'>送信する</button>
</form>

<div id='responseMessage'></div>

<script>
  document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault(); // ページ遷移を防ぐ

    const form = e.target;
    const formData = new FormData(form);
    const params = new URLSearchParams();

    for (const [key, value] of formData.entries()) {
      params.append(key, value);
    }

    // スパム対策の_honeyフィールドが空でない場合は送信しない（honeypot）
    if (params.get('_honey')) {
        document.getElementById('responseMessage').textContent = 'スパムを検知しました。';
        document.getElementById('responseMessage').style.color = 'orange';
        return;
    }
    // デプロイしたGASのURLを設定
　　// ★このURLをデプロイで発行された「ウェブアプリのURL」に置き換えてください★
    const gasWebAppUrl = 'ここにコピーしたGASウェブアプリのURLを貼り付ける';

    fetch(gasWebAppUrl, {
      method: 'POST',
      body: params,
    })
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.text();
    })
    .then(text => {
      if (text === 'OK') {
        document.getElementById('responseMessage').textContent = 'メッセージを送信しました。ありがとうございました！';
        document.getElementById('responseMessage').style.color = 'green';
        form.reset();
      } else {
        document.getElementById('responseMessage').textContent = `送信中にエラーが発生しました: ${text}`;
        document.getElementById('responseMessage').style.color = 'red';
      }
    })
    .catch(error => {
      document.getElementById('responseMessage').textContent = '送信中にエラーが発生しました。もう一度お試しください。';
      document.getElementById('responseMessage').style.color = 'red';
      console.error('送信エラー:', error);
    });
  });
</script>