静的サイトにお問合せフォームを作る方法

お問合せフォームだけのためにWordPressを使うのもな、、、という時に役立つ「PHP工房」を使ったお問合せフォームの作り方を紹介します。

こちらの記事を参考に進めていただければ、静的サイトにお問合せフォームが作れるようになります。

以下の流れで導入しますので、順番に解説していきます。

1.公式サイトでファイルをDL

2.DLした必要ファイルを開発ディレクトリに配置

3.最低限の変更点を編集

4.MAMP上で各画面のCSSを編集

5.本番にUPして、動作確認

1.公式サイトでファイルをDL

こちらに飛んで、UTF-8版をDL

mail.phpとcontact.htmlがDLされます。

2.DLした必要ファイルを開発ディレクトリに配置

①contact.htmlの #formWrapの開始タグから終了タグまでを、使いたいhtmlファイルにコピペ(ファイルごとまるっとそのまま使ってもOKです)
DLしたcontact.htmlにはcssも書いてくれているので、後から編集しやすいようにscssファイルに書いておくのがいいかもしれません。
②mail.phpは「中身だけ」を編集することはせず、ファイルごとまるっと開発ディレクトリにコピペしましょう

3.必要最低限の変更点を編集

contact.html↓

↑はデフォルトのものなので、必要な項目に書き換えてください。
name属性はわかりやすいものにしておきましょう。

mail.php↓(※僕は有料版を購入したため、行数に若干の違いがあるかもしれません。違っている場合は文字列で検索してみてください。)

// 33行目. 送信完了後に「トップページへ戻る」ボタンのリンク先を指定
$site_top = "https://www.○○○○○○○○○.com";

// 36行目. 管理者としてメールを受け取るアドレスを記載します。二つ必要な時は「,」で区切る。例: $to = "address1@gmail.com,address2@gmail.com,";
$to = "xxxxxxxxxx@xxx.xxx";

// 41行目. 送信元のアドレスとして表示されるアドレスです。受託制作であれば、クライアント様のアドレスに設定すれば良いかと思います。
$from = "xxxxxxxxxx@xxx.xxx";

// 44行目. 右の文字列と、contact.htmlのname属性の値が一致している必要があります。
$Email = "Email";

// 71行目. 管理者として、お問合せがあった時に受け取るメールのメールタイトルです。
$subject = "ホームページのお問い合わせ";

// 74行目. 「確認画面」を表示したい場合は1にします
$confirmDsp = 1;

// 79行目. 送信完了後に飛ばしたいページファイルがあれば、それを指定。指定しない場合は、デフォルトの送信完了画面が表示されます。例:$jumpPage = thanks.html;
$jumpPage = 0;

// 85行目. 必須で入力したい項目があれば0を1にする
$requireCheck = 0;

// 90行目. contact.html内のname属性のうち、必須の値を入力 例:$require = array('お名前','Email, 電話番号, お問合せ内容');
$require = array('お名前','Email');

// 93〜137行目. 自動返信メールを送信する場合の設定です。
// ※タイトルや自動返信メールの署名などです。こちらの内容は省略します。

// 253〜310行目. 確認ページのheadタグです。タイトルやデスクリプションなど変更が必要する際はこのあたりを変更します。
// ※こちらも省略します。

// 291〜294行目. メールアドレスの2重チェックをする場合の記述です(有料版の機能なため、無料版にはありません)。 以下は2重チェックをしつつ、2重チェック時のメールアドレスのname属性の値を定義しています。
$mail_2check = 1;
$ConfirmEmail = "メールアドレス(確認)";

// 315〜334行目. フォームの中身です。表示する文言等変更があれば、変更しましょう。
// ※省略します。

// 346〜384行目. 送信完了後の内容です。必要があれば、変更しましょう。
// ※省略します。

4.MAMP上で各画面のCSSを編集

各画面 = フォームの最初のページ・確認画面・送信完了画面のことです。
送信まで進んでも実際にメールは送信されないのですが、入力・確認・送信画面への遷移はちゃんとできるので、当てたいCSSを確認しつつ編集しましょう。

MAMPの使い方はこちらでは詳しく解説しませんが、htdocsディレクトリに開発中のファイル群を入れると動いてくれます。

こんな感じ↓

5.本番にUPして、動作確認

送信後の自動返信メールのタイトルや内容など、確認してちゃんと動くか確認して完了です。

6.まとめ

1回目はちょっと時間がかかりますが、2回目以降はサクサクできるかなと思います。
参考になれば、嬉しいです。それでは!