Web制作実務役立ち

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】
本ページにはプロモーションが含まれています。

WordPressなどのCMSを使用していれば、お問い合わせフォームをプラグインで簡単に設置することができます。

しかし残念ながら静的HTMLファイルのみのサイトではそうもいきません。

以前は「お問い合わせフォームのためだけにWordPress化する」ことをしていましたが、そんな手間を掛ける必要はありません。

間違っても一からPHPで作ったら、セキュリティがザルなダメダメフォームが爆誕するだけです。

今回は「PHP工房での静的サイトへのお問い合わせフォームの設置方法」を徹底解説します。

PHP工房では以下のようなフォームを簡単に実装することができます。

https://www.php-factory.net/demo/mail/MailForm01_02/contact.php

私はこれまでPHP工房のフォームを複数サイトで稼働させてきましたが、不具合なく動いています。

今回の記事を読んでいただくことで、どんなサイトにも送信確認画面付きのお問い合わせフォームが設置できるようになりますので、是非最後までご覧ください。

久しぶりに実装しました。わかり易いサイトで助かりました😄  PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】 - しょーごログ https://shogo-log.com/php-factory/
@samuraibrass
より
しょーごさん(
@samuraibrass
)さんのブログを参考に今更ながらphp工房でお問合せフォーム設置できた!
お問合せフォームからメール受け取るのWordPress化して、ContactForm7でやらないといけないと思ってたけど、静的サイトでも実装できるのね😭参考になりました🙌
#デイトラ
しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

PHP工房とは?

PHP工房は、PHPで動作する無料で利用できるメールフォームです。

PHPが動作するサーバーであればどんな環境でも動作しますし、自分の自作フォームでも利用することができます。

しょーご

自作フォームだとセキュリティとかザルになりますが、PHP工房ならセキュリティも大丈夫ですね。

PHP工房の特徴
  1. 無料
  2. 商用利用可能
  3. 自作フォームで使えるので見た目をCSSでカスタマイズ可能
  4. 確認画面をつけられる
  5. 送信完了のサンクスページをつけられる
  6. 自動返信メール機能

ただ注意点として、「サーバー上でしか動作しない」ので、例えばVSCodeなどのローカル環境では動きません。

動作テストなども基本的にはサーバーで行う必要がありますね。

類似のフォーム制作ツールは?

Googleフォームも静的サイトにお問い合わせフォーム機能をつけることができます。

Googleフォームを静的サイトに埋め込みカスタマイズ

どちらも甲乙つけがたいので、選択肢としてPHP工房も触れるといいでしょう。

しょーご

WordPressだったらContact Form 7で何でもできるんですけどね。

PHP工房の使い方【初期設定】

以下の流れで解説していきます。

PHP工房使い方解説の流れ
  1. ファイルをダウンロード
  2. サーバーに設置してまず動作確認してみる
  3. カスタマイズを行う

前提:ファイルマネージャーかFTPが使えることを確認

PHP工房のフォームをサーバーに設置するには2つの方法があります。

  1. レンタルサーバーのファイルマネージャー
  2. FileZillaなどのFTPツールで設置

今回は一番メジャーなサーバーである、エックスサーバー株式会社の「エックスサーバー 」か「シン・レンタルサーバー 」を使っている前提でファイルを設置します。

ファイルマネージャーが使えない人は、FTPのFileZillaを使えるようにしておくといいです。

ファイルをダウンロードする

まずPHP工房のこちらのページに飛びます。

【MailForm01】PHP多機能メールフォーム フリー(無料)版

その後、「メールフォーム UTF-8版」をクリックしてダウンロードします。

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】

ダウンロードしらフォルダを解凍すると、2つのファイルが確認できます。

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】

contact.htmlをそのままクリックして展開すると、以下のようなフォームが表示され、これがデフォルトのフォームになります。

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】

【動作確認】mail.phpを編集し、自分宛に届くようにする

それでは、mail.phpを編集して、自分宛にメールが届くように変更してみます。

画像の部分のコード(36行目と41行目)

$to = "xxxxxx@xxx";
$from = "xxxxxxxxxx@xxxx";

を任意の受け取りメールアドレスに変更してください。

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】

