自動フォーム作成ツールV2利用方法
自動フォームV2は、以前より提供している自動フォームツールをもとに画面を変更して、若干の機能修正を加えています。
自動フォームの目的
自動フォームは、画面からの入力をもとに、お問い合わせフォームなどを作成するツールです。
ブラウザから入力して、結果をメールで送信する様な用途であれば、幅広くご利用いただけます。
利用方法
画面は3つの部分に分かれています。
「基本情報」では、作成するフォームの名称、メール送信時の文面、送信先などの情報を入力します。
「入力項目設定」では、フォームで入力する項目の設定を行います。
項目数は、最大100項目まで作成できます。
「出力処理」では、入力した情報をもとに、フォームのHTMLとプログラムをZIPファイルにしてダウンロードすることができます。
また、入力した内容を「設定ファイル」として保存することができ、これを読み込んで、フォーム作成を行うことができます。
設定ファイルは、以前の自動フォームのものも読み込めますが、V2で作成した設定ファイルは、以前の自動フォームでは読み込むことはできません。
サンプルの設定で試してみたい場合は、サンプル設定で試してみるからどうぞ。
作成されたフォームの例は、サンプルフォームの例からどうぞ。
フォーム作成方法
各画面ごとに入力方法を説明いたします。
画面の変更は、上部のタブ上になった部分をクリックします。
起動直後は、「基本情報」が表示され、その部分のタブが黒い文字で表示されています。
「入力項目設定」「出力処理」画面へは、そのタブ部分をクリックしてください。
タブが切り替わり、そのタブ部分が黒い文字で表示されます。
基本情報
基本情報画面は、設定の読み込みと、基本情報の入力部分に分かれています。
設定の読み込み
以前の自動フォームやこの自動フォームV2の設定ファイルを読み込む機能です。
設定ファイルを読み込むことで、以前作成したフォームの情報を元に、新たなフォームを作成することができます。
「ファイルを選択」のボタンを押すと、ファイル選択のダイアログが出てきますので、設定ファイルを指定していします。
ファイル指定の方法は、お使いの機器やブラウザにより異なります。
ファイルを指定したら、「設定の読み込み」ボタンを押します。
設定が読み込まれ、下の基本情報などに反映されます。
※設定ファイル以外をしてしてもエラーなどは出ません。
基本情報
基本情報は、作成するフォームに関する情報を入力します。
| 項目名 | 内容 |
|---|---|
| フォームタイトル | フォームの上部に表示される名称です。 例：お問い合わせ |
| ユーザ向けメール件名 | ユーザにメールを送信する場合の件名です。 例：お問い合わせ受付の通知 |
| ユーザ向けメール本文 | ユーザーにメールを送る場合のメール先頭部分の文面です。 例：ご入力ありがとうございました。 |
| 管理者向けメール件名 | 管理者に送られるメールの件名です。 例：問い合わせがありました。 |
| 管理者向けメール本文 | 管理者に送られるメールの先頭部分の文面です。 例：問い合わせは1日以内に処理してください。 |
| 送信元メールアドレス | 送信されるメールの送信元として表示されるメールアドレスです。変身ボタンを押すと、ここに送信されることが多いです。 |
| 管理者メールアドレス | 管理者のメールアドレスです。入力の結果はここへメールで送られます。 |
| 送信元名称 | 送信元として表示される名前です。 例：○✕商店 |
| 署名 | メールの最後に付け加えられる文面です。 例：=-=-=-=-=-=- ○✕商店 Mail:xx@yy |
| 確認メッセージ | フォームの確認画面に表示される文面です。 例：下記の内容で良ければ「送信」を押してください。 |
| 完了メッセージ | フォームの送信完了時に表示される文面です。 例：お問い合わせありがとうございました。 改めて回答を差し上げます。 |
| 入力項目先頭 | 設定するとメールの各入力項目の先頭に表示されます。例：● |
入力項目設定
入力項目設定では、フォームの各入力項目を最大100個まで設定できます。
最初は、項目1が1つだけ表示されています。
下の「追加」ボタンを押すと、項目が追加されます。
項目番号をクリックすると、項目を閉じておくことができます。閉じていても、内容は有効です。
項目番号右恥の✕をクリックすると、その項目は削除されます。
削除の際は、確認メッセージが出ますが、確認すると、内容はもとには戻せませんので、ご注意ください。
●入力項目
各項目の内容について説明します。
| 項目名 | 内容 |
|---|---|
| 項目見出し | 入力項目の名称です。入力項目の前に表示されます。 |
| 機能 | 入力方法を指定します。下の説明を参照してください。 |
| 選択肢 | 入力方法が、選択の場合に選択肢を、1行1つで記入します。 |
| 必須項目 | この入力項目が必須の場合にチェックします。 必須に指定した項目は、必ず入力しないとフォームが先に進みません。 |
| 入力チェック | 入力に対して、チェックが必要な場合は、ここでチェック方法を指定します。 |
| 説明 | 入力欄の下に表示する説明文です。 利用者に入力方法などを指示する場合などに利用します。 |
●機能
機能の選択肢は、次のものがあります。
| 機能 | 内容 |
|---|---|
| 見出し | 入力項目ではなく、単に表示されます。 入力項目のグループなどをわかりやすくするために使います。 |
| 1行テキスト入力 | 一般的な1行の自由入力です。名前やメールアドレスなどに使用します。 |
| 単一選択（ラジオボタン） | 複数の中から1つだけ選択させる場合に使用します。 ラジオボタンで表示されます。 選択肢は、「選択肢」欄に1項目1行で書きます。 |
| 複数選択（チェックボックス） | 複数の中から1つ以上選択させる場合に使用します。 チェックボックスで表示されます。 選択肢は、「選択肢」欄に1項目1行で書きます。 |
| 選択（プルダウン） | 複数の中から1つだけ選択させる場合に使用します。 プルダウンで表示されます。 選択肢は、「選択肢」欄に1項目1行で書きます。 複数選択のプルダウンには対応していません。 |
| 複数個1行テキスト入力 | 1つの入力項目ですが、複数の1行入力枠が設定できます。 入力の数は、「選択肢」欄に先頭に表示する名称を必要な行数書きます。 「・」などでも構いません。 |
| 複数行テキスト入力（10行） | 複数行の入力です。10行分の入力枠が表示されます。 |
| 複数行テキスト入力（3行） | 複数行の入力です。3行分の入力枠が表示されます。 |
| 住所 | 都道府県の選択と、以降の住所の入力欄が表示されます。 |
| 年月日 | 年月日の入力が表示されます。 |
| 月日 | 年月の入力が表示されます。 |
| ファイル | ファイル選択の入力が表示されます。 ファイルはメールに添付されます。 |
| キャプチャ | スパム防止のための、キャプチャ機能です。 英字4文字の画像と入力枠が表示されます。 画像の文字を読み取って入力枠に記入しないと、フォームが先に進みません。 |
●入力チェック
ここを指定することで、入力内容のチェックを行うことができます。
次のチェックがあります。
| チェック | 内容 |
|---|---|
| チェックなし | 入力欄のチェックは行いません。 |
| 電話番号チェック | 半角数字と半角-のみが入力されていることをチェックします。 |
| メールチェック | メールアドレスの書式にあっているかチェックします。 |
| メールチェック （ユーザーに送信するメールアドレス） |
メールアドレスの書式にあっているかチェックします。 これを選択すると、この入力項目がユーザ宛のメールアドレスとして使われます。 |
| メール一致チェック | 直前のメール項目の内容と一致するかチェックします。 |
| URLチェック | URLの書式にあっているかをチェックします。 |
| キャプチャチェック | キャプチャ入力の場合に選択します。 |
※入力項目とチェックが適切でないと、思った通りの動作になりません。また、エラーも出ませんのでご注意ください。
出力処理
出力処理では、入力した設定内容の保存と、生成されたフォーム用のHTMLとプログラムをダウンロードすることができます。
●設定保存
「設定保存」を押すと、入力した「基本情報」「入力項目設定」の内容が記録された設定ファイルがダウンロードできます。
このファイルは、「基本情報」の「設定の読み込み」で読み込むことができるファイルです。
※ダウンロードした設定ファイルは、自動フォームV2専用で、従来の自動フォームでは読み込めません。
●フォーム作成（テンプレートファイル指定）
フォームの雛形（テンプレート）ファイルを指定して、フォームを生成します。
HTMLファイルを入力に指定します。このファイルには、フォームを埋め込むための目印「
目的の場所に出力されない場合は、「」に置き換えて見てください。
入力に想定するHTMLファイルは、テンプレートパーティさんのテンプレートに含まれる入力フォームを想定しています。
このため、他のHTMLを使用する場合は、生成されたフォームのスタイル指定を調整する必要があるかもしれません。
●フォーム作成（ファイル指定なし）
当方で用意したフォームの雛形を使用してフォームを生成します。
デザインは限定されますが、こちらで用意したファイルを使用するので、HTMLファイルを指定する必要はありません。
デザインは、Bootstrap5 を元に作成されています。
Bootstrap5の機能に従って修正すれば、ある程度のデザイン変更が可能です。
フォームの設置方法
フォームを動作させるには、サーバーが必要になります。
生成されたフォームは、PHPプログラムで動作しますので、PHPが利用できるサーバーが必要です。
ファイルの展開
ダウンロードしたファイルはZIP（圧縮）ファイルです。
まずこのファイルを展開して、中のファイルを取り出す必要があります。
展開方法については、ご利用のOSにより異なりますので、各々の方法に従ってください。
展開すると5つのファイルが作成されます。
| ファイル | 内容 |
|---|---|
| form.php | フォームの処理をするプログラム本体です。 フォームを実行するには、URLでこのファイルを指定します。 |
| form.html | フォームの入力ページのHTMLファイルです。 form.phpから読み込まれますので、直接URLで指定しないでください。。 |
| confirm.html | フォームの確認ページのHTMLファイルです。 form.phpから読み込まれますので、直接URLで指定しないでください。 |
| finish.html | フォームの終了ページのHTMLファイルです。 form.phpから読み込まれますので、直接URLで指定しないでください。 |
| readme.txt | ファイルの説明文です。テキストエディタで表示できます。 フォームの実行には不要です。 |
ファイルの転送
readme.txtを除く4つのファイルをサーバーへ転送します。
ファイルを転送する場所はどこでも構いませんが、すでにあるファイルを上書きするなどの事故を防止するため、新たなディレクトリを作成してそこへ転送することをおすすめします。
転送方法は、一般的にFTPなどの転送プログラムを使用しますが、通常ご利用のサーバーに転送方法の説明などがありますので、それを参考にしてください。
動作確認
転送が終わったら、正常に動作するか確認をしてください。
転送したサーバーのURLとディレクトリをブラウザから開きます。
https://<サーバーのドメイン>/<転送したディレクトリ>/form.php
例えば当方のサイトで、contactというディレクトリに転送した場合、次のようになります。
https://q19cms.com/contact/form.php
もし、専用のディレクトリに転送して、他にファイルなどがない場合は、form.phpをindex.phpに名前を変え、次のように指定することも出来ます。
https://q19cms.com/contact/
この場合でも、他のHTMLファイルは、そのままの名前としてください。
※不明な点などありましたら、掲示板からお問い合わせください。
[2023/1/26 β版] q19cms.com