概要
チュートリアル第4回の今回は、Webフォームを作成します(前回の記事はこちら)。フォームはFMPress Formsエディターを利用して実装します。
フォームの作成
WordPressの管理画面の左ペインからお問い合わせを選択します。この画面には作成したフォームの一覧がリスト表示されます。
![Contact Form 7のフォーム一覧画面](https://forms.fmpress.jp/wp-content/uploads/2022/07/2022-07-29-14.07-1024x636.webp)
新規追加を選択します。
![Contact Form 7のフォーム一覧画面](https://forms.fmpress.jp/wp-content/uploads/2022/07/2022-07-29-14.07-1-1024x636.webp)
各タブの役割
各タブの役割を説明します。特にプラグインを追加していなければ以下のタブが表示されます。
- フォーム: フォームのテンプレートを編集
- メール: メールのテンプレートを編集
- メッセージ: 様々な状況で用いられるメッセージを編集
- その他の設定: カスタマイズのためのコードを設定
- FMPress: データソース、レイアウト、スクリプト、フィールドの割り当てを編集
![コンタクトフォームを追加](https://forms.fmpress.jp/wp-content/uploads/2022/07/2022-07-29-14.51-1024x636.webp)
フォームの作成
フォームタブを選択します。タイトルはお問い合わせフォームとします。フォームの内容を全て消して空の状態にして保存を選択して保存します。
![フォームの作成](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-14-14.16.23-1024x547.png)
フォームの入力項目は、本チュートリアルの第2回で作成したフィールド項目(以下)です。各入力項目はすべて必須項目とします。なお、IPアドレスとユーザーエージェントはフォームには追加せずに後述するフィールドの割り当てのみを行います。
- 会社名
- 氏名
- メールアドレス
- 種別
- 内容
- IPアドレス
- ユーザーエージェント
データソースとレイアウトの指定
FMPressタブを選択します。第3回で作成したデータソースとレイアウトを指定して保存を選択して保存します。
![データソースとレイアウトの指定](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-14-14.23.08-1024x546.png)
FMPress Formsエディターを利用した編集
FMPress Formsバージョン1.3.0以降ではFMPress FormsエディターというGUIで設定が可能なフォームエディターを利用できます。本記事ではこれを利用してフォームを編集します。
フォームタブに移動後、FMPress Formsエディターを選択します。
![FMPress Formsエディターを利用したフォーム編集](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-14-14.30.11-1024x541.png)
先に指定したデータソースのレイアウトにある全てのフィールドがフィールド項目として追加されます。
![指定したデータベースのレイアウト上にあるフィールドが追加された](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-14-14.43.53-1024x540.png)
フォーム項目の追加
会社名の隣にあるプラスアイコンを選択して、フォーム項目に追加します。フォーム項目として追加後、プラスアイコンは矢印アイコンに変化します。
![会社名を追加](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-17-16.38.29-1024x544.webp)
ラベルはFileMakerのフィールド名が自動的に割り当てられますが、別の文字列に変更することもできます。フォームタグのタイプは単一行テキストとします。必須項目にする場合は必須項目にチェックします。フォームタグの名前は自動的に割り当てられますが、分かりやすいものに変更しておくと後で判別しやすいでしょう。ここではcompanynameとしました。
第1回でLive Preview for Contact Form 7をインストールした場合は、画面を下にスクロールすると、フォームのプレビューを行うことができます。
![ライブプレビューを行う](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-14-14.55.07-1024x255.png)
同様に氏名を追加します。フォームタグのタイプは単一行テキスト、フォームタグの名前はnameとしました。
![氏名を追加](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-17-16.42.28-1024x538.webp)
メールアドレスを追加します。Contact Form 7のフォームタグのタイプにはメールアドレスがありますのでこれを利用します。フォームタグの名前はemailとしました。
![メールアドレスを追加](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-17-16.46.53-1024x538.webp)
種別を追加します。このフィールドはFileMakerデータベースのレイアウトにてコントロールスタイルがラジオボタンとされており、categoryという名称の値一覧がセットされています。
フォーム項目として追加するとフォームタグのタイプは自動的にラジオボタンとして認識され、値一覧名もセットされます。フォームタグの名前はcategoryとしました(値一覧と同一にする必要はありません)。
![種別を追加](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-17-16.50.46-1024x537.webp)
プレビューするとFileMakerのレイアウトで指定された値一覧がセットされたラジオボタンとなっていることがわかります。
![ラジオボタンのライブプレビューを行う](https://forms.fmpress.jp/wp-content/uploads/2022/07/2022-10-14-15.09.43-1024x357.png)
内容を追加します。フォームの利用者が記入しやすいよう、ラベルをお問い合わせ内容に変更しました。複数行のテキストを入力する場合は、フォームタグのタイプを複数行テキストとします。フォームタグの名前はbodyとしました。
![お問い合わせ内容を追加](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-17-16.54.44-1024x537.webp)
プレビューすると変更したラベルが反映されており、複数行が入力可能な項目となっていることがわかります。
![お問い合わせ内容のライブプレビューを行う](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-14-15.22.59-1024x514.png)
フォーム項目の追加が完了したら、保存を選択して保存します。
![フォームを保存](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-14-15.25.22-1024x514.png)
下記のようなダイアログが表示された場合は、既にあるフォームを上書きして問題ないかを確認の上で保存します。
![フォームを保存する際のダイアログ](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-14-15.26.30-1024x514.png)
FMPress Formsエディターの画面で保存を行うとFMPress Formsエディターは終了し、Contact Form 7のエディターに戻ります。
![保存後はCF7のエディターに戻る](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-17-16.56.59-1024x538.webp)
保存ボタンの追加
フォームに保存ボタンを追加するため、エディターに改行を追加してマウスカーソルを移動させます。
![保存ボタンを追加するためにカーソルを移動させる](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-17-16.58.10-1024x538.webp)
Contact Form 7のエディター内にある送信ボタンを選択します。
![CF7のエディター内にある送信ボタンを選択](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-17-17.00.48-1024x537.webp)
ラベルを指定してタグを挿入を選択します。
![送信ボタンを追加](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-17-17.01.57-1024x538.webp)
エディターの最後に送信ボタンが追加されました。
![送信ボタンを追加](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-17-17.02.51-1024x538.webp)
プレビューすると送信ボタンが追加されています。保存ボタンを選択して保存を行います。
![ライブプレビューを行う](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-17-17.04.32-1024x538.webp)
フィールドの割り当て
FMPressタブを選択します。このタブにはフィールドの割り当てという項目があります。これはContact Form 7 のフォームタグにFileMakerデータベースのフィールドを割り当てる機能です。すでにFMPress Formsエディターが自動的にFileMakerデータベースのフィールドを割り当てています。念のため、正しく割り当てられているかを確認しておきましょう。
![フィールドの割り当てを確認](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-17-17.16.30-1024x564.webp)
特別なメールタグの割り当て
Contact Form 7には特別なメールタグというタグがあります。これは本来はフォーム送信後に自動で送信されるメール(次回の記事にて解説します)内で利用するものですが、FMPress Formsでは送信者のIPアドレスと送信者のユーザーエージェントをデータベースに保存するために利用できます。
フィールドの割り当ての最上段には特別なメールタグである_rempte_ipと_user_agentが常に表示されています。これらにFileMakerデータベースのフィールドであるIPアドレスとユーザーエージェントを割り当てることで送信者の情報をデータベースに保存できます。
![特別なメールタグの割り当て](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-17-17.24.51-1024x441.webp)
フォームの設置
フォームは作成しただけでは公開できません。作成したフォームを固定ページや投稿に設置し、その固定ページや投稿を公開するのがWordPressの流儀です。今回は固定ページにフォームを設置しますので、左ペインから固定ページを選択し、新規追加を選択します。
![フォームの設置](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-17-17.31.13-1024x439.webp)
固定ページのタイトルはお問い合わせフォームとします。+アイコンのブロック挿入ツールを選択します。
![ブロック挿入ツールを表示](https://forms.fmpress.jp/wp-content/uploads/2022/07/2022-07-29-18.40-1024x636.webp)
下にスクロールすると表示されるContact Form 7のブロックを選択します。すると、本文エリアに新しいブロックが追加されます。追加されたブロックのプルダウンからお問い合わせフォームを選択します。
![フォームブロックの追加](https://forms.fmpress.jp/wp-content/uploads/2022/07/2022-07-29-18.33-1024x636.webp)
固定ページを保存後、プレビューを展開して新しいタブでプレビューを選択すると、Webブラウザーの新しいタブで固定ページをプレビューできます(この時点では公開は押さないでください)。
![固定ページをプレビュー](https://forms.fmpress.jp/wp-content/uploads/2022/07/2022-07-29-18.34-1024x636.webp)
このようなフォームが表示されていればOKです。必要に応じて見出しや説明文を追加しましょう。なお、フォームのデザインは利用しているWordPressのテーマによって異なります。
![完成したフォーム](https://forms.fmpress.jp/wp-content/uploads/2022/10/2022-10-17-17.47.45-1024x601.webp)
接続テストが完了したら次の記事(メールの設定)に進みましょう。お疲れ様でした。