Shed Formをインストールしたら、次は、お問い合わせフォームを作ります。この記事では、フォームを新しく作って、項目を並べて、固定ページに設置し、実際に入力するところまでを、画面を見ながら説明します。
Shed Formのフォームは、入力 → 確認 → 完了の3つのステップで送信されます。入力のあとに確認画面が出るので、送る人が、内容を見直せます。この記事の最後で、この流れを実際に試します。
Shed Formのインストールが、まだのときは、インストール編を先にご覧ください。
フォームを新しく作る
- WordPressの管理画面で、Shed Form → フォーム一覧を開きます。
- 上の新規作成を押します。
- 「フォームタイトル」の欄に、名前を入力します。管理画面で見分けるための名前なので、公開ページには出ません（例：お問い合わせフォーム）。
- 作成を押します。
作成すると、そのフォームの編集画面が開きます。まだ、項目は入っていません。
同じ画面に、サンプル登録というボタンもあります。あらかじめ項目が入った「サンプルフォーム」を、1つ作ります。項目の入れ方を、見本で確かめたいときに使えます。
項目を追加する
編集画面は、フィールド設定のタブから始まります。左側で、フォームの項目を並べます。右側のプレビューには、公開ページと同じ見た目が、その場で表示されます。
- 画像の4の行を追加を押します。行が1つ増えます。
- 行の中の＋フィールド追加を押します。
- 項目の設定画面が開くので、内容を入力して、保存を押します。
行や項目の追加・編集・削除は、自動で保存されます（画像の2）。ただし、画像の1にあるレイアウトを変更した場合は、レイアウト保存のボタンを押す必要があります。
項目の設定画面
| 項目 | 内容 |
|---|---|
| フィールドタイプ | 項目の種類（テキスト、メールアドレスなど。あとの表を参照） |
| ラベル | 項目の名前。入力欄のそばに表示されます（例：お名前） |
| フィールドキー | 項目を区別するための名前（下で説明します） |
| プレースホルダー | 入力欄の中に、薄く表示される例（例：山田 太郎） |
| 補足説明 | 入力欄の下に表示される、案内の文章（省略できます） |
| 必須 | 「必須項目にする」にチェックを入れると、入力しないと送信できません |
| 初期値 | 最初から入っている値（省略できます） |
フィールドキーについて
フィールドキーは、メールの本文などに、その項目の入力内容を差し込むときに使う名前です。空欄のままでも、保存できます。その場合は、shedform_1、shedform_2 のように、番号で自動的に付けられます。
初めて作るときは、空欄のままで、かまいません。ただ、メールの本文に項目を差し込むときに、{shedform_1} では、どの項目か分かりにくくなります。気になるときは、shedform_name のように、自分で名前を付けておきます。使えるのは、半角の英小文字、数字、アンダースコア（_）、ハイフン（-）です。
メールへの差し込み方は、自動返信メールと管理者通知メールの設定方法で説明しています。
項目の種類
フィールドタイプは、次の12種類から選べます。よく使うのは、テキスト、メールアドレス、テキストエリアです。
| フィールドタイプ | 使いどころ |
|---|---|
| テキスト | お名前、会社名など、1行の入力 |
| テキストエリア | お問い合わせ内容など、複数行の入力 |
| メールアドレス | メールアドレス（形式を確認します） |
| 電話番号 | 電話番号 |
| 数値 | 人数、金額など、数字の入力 |
| セレクトボックス | 一覧から1つ選ぶ |
| ラジオボタン | いくつかの選択肢から1つ選ぶ |
| チェックボックス | いくつかの選択肢から、複数選ぶ |
| 同意チェックボックス | プライバシーポリシーへの同意など |
| 日付 | 日付の入力 |
| ファイル添付 | ファイルを添付してもらう |
| 隠し項目 | 画面には出さずに、値だけを受け取る |
レイアウトと列を選ぶ
項目の並べ方は、2か所で決めます。
- フォーム全体のレイアウト：編集画面の上にある、「レイアウト」の選択です。テーブル型・スタック型・インライン型・DL型の4種類から選びます。選んだら、レイアウト保存を押します。
- 行ごとの列：行の右上にある選択です。1列（100%）のほか、2列、3列、4列など、9通りがあります。たとえば、「姓」と「名」を、横に並べたいときに使います。
どちらを変えても、右側のプレビューで、すぐに確認できます。迷ったときは、初期値のままで、かまいません。
メールの初期設定を確認する
フォームを作ると、メールの設定は、最初から入っています。メール設定のタブで、次の点を確認してください。
- 管理者通知と自動返信は、どちらも、最初から「送信する」になっています。
- 管理者通知の送信先には、WordPressに登録されている、サイトの管理者のメールアドレスが入っています。
- メールの本文は、
{all_fields}（すべての入力内容を、まとめて一覧にしたもの）になっています。
つまずきやすい点
件名の初期値には、{shedform_subject}が入っています。これは、「shedform_subject」というフィールドキーの項目があるときだけ、その入力内容に置き換わります。この記事のフォームのように、その項目が無いと、置き換わらず、{shedform_subject}という文字が、そのまま件名に残ります。件名は、必ず確認して、必要に応じて直してください。
自動返信の送信先は、初期値が空欄です。自動返信を使うときは、メールアドレスの項目のフィールドキーを、{shedform_2}のように、波かっこで囲んで入れます。
どちらも、自動返信メールと管理者通知メールの設定方法に、手順を書いています。
固定ページに設置する
フォームは、ショートコードで、固定ページに表示します。ショートコードは、編集画面の左上に出ています。
- ショートコード横のコピーを押します（例：
- 固定ページ → 新規追加を開きます。
- タイトルを入力します（例：お問い合わせ）。
- ブロックエディターでは、ショートコードのブロックを追加して、コピーしたものを貼り付けます。
- 右上の公開を押します。
フォームの保存と、固定ページの公開は、別の操作です。フォームを作っただけでは、サイト上には表示されません。フォームを設置した固定ページを公開すると、訪問者にも表示されます。
表示と送信を確認する
公開した固定ページを、開いてみます。入力画面が表示されます。
必須の項目に入力して、確認画面へを押します。
確認画面に、入力した内容が表示されます。直すときは戻る、よければ送信するを押します。送信すると、完了のメッセージ（初期値は「お問い合わせありがとうございます。」）が表示されます。
確認画面が表示された段階では、まだ送信されていません。最後の「送信する」まで進めてください。
送信のあとに見る場所
- Shed Form → 送信履歴：送られた内容を、あとから見られます。
- Shed Form → メール送信履歴：メールが送られたかどうかが、分かります。
テストするときは、自分が受け取れるメールアドレスで送り、メールが届くことも確かめてください。
うまくいかないときは
ページに、フォームが表示されない
- 固定ページが、公開されているか（下書きのままではないか）。
- ショートコードの
idの数字が、フォームの番号と合っているか。 - フォームの基本設定タブで、「このフォームを有効にする」にチェックが入っているか。チェックを外すと、フォームは表示されません。
必須の項目を入れても、送信できない
項目ごとに、入力の決まり（メールアドレスの形式など）があります。エラーの文は、画面に表示されます。文言は、フォームのエラー文言タブで、変えられます。
迷惑な送信が届く
公開したフォームには、営業メールなどの、意味のない送信が届くことがあります。対策として、Cloudflare Turnstileを使えます。設定の手順は、Shed FormにCloudflare Turnstileを設定する方法にあります。