送信元メールアドレスはgmailだと届かない可能性が高いです。恐らくgmailのセキュリティ強化が原因なので、フォームを設置しているサイトのドメインと同名ドメインのメールアドレスを使用してください(@以降がドメイン部分)
無くてもレンタルサーバーで取得したものなら、私はOKでした。

できたら、ファイルをサーバーにアップロードします。「シン・レンタルサーバー」を例に解説します。

まずは管理画面に入り、「ファイル管理」を押します。

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】

するとファイルマネージャーに入れるので、public_htmlを選択

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】

どんなレンタルサーバーでも基本的にpublic_html以下しか触りません。

その中に今回はphp-practiceというフォルダを作成しました。

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】

その中に、ダウンロードしていた2つのファイルをドラッグ&ドロップします。

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】

これでフォームページが公開されたので、見に行きます。

今回のディレクトリ構成だと、https://xxxxxxxxx.jp/php-practice/contact.htmlというURLでアクセスできます。

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】

フォームを入力したら、「確認」を押します。

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】

確認画面が出てくるので、「送信する」をクリック。

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】

送信完了のサンクスページが出てきました。

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】

さて、最低限の動作は完了したので、ここからはカスタマイズして「PHP工房を自作フォームに紐付ける」ことを行っていきます。

もしメールが届かない場合

サーバーのドメインと管理者メールアドレスのドメインを同じにすると解决する可能性があります。

  • メールフォームを設置したサーバーのドメイン
  • config.phpで設定する管理者メールアドレスのドメイン

これを揃えることです。またGmailはセキュリティが厳しくなっており、その可能性もあります。

PHP工房と自作フォームと紐付ける

HTMLのカスタマイズ【必須】

デフォルトのcontact.htmlに全てのパーツが揃っているので、contact.htmlを見ながらどう自作フォームに当てはめていくか解説します。

 <form method="post" action="mail.php">
    <table class="formTable">
      <tr>
        <th>ご用件</th>
        <td><select name="ご用件">
            <option value="">選択してください</option>
            <option value="ご質問・お問い合わせ">ご質問・お問い合わせ</option>
            <option value="リンクについて">リンクについて</option>
          </select></td>
      </tr>
      <tr>
        <th>お名前</th>
        <td><input size="20" type="text" name="お名前" /> ※必須</td>
      </tr>
      <tr>
        <th>電話番号(半角)</th>
        <td><input size="30" type="text" name="電話番号" /></td>
      </tr>
      <tr>
        <th>Mail(半角)</th>
        <td><input size="30" type="text" name="Email" /> ※必須</td>
      </tr>
      <tr>
        <th>性別</th>
        <td><input type="radio" name="性別" value="男" /> 男 
          <input type="radio" name="性別" value="女" /> 女 </td>
      </tr>
      <tr>
        <th>サイトを知ったきっかけ</th>
        <td><input name="サイトを知ったきっかけ[]" type="checkbox" value="友人・知人" /> 友人・知人 
          <input name="サイトを知ったきっかけ[]" type="checkbox" value="検索エンジン" /> 検索エンジン</td>
      </tr>
      <tr>
        <th>お問い合わせ内容<br /></th>
        <td><textarea name="お問い合わせ内容" cols="50" rows="5"></textarea></td>
      </tr>
    </table>
    <p align="center">
      <input type="submit" value="  確認  " /> <input type="reset" value="リセット" />
    </p>
  </form>

フォームを置くHTMLファイルで見るべきは以下三点です。

❶formタグの設定

formタグは以下のようにしてください。

<form method="post" action="mail.php">

mail.phpの指定は相対パスになっているので、ファイルの位置が同階層でない場合は、パスが変わります。

フォームを2つ設置する場合は?

2つ目のform先はmail02.phpなどとし、それを指定してください。

❷name属性をあわせる

各項目名と入力欄のnameは合わせるようにしましょう(日本語推奨)

確認画面・送信メールに表示される各項目名です。

<th>お名前</th>
        <td><input size="20" type="text" name="お名前" /> ※必須</td>

❸独自のチェックボックスの指定方法

チェックボックス(checkbox)に関しては、nameの値の末尾に[]をつけるのを忘れないでください。

<input name="サイトを知ったきっかけ[]" type="checkbox" value="友人・知人" />

mail.phpの必須カスタマイズ

次に、mail.phpを見ていきます。

行数はPHP工房2023年8月時点のものです。

トップページへ戻るのリンク(33行目)

