PHP工房をカスタマイズして静的サイトにオリジナルデザインの問い合わせフォームを設置する方法を解説

2022年6月27日2023年4月6日

今回はLPやホームページの静的ページの問い合わせフォームの制作に活用できる「PHP工房」について解説していきます。ボリュームの少し多めの記事ですが、一つひとつの作業自体はかなり簡単ですので、上から順に実装すればオリジナルデザインのフォームを完成させることができます！

カスタマイズ可能かつ確認画面つきのテンプレートではいくつかありますが、PHP工房は比較的簡単に実装ができるので、実案件でもぜひ実践してみてください！

PHP工房の特徴

無料で使用できる
PHPの知識がなくても扱いやすい
オリジナルデザインのフォームとも連携できる
確認画面の作成が可能

フォームとしての必要最低限の機能を抑えつつ、カスタマイズ性が良いのは魅力的ですね！では、早速具体的な実装方法について解説していきます。

PHP工房の実装手順

テンプレートファイルをダウンロード

まずは下記の手順でPHP工房の公式サイトから今回使用するテンプレートファイルをダウンロードします。

→PHP工房公式サイト

1.「【MailForm01】メールフォーム　フリー」をクリック

2.「メールフォームダウンロード」から「メールフォームUTF-8版」をダウンロード

ダウンロードしたzipファイルを解凍するとフォルダの中には「contact.html」と「mail.php」が入っていると思います。
今回は、オリジナルデザインのフォームを制作していきますので、「mail.php」のみを使用していきます。

オリジナルのフォームと結びつける

今回、簡易的に問い合わせフォームを制作しました。CSSはほとんどあてていませんが、実案件等ではCSSをあてて実装してみてください。

See the Pen 簡易問い合わせフォーム by masata (@masata_lm) on CodePen.

formタグのaction属性を変更する

先ほどダウンロードしたファイルを編集する前にフォームとPHPファイルを結びつけていきます。

結び付け方は至ってシンプルで、formタグのaction属性をダウンロードしたPHPファイルの名前にするだけです。今回であれば「mail.php」になります。

<form action="mail.php" method="POST" class="c-form">
　〜〜〜
</form>

ただ、特に命名に決まりはないので複数のフォームを設置する場合は、PHPファイルを複製して名前を変更し、連動させたいformタグのaction属性の値を付与してあげれば大丈夫です。

例：通常の問い合わせフォームに加え、資料請求用のフォームも別で加えたい場合

通常の問い合わせフォームを「mail.php」とし、資料請求用のフォームは「mail_materials.php」と命名する。
formタグも2種類作成（別ファイルでもOK）し、それぞれのaction属性の値を連動させたいPHPファイル名にする。

inputタグのname属性に値を入力する

次にフォームの中のinputタグのname属性を入力していきます。今回はこの値が自動送信メールの文言になるので各項目が分かりやすいように日本語で入力します。

<input class="c-form__input-text" name="お名前" type="text" placeholder="太郎" />

今回は以下のようにラベルと同じname属性の値を付与しています。値は制作したフォームによって適宜変更してください。

【name属性一覧】
・ふりがな
・企業名
・住所（番地以降）
・電話番号
・メールアドレス
・問い合わせ内容

PHPファイルの編集

※編集箇所の解説で変数を指定して説明しておりますので、エディタ上で変数を検索して編集してください。

必須設定

エディタ上で「mail.php」を開いたら、まずは必須設定の部分を編集していきます。

「$site_top」には、トップページのURLを入力し、送信完了後にトップページへ戻れるようにします。

$site_top = "http://www.php-factory.net/";

「$to」には、問い合わせフォームからのメールを受信するメールアドレスを入力します。クライアントさんから複数のメールアドレスで受信したいという要望があれば「$to = “test@xxx.xxx,test@yyy.yyy”;」のように「,」で区切って入力しましょう。

$to = "xxxxxxxxxx@xxx.xxx";

「$from」には、送信元のメールアドレスを入力します。基本的にはサイトのドメインと同じドメインを入力することが推奨されています。

$from = "xxxxxxxxxx@xxx.xxx";

「$Email」は結びつけたフォームの「メールアドレス」のname属性と一致させます。初期状態は「Email」ですが、今回は「メールアドレス」になります。

$Email = "Email";

