問合せフォームの内容を、PHPでメール送信&Googleドキュメントにも追加する方法

問合せフォームの内容をPHPでメール送信し、Googleドキュメントにも追加する方法

今回は、

  • PHPのSendGrid公式ライブラリを使った、問合せフォームのサンプル
  • Zapierを使った、問合せフォームの内容をGoogleドキュメントにも追加する方法

についてご紹介します。

前提条件

  • SendGrid のアカウント
  • PHPの実行環境(PHP5.3以上)
  • Webサーバ
  • composer
  • git
  • Zapier のアカウント(あれば)

本記事の内容はMac上に環境構築したものですが、その他のOSでも基本的に手順は同じです。Windowsの場合、cpはcopyコマンドに読み替えてください。

準備

コードサンプルをリポジトリからクローンします。

git clone https://github.com/sendgridjp/sendgridjp-php-example-contact-form.git

リポジトリ内に移動して.env.exampleをコピーします。

cd sendgridjp-php-example-contact-form
cp .env.example .env

.envファイルを編集(後述)します。

composerによる依存関係の解決を行います。

composer install

.envファイルの編集

.envファイルは以下のような内容になっています。

SENDGRID_USERNAME=your_username
SENDGRID_PASSWORD=your_password
TO=you@youremail.com
FROM=you@youremail.com
  • SENDGRID_USERNAME
    SendGridのユーザ名を指定してください。
  • SENDGRID_PASSWORD
    SendGridのパスワードを指定してください。
  • TO
    フォームの内容を送信する宛先を指定してください。
  • FROM
    フォームの内容を送信する際のFromアドレスを指定してください。

コードの実行

この問合せフォームは、HTML、CSS、PHPで構成されています。

入力フォームForm.html

問合せ内容を入力してSendボタンをクリックすると、formの内容を mailer.php にPOSTします。スタイルを変更する場合は、Form.css をカスタマイズしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>問合せフォームサンプル</title>
<link rel="stylesheet" href="Form.css" />
</head>
<body>

<!-- 問合せフォーム ▼ここから▼ -->
<div class="section-page-landing" id="contact">
	<div class="inner-section">
		<div class="contain">
		<center><h2>問合せフォーム</h2>
		<form class="contact" action="mailer.php" method="post">

		<!-- 入力項目をカスタマイズする場合は以下を変更します。mailer.phpのPOSTフィールドも合わせて変更してください。 -->
		<p>Name:</p>
		<input type="text" name="name" />

		<p>E-mail:</p>
		<input type="text" name="email" />

		<p>Subject:</p>
		<input type="text" name="subject" />

		<p>Message:</p>
		<textarea name="message" syle="width: 45%; text-align: center;">Please leave a short message here</textarea></p>

		<input class="send" type="submit" value="Send"> <!-- Send button-->
		</form>
		</center>
		</div>
	</div>
</div>
<!-- 問合せフォーム ▲ここまで▲ -->

</body>
</html>

メール送信PHPmailer.php

フォームの内容をメールで送信します。メール送信が完了すると thanks.html にリダイレクトします。

<?php
require 'vendor/autoload.php';
Dotenv::load(__DIR__);

$sendgrid_username = $_ENV['SENDGRID_USERNAME'];
$sendgrid_password = $_ENV['SENDGRID_PASSWORD'];
$from              = $_ENV['FROM'];
$to                = $_ENV['TO'];

$name = $_POST['name'];
$emailadd = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];

$sendgrid = new SendGrid($sendgrid_username, $sendgrid_password, array("turn_off_ssl_verification" => true));
$email    = new SendGridEmail();
$email->addTo($to)->
       setFrom($from)->
       setFromName("問合せフォーム")->
       setSubject("[ContactForm] $subject")->
       setText("Name: $name rnEmail: $emailadd rnSubject: $subject rnMessage: $message rn")->
       setHtml("<strong>Name:</strong> $name<br /> <strong>Email:</strong> $emailadd<br /> <strong>Subject:</strong> $subject<br /> <strong>Message:</strong> $message<br /> ")->
       addCategory('contact');

$response = $sendgrid->send($email);
//var_dump($response);

// 正常終了時にthanks.htmlへリダイレクト
header('Location: thanks.html');
exit();

すべてのファイルをご自身のWebサーバにアップロードし、Form.html にアクセスしてください。問合せ内容を入力して「Send」ボタンをクリックすると、.env で指定した宛先にメールが送信されます。
問合せフォーム(Form.html)

送信後の画面(thanks.html)
送信後の画面(thanks.html)

送信されたメール
送信されたメール

Googleドキュメントに “Zap” する

Zapier

ここからはオプションの手順です。続ける場合は Zapier のアカウント(無料で作成できます)が必要になります。
今回は、Gmailで受信したメールの内容をGoogleドキュメントのスプレッドシートにPOSTしてみます。問合せフォームの送信先(.env の TO の値)には、Gmailのメールアドレスを設定しておきましょう。

まずは、受信したメールの内容を投入するためのスプレッドシートを準備します。適当なスプレッドシートを作成してください(フォーマットの詳細はこちら)。
スプレッドシートのフォーマット

続いて、Zapierの設定をします。ログインして ”Make A Zap” をクリックすると、画面上に手順が示されるので簡単に設定できます。
Zapierの設定画面

Zapierの設定ができたら、さきほどの問合せフォームからメールを送信します。しばらく待つと、スプレッドシートにメールの内容が追加されます。
メールデータが投入されたスプレッドシート

このように、Zapierのセットアップはとても簡単です。”Zap” できるアプリが沢山用意されているので、色々と遊んでみてください。

SendGrid×Zapierについてもっと知りたい場合、Introduction to Un-Programming(英語)もご覧ください。ZapierからSendGridのメールを送信し、ユーザがそのメールのリンクをクリックしたときの処理を設定しています。

参考