送信完了ページの「トップページに戻る」のリンク先を指定します。

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】

デフォルトではPHP工房のトップページに戻ります。

//サイトのトップページのURL ※デフォルトでは送信完了後に「トップページへ戻る」ボタンが表示されますので
$site_top = "http://www.php-factory.net/";

メールを受け取るメールアドレス(35行目)

メールを受け取るメールアドレスです。

//管理者のメールアドレス ※メールを受け取るメールアドレス(複数指定する場合は「,」で区切ってください 例 $to = "aa@aa.aa,bb@bb.bb";)
$to = "xxxxxxx@xxx";

送信元メールアドレス(41行目)

送信元のメールアドレス設定です。

//送信元メールアドレス(管理者宛て、及びユーザー宛メールの送信元メールアドレスです)
//必ず実在するメールアドレスでかつ出来る限り設置先サイトのドメインと同じドメインのメールアドレスとすることを強く推奨します
//管理者宛てメールの返信先(reply)はユーザーのメールアドレスになります。
$from = "xxxxxxxxxx@xxx.xxx";

メールアドレス入力欄のname属性の値を揃える(44行目)

メールアドレスを入力するinputタグのname属性の値を書きます。

<td><input size="30" type="text" name="Email" /> ※必須</td>
//フォームのメールアドレス入力箇所のname属性の値(name="○○" の○○部分)
$Email = "Email";

セキュリティ、スパム防止のための設定

スパム防止のためのリファラチェック(52行目)

スパムメールを防ぐ設定です。デフォルトでは0になっています。

//スパム防止のためのリファラチェック(フォーム側とこのファイルが同一ドメインであるかどうかのチェック)(する=1, しない=0)
//※有効にするにはこのファイルとフォームのページが同一ドメイン内にある必要があります
$Referer_check = 0;
しょーご

スパムメール送信の温床になりやすいので、1にしておきたいですね。

リファラチェックを「する」場合のドメイン(56行目)

上記を1にした場合は、フォームを置いてるサイトのドメインを書いてください。

//リファラチェックを「する」場合のドメイン ※設置するサイトのドメインを指定して下さい。
//もしこの設定が間違っている場合は送信テストですぐに気付けます。
$Referer_check_domain = "php-factory.net";

セッションによるワンタイムトークン(61行目)

ガラケーは想定しなくていいと思うので、ここは基本1でいいと思います。

/*セッションによるワンタイムトークン(CSRF対策、及びスパム防止)(する=1, しない=0)
※ただし、この機能を使う場合は↓の送信確認画面の表示が必須です。(デフォルトではON(1)になっています)
※【重要】ガラケーは機種によってはクッキーが使えないためガラケーの利用も想定してる場合は「0」(OFF)にして下さい(PC、スマホは問題ないです)*/
$useToken = 1;

任意設定(必要に応じて設定)

Bccで送るメールアドレス(67行目)

// Bccで送るメールアドレス(複数指定する場合は「,」で区切ってください 例 $BccMail = "aa@aa.aa,bb@bb.bb";)
$BccMail = "";

管理者宛に送信されるメールのタイトル(71行目)

お問い合わせがあった際に、サイトの管理者に送信されるメールのタイトルです。

// 管理者宛に送信されるメールのタイトル(件名)
$subject = "ホームページのお問い合わせ";

送信確認画面の表示(74行目)

確認画面を表示するかしないかの設定で、重要です。

デフォルトでは1となっており、確認画面が出る設定になっています。

// 送信確認画面の表示(する=1, しない=0)
$confirmDsp = 1;

送信完了後に自動的に指定のページ(サンクスページなど)に移動する(79行目)

0だとデフォルトのサンクスページに飛ぶので、自分のオリジナルのサンクスページに飛ばしたい場合は、1にします。

// 送信完了後に自動的に指定のページ(サンクスページなど)に移動する(する=1, しない=0)
// CV率を解析したい場合などはサンクスページを別途用意し、URLをこの下の項目で指定してください。
// 0にすると、デフォルトの送信完了画面が表示されます。
$jumpPage = 0;

送信完了後に表示するページURL(82行目)

上記を1にした場合は、サンクスページのURLを記載します。

// 送信完了後に表示するページURL(上記で1を設定した場合のみ)※httpから始まるURLで指定ください。(相対パスでも基本的には問題ないです)
$thanksPage = "http://xxx.xxxxxxxxx/thanks.html";