セキュリティ対策

次は、セキュリティ対策の項目を編集します。

まずは、「$Referer_check」のリファラチェックの箇所を変更します。
初期状態では「0」でリファラチェックをしないことになっているので、リファラチェックをする場合は「1」に変更してください。

$Referer_check = 0;

リファラチェックを「1」にした場合は、「$Referer_check_domain」にフォームを設置するサイトのドメインを入力してください。

$Referer_check_domain = "php-factory.net";

任意設定項目

続いて、任意設定項目を入力していきます。こちらは案件によって入力内容を適宜変更してください。

「$BccMail」でBccで送るメールアドレスを入力します。こちらも複数のメールアドレスを入力する際は「,」で区切ってください。

$BccMail = "";

「$subject」では、問い合わせフォームから管理者側に自動で送られるメールのタイトルを設定します。初期状態でも大丈夫ですが、問い合わせフォームからの自動送信メールであることが分かるような文言にしたほうが良いでしょう。

$subject = "ホームページのお問い合わせ";

「$confirmDsp」では、送信確認画面の表示の有無を切り替えます。初期状態では「1（あり）」になっていますが、クライアントさんに確認して必要なければ「0（なし）」にしましょう。

$confirmDsp = 1;

「$jumpPage」では、独自で作成したサンクスページに遷移するかどうかを設定します。「0」の場合はデフォルトで設定されている画面が表示されます。

$jumpPage = 0;

「$jumpPage」で「1」を選択した場合は、「$thanksPage」でサンクスページのURLを入力しましょう。

$thanksPage = "http://xxx.xxxxxxxxx/thanks.html";

「$requireCheck」では、必須入力項目の設定をするかを入力します。初期状態は「0」ですが多くの場合、何かしらの必須項目は設定すると思うので「1」でいいでしょう。

$requireCheck = 0;

「$requireCheck」が「1」の場合は、「$require」の配列（初期状態だと「お名前」と「Email」）に、必須入力項目のname属性の値を入力します。複数の指定の場合は「,」をつけましょう。

$require = array('お名前', 'Email');

自動返信メールの設定

自動返信メールの設定を行なっていきます。

差し出し先に自動返信メールを送る場合は「$remail」を「1」にしてください。

$remail = 0;

次に、「$refrom_name」に自動返信メールで送信者欄に表示される名前を設定しましょう。

$refrom_name = "";

「$re_subject」には、自動返信メールのタイトルを入力してください。

$re_subject = "送信ありがとうございました";

フォームで差し出し先の名前入力欄を作っている場合は、「$dsp_name」にその入力欄のname属性の値を入力しましょう。

$dsp_name = 'お名前';

「$remail_text」の日本語の箇所で、自動返信メールの冒頭の文言を編集することができます。

$remail_text = <<< TEXT

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

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

TEXT;

「$mailFooterDsp」の値を「1」にすると自動返信メールの最後に署名を表示することができます。

$mailFooterDsp = 0;

「$mailFooterDsp」の値を「1」にした場合、「$mailSignature」の【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;

以上で自動返信メールの基本的な設定が完了しました。

送信確認画面のデザイン変更

「/*　▼▼▼送信確認画面のレイアウト※編集可　オリジナルのデザインも適用可能▼▼▼　*/」以下のコードを編集すると送信画面のレイアウトを変更することができます。適宜、head内の記述などを追記、削除して実装したいデザインに変更してください。ヘッダーやフッターも追加することができます。

下記のPHPのコードによって入力内容がテーブルとして出力されるようになっているので、デベロッパーツールで出力されているtrタグなどを見つけたら、その要素のCSSを変更することでカスタマイズすることができます。

<table class="formTable">
	<?php echo confirmOutput($_POST);?>
</table>

同じように「送信する」ボタンと「前画面に戻る」ボタンもCSSのカスタマイズを行うことができます。

送信完了画面のデザイン変更

オリジナルの送信完了画面（サンクスページ）を使用せず、標準の送信完了画面を使用する場合は、
「/* ▼▼▼送信完了画面のレイアウト　編集可 ※送信完了後に指定のページに移動しない場合のみ表示▼▼▼　*/」以下のコードを編集するとレイアウトを変更することができます。カスタマイズ方法は、基本的に送信確認画面と同じ流れになります。