基本的なフォームの作成方法

基本的なフォームの作成方法

FormNestを使用して、初めてのフォームを作成する方法を詳しく解説します。この記事では、お問い合わせフォームを例に、ステップバイステップで説明します。

フォーム作成の流れ

フォーム作成は、以下の5つのステップで完了します：

1. フォームの新規作成
2. フィールドの追加
3. フィールドの設定
4. フォームの保存
5. フォームの表示

ステップ1: フォームの新規作成

まず、新しいフォームを作成します。

1. WordPress管理画面にログインします
2. 左メニューから「FormNest」→「フォーム管理」をクリック
3. 「新規フォーム作成」ボタンをクリック
4. フォーム基本情報を入力：
   • フォーム名（必須）：例「お問い合わせフォーム」
   • フォーム説明（任意）：フォームの用途や説明を入力
5. 「保存」ボタンをクリック

💡 ヒント： フォーム名は、後で管理画面で識別しやすい名前を付けましょう。例：「お問い合わせフォーム」「資料請求フォーム」「イベント申込フォーム」など

ステップ2: フィールドの追加

フォームに必要なフィールドを追加します。FormNestでは、ドラッグ&ドロップで簡単にフィールドを追加できます。

フィールド追加の基本操作

1. フォーム編集画面の左側に表示されている「フィールドタイプ」一覧から、追加したいフィールドを選択
2. 選択したフィールドを、右側の「フォームプレビュー」エリアにドラッグ&ドロップ
3. フィールドが追加されたことを確認

💡 ヒント： フィールドタイプのアイコンをクリックしても追加できます。

お問い合わせフォームの例

基本的なお問い合わせフォームには、以下のフィールドが含まれます：

1. 名前（テキストフィールド）- 必須
2. メールアドレス（メールアドレスフィールド）- 必須
3. 電話番号（電話番号フィールド）- 任意
4. お問い合わせ内容（テキストエリアフィールド）- 必須

これらのフィールドを順番に追加していきましょう。

ステップ3: フィールドの設定

追加したフィールドをクリックすると、フィールド設定画面が開きます。各フィールドの設定を行います。

基本的な設定項目

すべてのフィールドに共通する設定項目：

• フィールド名：内部で使用される識別名（英数字とアンダースコアのみ）
• フィールドラベル：ユーザーに表示されるラベル（例：「お名前」「メールアドレス」）
• 必須項目：チェックを入れると必須フィールドになります
• プレースホルダー：入力例を表示（例：「山田太郎」「example@email.com」）
• 説明文：フィールドの下に表示される補足説明

各フィールドの設定例

1. 名前フィールド（テキスト）

• フィールド名：name
• フィールドラベル：お名前
• 必須項目：✓ チェック
• プレースホルダー：山田太郎
• 最大文字数：50（任意）

2. メールアドレスフィールド

• フィールド名：email
• フィールドラベル：メールアドレス
• 必須項目：✓ チェック
• プレースホルダー：example@email.com
• 確認用メールアドレス：必要に応じて有効化

3. 電話番号フィールド

• フィールド名：tel
• フィールドラベル：電話番号
• 必須項目：チェックなし（任意項目）
• プレースホルダー：090-1234-5678

4. お問い合わせ内容フィールド（テキストエリア）

• フィールド名：message
• フィールドラベル：お問い合わせ内容
• 必須項目：✓ チェック
• プレースホルダー：お問い合わせ内容をご記入ください
• 行数：5行（任意）
• 最大文字数：1000（任意）

フィールド設定の保存

各フィールドの設定が完了したら：

1. 設定画面の「保存」ボタンをクリック
2. 設定が反映されたことを確認
3. 次のフィールドの設定に進む

ステップ4: フィールドの並び替え

フィールドの表示順序を変更できます。

並び替え方法

方法1: ドラッグ&ドロップ

1. 並び替えたいフィールドをクリックして選択
2. フィールドを上下にドラッグ
3. 希望の位置でドロップ

方法2: 上下ボタンを使用

1. 並び替えたいフィールドをクリック
2. フィールド設定画面の「↑」「↓」ボタンをクリック
3. 順序が変更されたことを確認

ステップ5: フォームの保存

すべてのフィールドの設定が完了したら、フォームを保存します。

1. フォーム編集画面の右上にある「保存」ボタンをクリック
2. 保存が完了すると、成功メッセージが表示されます
3. フォーム一覧に戻り、作成したフォームが表示されていることを確認

💡 ヒント： 編集中は定期的に保存することをお勧めします。ブラウザを閉じる前に必ず保存してください。

ステップ6: フォームの表示（ショートコードの取得）

作成したフォームをサイトに表示するには、ショートコードを使用します。

1. フォーム一覧画面で、作成したフォームの「ショートコード」列を確認
2. 表示されているショートコードをコピー（例：[wp_formnest id="1"]）
3. WordPressの投稿や固定ページの編集画面を開く
4. 本文エリアにショートコードを貼り付け
5. 「公開」または「更新」をクリック

💡 ヒント： ショートコードは、投稿・固定ページ・ウィジェットのどこにでも配置できます。

利用可能なフィールドタイプ

FormNestでは、以下のフィールドタイプが利用できます：

よくある質問

Q: フィールドを削除したい場合は？

A: フィールドをクリックして設定画面を開き、「削除」ボタンをクリックしてください。確認メッセージが表示されるので、「削除」を選択します。

Q: フィールドを複製できますか？

A: 現在のバージョンでは、フィールドの複製機能はありません。同じ設定のフィールドが必要な場合は、新しく追加して設定してください。

Q: フォームのプレビューは見られますか？

A: はい、フォーム編集画面の右側に「フォームプレビュー」が表示されます。実際の表示に近い形で確認できます。

Q: 必須項目の設定を後から変更できますか？

A: はい、いつでも変更できます。フィールドをクリックして設定画面を開き、「必須項目」のチェックを変更して保存してください。

Q: フィールド名は日本語でも大丈夫ですか？

A: フィールド名は英数字とアンダースコアのみ使用できます。日本語は使用できません。フィールドラベルには日本語が使用できます。

次のステップ

基本的なフォームが作成できたら、以下の機能も試してみましょう：

• メール設定：フォーム送信時にメール通知を受け取る設定
• 確認画面の設定：送信前に内容を確認できる画面を追加
• フィールドの詳細設定：バリデーション、条件分岐などの高度な設定
• フォームのデザインカスタマイズ：CSSでフォームの見た目を調整

詳細については、以下の記事を参照してください：

• メール設定方法
• フォームフロー設定
• フィールドの詳細設定

まとめ

FormNestを使った基本的なフォーム作成の手順は以下の通りです：

1. フォームの新規作成（フォーム名と説明を入力）
2. フィールドの追加（ドラッグ&ドロップで簡単追加）
3. フィールドの設定（ラベル、必須項目、プレースホルダーなど）
4. フィールドの並び替え（必要に応じて）
5. フォームの保存
6. ショートコードを取得してページに表示

最初はシンプルなフォームから始めて、慣れてきたら複雑な設定に挑戦してみてください。問題が解決しない場合は、ヘルプページの「よくある問題と解決方法」セクションを確認するか、サポートにお問い合わせください。