必須入力項目を設定する(85行目)

0だと必須入力項目なし、1だと必須入力項目ありになります。

// 必須入力項目を設定する(する=1, しない=0)
$requireCheck = 0;

必須入力項目(入力フォームで指定したname属性の値を指定(90行目)

上記が1の場合に、具体的な必須入力項目のname属性の値を指定します。

コメントを参考に、入力形式に注意してください。

/* 必須入力項目(入力フォームで指定したname属性の値を指定してください。(上記で1を設定した場合のみ)
値はシングルクォーテーションで囲み、複数の場合はカンマで区切ってください。フォーム側と順番を合わせると良いです。 
配列の形「name="○○[]"」の場合には必ず後ろの[]を取ったものを指定して下さい。*/
$require = array('お名前','Email');

自動返信メール設定

差出人に送信内容確認メール(自動返信メール)を送る(99行目)

所謂自動返信メールです。

メールを送ってくれた方は「自分のメールが相手に届いているか不安に思うもの」なので、基本的に1にしてあげたほうがいいかと思います。

// 差出人に送信内容確認メール(自動返信メール)を送る(送る=1, 送らない=0)
// 送る場合は、フォーム側のメール入力欄のname属性の値が上記「$Email」で指定した値と同じである必要があります
$remail = 0;

自動返信メールの送信者欄に表示される名前(102行目)

自動返信メールの送信者欄に表示される名前を設定する項目です。

//自動返信メールの送信者欄に表示される名前 ※あなたの名前や会社名など(もし自動返信メールの送信者名が文字化けする場合ここは空にしてください)
$refrom_name = "";

差出人に送信確認メールを送る場合のメールのタイトル(105行目)

自動返信メールのタイトルです。

// 差出人に送信確認メールを送る場合のメールのタイトル(上記で1を設定した場合のみ)
$re_subject = "送信ありがとうございました";

フォーム側の「名前」箇所のname属性の値(109行目)

//フォーム側の「名前」箇所のname属性の値 ※自動返信メールの「○○様」の表示で使用します。
//指定しない、または存在しない場合は、○○様と表示されないだけです。あえて無効にしてもOK
$dsp_name = 'お名前';

自動返信メールの冒頭の文言(111行目)

TEXTの中を編集しましょう。

//自動返信メールの冒頭の文言 ※日本語部分のみ変更可
$remail_text = <<< TEXT

お問い合わせありがとうございました。
早急にご返信致しますので今しばらくお待ちください。

送信内容は以下になります。

TEXT;

自動返信メールに署名(フッター)を表示(122行目)

//自動返信メールに署名(フッター)を表示(する=1, しない=0)※管理者宛にも表示されます。
$mailFooterDsp = 0;

上記で「1」を選択時に表示する署名(126行目)

//上記で「1」を選択時に表示する署名(フッター)(FOOTER~FOOTER;の間に記述してください)
$mailSignature = <<< FOOTER

──────────────────────
株式会社○○○○ 佐藤太郎
〒150-XXXX 東京都○○区○○  ○○ビル○F 
TEL:03- XXXX - XXXX  FAX:03- XXXX - XXXX
携帯:090- XXXX - XXXX  
E-mail:xxxx@xxxx.com
URL: http://www.php-factory.net/
──────────────────────

FOOTER;

確認画面のカスタマイズ(251行目以降)

確認画面のカスタマイズはここから行えます。

自作フォームのHTMLをここに貼り付ければいいですね。

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】

送信完了画面(サンクスページ)のカスタマイズ(346行目以降)

サンクスページに飛ばす場合は、ここのHTMLを張り替えればいいですね。

PHP工房を使って静的サイトにお問い合わせメールフォームを設置する【確認画面もOK】

PHP工房で静的サイトにもお問い合わせフォームを!!

ここまで「PHP工房での静的サイトへのお問い合わせフォームの設置方法」を徹底解説しました。

オプションが豊富なので、自作フォームで要件が色々ある際にも使いやすいかと思います。

以外に静的サイトにお問い合わせフォームを設置する機会は多いので、Googleフォームと同様に選択肢に持って置けると、制作者としては安心ですね。

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

応援して頂ける方へ

ご寄付を頂けると今後の更新の励みになります!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!
});