FormKit（フォームキット）：設置マニュアル
概要
このページでは、ダウンロードしたファイルに同梱されているサンプルフォームの設置を行います。（01-ContactForm）
それぞれ細かい機能の紹介や応用などは、別の解説ページまたはダウンロードファイルに含まれるその他のサンプルファイルをご参照下さい。
STEP1：プログラムをダウンロード・解凍する
ダウンロード
まずは FormKit（フォームキット）：ダウンロード からプログラム本体をダウンロードをしてください。プログラム本体は無料で、一式をZIPファイルでダウンロードできます。
ZIPファイル解凍
ダウンロードしたZIPファイルを解凍してください。解凍先はデスクトップなど任意の場所でOKです。
古いOSでは標準でZIPファイルが解凍できない場合があります。この場合はZIPが解凍できるソフトをインストールしてください。
解凍して出来たフォルダ 01-ContactForm が、以下で設置する"よくあるお問い合わせ"のサンプルフォームになります。以降、このフォルダ内での作業になります。
STEP2：設定ファイルを修正する
初期の設定ファイルのサンプルメールアドレス webmaster@example.jp となっている箇所を、ご自分のメールアドレスに修正してみましょう。
（設定ファイルの詳細については別途ページで詳説しています。）
<?php
namespace FK;
/**
* メール送信設定
* -------------------------------------------------------------------------------------------------
*/
# - お客様へ
$Config['mails'][] = [
'template' => 'mail_to_user.php',
'subject' => 'お問い合せありがとうございました。',
'from' => '事務局 <webmaster@example.jp>',
'to' => '{$onamae} 様 <{$email}>',
'bcc' => null,
'reply_to' => null,
'is_html' => false,
'is_utf8' => true,
'attach_upfile' => false,
# - SMTP送信設定
// 'smtp_auth' => true,
// 'smtp_host' => 'smtp.xxxxx',
// 'smtp_port' => 587,
// 'smtp_user' => 'xxxxxxxx',
// 'smtp_pass' => 'xxxxxxxx',
// 'smtp_secure' => 'tls', # null | 'tls' | 'ssl'
];
# - 事務局へ
$Config['mails'][] = [
'template' => 'mail_to_admin.php',
'subject' => 'お問い合せがありました。',
'from' => '{$onamae} 様 <{$email}>',
'to' => '事務局 <webmaster@example.jp>',
'bcc' => null,
'reply_to' => null,
'is_html' => false,
'is_utf8' => true,
'attach_upfile' => true,
# - SMTP送信設定
// 'smtp_auth' => true,
// 'smtp_host' => 'smtp.xxxxx',
// 'smtp_port' => 587,
// 'smtp_user' => 'xxxxxxxx',
// 'smtp_pass' => 'xxxxxxxx',
// 'smtp_secure' => 'tls', # null | 'tls' | 'ssl'
];
～編集したら保存してください。設定ファイルの文字コードは必ず UTF-8 で保存するようにしてください。
STEP3：サーバにアップロードする
ファイルアップロード
FTPソフトを起動し、ご契約中のサーバにFTP接続をしてご希望のフォルダを新規作成してください。
- 作成フォルダ例
- /contact/
次に、先ほど解凍したファイルを、上記フォルダに全てアップロードします。
パーミッション設定
全てのファイルが正常にアップロード完了したら、次にファイルやフォルダにパーミッション（権限）の設定を行います。一般的には、FTPソフト上からパーミッションを設定したいファイルまたはフォルダを選択し右クリックして、「パーミッションを変更」や「属性変更」等から設定可能です。（ソフトウェアによって名称が違います）
| 対象フォルダ/ファイル | 設定値 |
|---|---|
| /contact/csv/ | 707 |
| /contact/csv/xxxxx.csv.cgi | 606 |
| /contact/count/（送信カウント設定が有効なら） | 707 |
| /contact/count/count.cgi | 606 |
| その他のフォルダ | そのままでOK （または705） |
| その他のファイル | そのままでOK （または604） |
設定値の3桁または4桁の数値（604や0755のような）をそれぞれ上記の表の対応した値に設定していってください。
これを行わないと、プログラムが一部正常に実行できなかったりファイルにデータが保存されないなどの問題が置きますので、ご注意下さい。
また、/csv/ や /count/ は設定により変動します。
STEP4：送信してみる
もうほぼ完了です。ブラウザから先程アップロードしたパス /contact/ にアクセスしてみて下さい。以下のような画面が表示されているでしょうか。
実際にフォームを入力し、確認画面を経て、完了画面まで進めてみてください。入力したメールアドレスと設定した管理者メールアドレスに通知メールが届いているはずです。
うまくいかない場合は、どこかに問題があります。送信されたメールがスパム判定されていないか、パーミッションやURL、設定ファイルに間違いが無いかご確認下さい。（動作要件も確認して下さい）
また、ユーザー掲示板で同様の問題が投稿されていないか探してみるのも解決への一歩です。
ここから、各画面のHTMLテンプレートやメールテンプレート、及び設定ファイルを修正して行く形となります。
基本的な設置作業は以上になります。
以降、詳細説明です。
ディレクトリ/ファイル構成
| ディレクトリ/ファイル名 | 解説 |
|---|---|
| /csv/ | 初期設定で、CSVファイルを保存する先のディレクトリです。CSV機能を無効にしている場合は必要ありません。 |
| /count/ | 初期設定で、送信カウントのデータを保存する先のディレクトリです。送信カウント機能を無効にしている場合は必要ありません。 |
| /formkit/ | FormKitの本体を格納するディレクトリです。基本的にこの下の階層での作業は必要ありません。 |
| /formkit/app/ |
フォームページから参照するためのFormKitのCSS,JS,PHPプログラムを格納しています。fk.css ... FormKitで使用するスタイルCSSファイルfk.js ... FormKitで使用するJavaScriptファイルfk-ajax.php ... リアルタイムバリデート時のAjax受け用PHPプログラムfk-check.php ... require用 確認画面処理PHPプログラムfk-input.php ... require用 入力画面処理PHPプログラムfk-send.php ... require用 送信/完了画面処理PHPプログラム |
| /formkit/lib/ | FormKit本体及びライブラリを格納しています。購入した LICENSE_CODE ファイルがある場合はこの中に置いて下さい。 |
| /formkit/lib/info/ | FormKitのソフトウェア情報等を格納しています。 |
| /formkit/lib/PHPMailer/ | メール送信ライブラリ PHPMailer を格納しています。 |
| /formkit/lib/template-methods/ | テンプレートメソッドを格納しています。自作メソッドを追加する場合はこの中にPHPファイルを作成して下さい。 |
| /formkit/lib/validates-methods/ | バリデートメソッドを格納しています。自作メソッドを追加する場合はこの中にPHPファイルを作成して下さい。 |
| /formkit/config.php | FormKitの設定ファイルです。 |
| /formkit/mail_to_admin.php | 初期設定で、管理者へ通知するメール文のテンプレートファイルです。テンプレートメソッドが使えます。 |
| /formkit/mail_to_user.php | 初期設定で、フォームの入力者へ通知するメール文のテンプレートファイルです。テンプレートメソッドが使えます。 |
| /check.php | サンプルフォームの確認画面です。テンプレートメソッドが使えます。 |
| /custom.css | サンプルフォームのスタイルCSSです。 |
| /index.php | サンプルフォームの入力画面です。テンプレートメソッドが使えます。 |
| /thanks.php | サンプルフォームの完了画面です。テンプレートメソッドが使えます。 |
グレーの箇所は設定や構成によって変動します。
テンプレート解説
上記で設置したサンプルテンプレートの解説です。
入力フォームサンプルテンプレート解説（index.php）
<?php require 'formkit/app/fk-input.php' ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="formkit/app/fk.css"> <link rel="stylesheet" href="custom.css"> <meta name="viewport" content="width=device-width"> <title>入力画面 - よくあるお問い合わせサンプルフォーム - FormKit</title> </head> <body> （略） <noscript>JavaScriptを有効にして下さい。</noscript> <form action="check.php" method="post"> <?= \FK\hiddens_tag() ?> <table> <tbody> <tr> <th class="fk-req">お名前</th> <td> <input type="text" name="onamae" value="<?= $onamae ?>"> <?= $onamae->marker_tag() ?> <?= $onamae->error_tag() ?> <br> <input type="text" name="kana" value="<?= $kana ?>" placeholder="（フリガナ）"> <?= $kana->marker_tag() ?> <?= $kana->error_tag() ?> </td> </tr> （略） </tbody> </table> <div class="submit"> <button>確認画面へ</button> </div> <aside><?= \FK\copyright_tag(); ?></aside> </form> </main> <script src="formkit/app/fk.js"></script> </body> </html>
- 1行目：FormKit本体のロードです。フォーム入力画面として呼び出します。
- 6行目：FormKit用CSSの読み込みです。
- 15行目：JavaScriptが無効の際に表示されるメッセージをセットして下さい。JavaScriptが無効の際、画面中央に赤文字で表示されるようになります。
- 16行目：次の画面のファイルを指定して下さい。
method="post"を忘れずに指定して下さい。 - 17行目：FormKitから差し込まれる情報がセットされます。必ず指定して下さい。
- 21行目：
fk-req,fk-noreqと指定することで、「必須」「任意」の表示が出ます。これはおまけで用意しているスタイルクラスなので独自のものに置き換えてもらって大丈夫です。 - 23行目：入力要素の宣言です。確認画面から戻る可能性がある場合は、
value="<?= $(要素名) ?>"が必要になりますが、確認画面がなくそのまま送信処理に飛ばすパターンの場合はvalue属性を省いても構いません。 - 24行目：指定要素のマーカータグを出力する箇所です。FormKitで用意しているスタイルによって、入力中、バリデート中、バリデートOK、バリデートNGに切り替わります。独自のCSSで上書きしてしまってもかまいません。
- 25行目：指定要素のエラーメッセージが表示される箇所です。
- 38行目：送信ボタンは
<input type="submit">でも<button>でもOKです。 - 40行目：FormKitのコピーライトリンクが表示されます。ライセンスコードをご購入・設置していない場合、コピーライトを外すとエラーになります。
- 44行目：FormKitのJavaScriptプログラムです。
</body>タグの直前に記述して下さい。
確認画面サンプルテンプレート解説（check.php）
上記の入力画面と同じ解説の箇所は省いています。
<?php require 'formkit/app/fk-check.php' ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="formkit/app/fk.css"> <link rel="stylesheet" href="custom.css"> <meta name="viewport" content="width=device-width"> <title>確認画面 - よくあるお問い合わせサンプルフォーム - FormKit</title> </head> <body> （略） <noscript>JavaScriptを有効にして下さい。</noscript> <form method="post"> <?= \FK\hiddens_tag() ?> <table> <tbody> <tr> <th class="fk-req">お名前</th> <td><?= $onamae ?>（<?= $kana ?>）</td> </tr> （略） </tbody> </table> <div class="submit"> <button formaction="index.php?revalidate">修正</button> <button formaction="thanks.php">送信する</button> </div> <aside><?= \FK\copyright_tag(); ?></aside> </form> </main> <script src="formkit/app/fk.js"></script> </body> </html>
- 1行目：FormKit本体のロードです。フォーム確認画面として呼び出します。
- 16行目：action属性が無いのは、下で「修正」「送信する」ボタンにより２つの送信先があるためです。進むだけのフォームならaction属性を書いてもいいです。
- 22行目：入力画面で入力した情報を表示します。ここで各要素変数を
$onamae->tail(' 様')などとして、テンプレートメソッドを使用することが可能です。 - 29行目：入力画面に戻るボタンです。formaction属性で送信先を指定します。URLの末尾に
?revalidateと付けると、入力画面に戻った際に全ての入力に再度バリデート実行します。 - 31行目：次の画面へ送信するボタンです。
送信/完了画面サンプルテンプレート解説（thanks.php）
上記の入力画面と同じ解説の箇所は省いています。
<?php require 'formkit/app/fk-send.php' ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="formkit/app/fk.css"> <link rel="stylesheet" href="custom.css"> <meta name="viewport" content="width=device-width"> <title>完了画面 - よくあるお問い合わせサンプルフォーム - FormKit</title> </head> <body> （略） <p>送信完了！</p> （略） </body> </html>
- 1行目：FormKit本体のロードです。フォーム送信/完了画面として呼び出します。
この画面は、最初POST通信で飛んできた際に内部でメール送信/CSV保存等の処理を実行した後、同画面にGETにてリダイレクトします。（設定ファイルで $Config['finish_url'] を指定すると最後のGETリダイレクト先を変更することも可能です。）
その為、処理完了後にブラウザでリロードボタンを押しても重複して再送信されることはありません。
また、送信処理後にセッション情報が削除されるため、前の画面に戻りリロードすると不正なアクセスとしてエラーメッセージが表示されます。
メールテンプレート解説（formkit/mail_to_user.php）
formkit/mail_to_admin.php もほぼ同様なのでそちらは省きます。
<?= $onamae ?> 様 この度はお問い合せをいただきましてありがとうございます。 以下、入力された内容の控えとなります。 ---------------------------------------------------------------------- ■ お名前 <?= $onamae ?> ■ メールアドレス <?= $email ?> ■ 連絡先電話番号 <?= $tel ?> ■ ご住所 郵便番号：<?= $zip ?> 住所：<?= $pref ?> <?= $address1->empty_label() ?> <?= $address2->empty_label() ?> ■ お問い合わせの種類 <?= $type ?> ■ お問い合わせ内容 <?= $comment ?> ---------------------------------------------------------------------- 送信日時：<?= $__DATEJP__ ?> <?= $__TIMEJP__ ?> ブラウザ：<?= $__UA__ ?> IPアドレス：<?= $__IP__ ?> ホスト名： <?= $__HOST__ ?> ---------------------------------------------------------------------- 以上です。
- 1行目～：
$(要素名)で記述されたところは入力画面で入力した情報が表示されます。ここで各要素変数を$onamae->tail(' 様')などとして、テンプレートメソッドを使用することが可能です。 - 29行目～：特殊変数が使用可能です。
設定ファイルにてHTMLメールを有効にした場合は、このファイルにHTMLを記述して下さい。同様にテンプレートメソッドが使用できます。
フォームページのフローについて
index.php や check.php などのフォームテンプレートファイルを主に編集してご利用いただくようになりますが、構成によっては確認画面を飛ばしたり、入力画面を複数設けるなどのパターンも可能です。以下、パターンサンプルを掲載します。
尚、1行目のrequire文と <form> タグのaction先を正しく記述できていれば、実際のフォームページ自体のファイル名は任意で付けていただいてかまいません。
ページを遷移する際のフォーム送信メソッドは POST である必要があります。→<form action="～" method="post">
確認画面からの戻りの際は formaction属性 を利用すると便利です。
よくあるフォームパターンサンプル
| ページフロー | ファイル名 | 1行目のrequire文 | <form>タグのaction先 |
|---|---|---|---|
| 1.入力画面 | index.php | <?php require 'formkit/app/fk-input.php' ?> | check.php |
| 2.確認画面 | check.php | <?php require 'formkit/app/fk-check.php' ?> | thanks.php |
| 3.送信/完了画面 | thanks.php | <?php require 'formkit/app/fk-send.php' ?> | (なし) |
確認画面なしパターンサンプル
| ページフロー | ファイル名 | 1行目のrequire文 | <form>タグのaction先 |
|---|---|---|---|
| 1.入力画面 | index.php | <?php require 'formkit/app/fk-input.php' ?> | thanks.php |
| 2.送信/完了画面 | thanks.php | <?php require 'formkit/app/fk-send.php' ?> | (なし) |
入力画面複数パターン
| ページフロー | ファイル名 | 1行目のrequire文 | <form>タグのaction先 |
|---|---|---|---|
| 1.入力画面その１ | step1.php | <?php require 'formkit/app/fk-input.php' ?> | step2.php |
| 2.入力画面その２ | step2.php | <?php require 'formkit/app/fk-input.php' ?> | step3.php |
| 3.入力画面その３ | step3.php | <?php require 'formkit/app/fk-input.php' ?> | check.php |
| 4.確認画面 | check.php | <?php require 'formkit/app/fk-check.php' ?> | thanks.php |
| 5.送信/完了画面 | thanks.php | <?php require 'formkit/app/fk-send.php' ?> | (なし) |
ちなみに、入力画面が複数ある場合、入力ページから別の入力ページに戻るようなボタンを用意するかと思います。（上記の例ですと例えばstep3からstep2に戻る等）その際に、そのままですと前のページに戻りたいのに現在のページの入力がまだなのでバリデートエラーが発生して戻れないということになります。そんな時は、バリデートを無効にしたままページを戻れる data-fk-no-validate 属性をボタンに付ければ解決です。
<div class="submit"> <button formaction="index.php?revalidate" data-fk-no-validate>前へ</button> <button formaction="step3.php">次へ</button> </div>
ライセンスコードについて
ライセンスコード購入のメリット
通常、無料ダウンロードのままご利用いただく場合、コピーライトの表示が必須ですが、ライセンスコードを別途購入・設置していただくことで、ライセンス表示を外すことが可能です。
ライセンスコード購入から、ライセンスコードファイルをご購入可能です。
尚、入力画面以外はコピーライトの表示は必要ありません。
ライセンスコードファイルの設置
ライセンスコードをご購入いただきますと、ZIPファイルがメール添付にて送られます。これを解凍し、該当のフォルダに入っている LICENSE_CODE というファイルを、既存の formkit/lib/ ディレクトリの中にアップロードしてください。
正常にライセンスコードファイルが認識されると、テンプレートから <?= \FK\copyright_tag(); ?> を削除してもエラーにならなくなります。（※自動的に表示されなくなるわけではありません）
- ライセンスコードファイルのアップロード先例
- /contact/formkit/lib/LICENSE_CODE
ライセンスコードファイルは設置個所ごとに都度ライセンスコードをご購入いただき、それぞれの LICENSE_CODE ファイルをアップロードする必要がありますのでご注意下さい。
また、ご利用規約に違反された場合、規約に則り厳重な罰則がございますので十分ご注意下さい。
プログラムが動かない！
上記設置マニュアルどおりに設定してもサーバ環境などにより動作しない場合も考えられます。
設置マニュアル通りに設定しているのにうまく動かない場合は、まずはユーザー掲示板で同じようなトピックが過去にないか検索してみてください。
尚、情報を一般公開できない、またはお急ぎの場合などは、プレミアム会員専用のダイレクトサポートのご利用をお勧めいたします。
プレミアム会員のご紹介
FormKit core error, Or License error ! とブラウザに出る
上記のエラーが出る場合、以下のどちらかの可能性が高いです。
- ライセンスファイル
formkit/lib/LICENSE_CODEを未購入なのにコピーライト表示メソッド<?= \FK\copyright_tag(); ?>がフォームテンプレート中に記述されていない場合 - PHP文法でエラーになりコピーライトが表示される前にエラーになってしまった場合（テンプレートメソッドの書き方間違いなど）
フォームページのHTMLソースが途中で切れる！
フォームが途中で切れて最後まで出力されない場合、設定ファイルのバリデート定義に要素名が正しく書かれていない、または config.php の方でバリデートの設定を忘れている可能性が高いです。途切れた箇所に表示されているPHPエラーメッセージを確認してください。
尚、PHPエラーメッセージはHTMLソース側の方で確認できる場合もありますが、どこにも表示されていない場合は、フォームページの先頭に以下のコードを記述すると、PHPエラーメッセージが出力されますので確認してみて下さい。
<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
?>
ファイルが添付されない！
ファイル送信時には enctype属性 が必須です。<form action="～～～.php" method="post" enctype="multipart/form-data"> となっていますか？
またはファイルの容量がサーバ設定を超えていないかなど、 <?php phpinfo(); ?> を実行するなどしてご確認下さい。