「フォームを作ったのに、どこに設置すればいいかわからない……」
YL Contact Formは、管理画面でフォームを作って、ショートコードを貼るだけで設置完了します。この記事では、インストールから実際にフォームが動き始めるまでの手順を、画面キャプチャつきで丁寧に解説します。
目次
事前に準備するもの
- ライセンスキー：購入完了メールに記載されています（例：YLCF-XXXX-XXXX-XXXX）
- 送信先メールアドレス：お問い合わせを受け取るメールアドレス
- reCAPTCHAのキー（任意）：スパム対策を強化したい場合。Google Search Consoleと同じGoogleアカウントで取得できます
reCAPTCHAなしでもハニーポットと送信レート制限によるスパム対策は有効です。まずはreCAPTCHAなしで設定を進めてもOKです。
ステップ1：プラグインをWordPressにインストールする
購入完了メールに記載されているダウンロードリンクから、プラグインのzipファイルをダウンロードします。
WordPressの管理画面を開き、左メニューの「プラグイン → 新規追加」をクリックします。
画面上部の「プラグインのアップロード」ボタンをクリックし、zipファイルを選択して「今すぐインストール」をクリックします。インストール完了後、「プラグインを有効化」をクリックします。
有効化が完了すると、左メニューに「お問い合わせフォーム」が追加されます。
ステップ2：ライセンスキーを認証する
左メニューの「お問い合わせフォーム」をクリックし、「ライセンス」タブを開きます。
ライセンスキー入力欄に購入完了メールのキーを貼り付け、「有効化する」をクリックします。「認証済み」と表示されたら完了です。
ステップ3：フォームを作成する
「フォーム管理」タブをクリックし、「新規作成」ボタンをクリックします。
フォーム編集画面が開きます。まずフォーム名を入力してください（管理用の名前で、サイトには表示されません）。
項目の追加方法
画面左側のパーツ一覧から追加したい項目の「追加」ボタンをクリックすると、下側のフォーム構成に項目が追加されます。
追加した項目はドラッグ＆ドロップで順番を変えられます。各項目の帯をクリックすると、ラベル・プレースホルダー・必須設定などを変更できます。
| パーツ | 用途 |
|---|---|
| テキスト | お名前・会社名など1行のテキスト入力欄 |
| メール | メールアドレス入力欄。形式チェック（@が必要など）が自動で行われます |
| 電話番号 | 電話番号入力欄。数字・ハイフンなどを入力できます |
| URL | ウェブサイトURLの入力欄。形式チェック付き |
| テキストエリア | お問い合わせ内容など、複数行の長文テキスト入力欄 |
| セレクト | ドロップダウンリストから1つを選択する項目。選択肢は管理画面で自由に設定できます |
| チェックボックス | 複数の選択肢から1つ以上を選べる項目。希望サービスの選択などに使います |
| ラジオ | 複数の選択肢から1つだけ選ぶ項目。セレクトと異なり選択肢が並んで表示されます |
| 日付 | カレンダーから日付を選択できる入力欄。訪問希望日・予約日などに使います |
| ファイル添付 | 画像・PDF・Wordなどのファイルをアップロードできる項目。許可する拡張子とサイズ上限は設定で変更できます |
| 郵便番号・住所 | 郵便番号を入力すると都道府県・住所が自動入力される住所入力欄 |
| 利用規約への同意 | 「利用規約に同意する」チェックボックスを設置できます。管理画面で利用規約ページのURLを指定すると、チェックボックスのラベルにリンクが自動で追加されます。必須設定にすることで、未チェックのまま送信できなくなります。 |
ステップ4：メール設定をする
「メール設定」タブをクリックします。ここでは2種類のメールを設定します。
管理者への通知メール
フォームが送信されたときに、あなた（管理者）に届くメールです。「送信先メールアドレス」に受け取りたいアドレスを入力します。
自動返信メール
送信者に自動で届く「受付完了メール」の設定です。件名・本文を入力し、フォームの入力内容は {フィールド名} の変数で差し込めます。
例：本文に {your_name} と書くと、送信者のお名前が自動で入ります。
ステップ5：デザインを設定する（任意）
「デザイン設定」タブでは、フォームの見た目をカラーピッカーで調整できます。サイトのブランドカラーに合わせて変更しましょう。
- メインカラー：入力欄のボーダーカラーや送信ボタンの色
- 送信ボタンの文字色：ボタン上のテキストの色
- プレースホルダーの色：入力欄のヒントテキストの色
ステップ6：フォームを保存してショートコードを取得する
設定が完了したら「保存する」ボタンをクリックします。保存すると、フォーム一覧にショートコードが表示されます。
このショートコードをコピーしておきます。
ステップ7：ページにフォームを設置する
フォームを表示させたいページをWordPressのエディターで開きます。「カスタムHTML」ブロックを追加して、コピーしたショートコードを貼り付けます。
ページを公開（または更新）して、実際の表示を確認してください。
ステップ8：送信テストをする
実際にフォームから送信して、以下を確認してください。
- 管理者に通知メールが届くか
- 送信者に自動返信メールが届くか
- 必須項目が空のときにエラーメッセージが表示されるか
- 送信完了後にサンクスメッセージが表示されるか
- スマートフォンで入力しやすいか
送信ログを確認する
フォームへの送信内容は、管理画面の「送信ログ」タブで一覧確認できます。メールが届かない場合もここで送信記録を確認できるので安心です。ログはCSVでダウンロードすることもできます。
よくある質問
メールが届かない
まず管理画面の「送信ログ」で送信記録があるか確認してください。記録はあるのにメールが届かない場合は、サーバーのメール設定の問題です。WP Mail SMTPなどのプラグインを使ってGmailやSendGrid経由で送信する設定をお試しください。
複数のページに同じフォームを設置したい
同じショートコードを複数のページに貼り付けるだけでOKです。フォームは何ページにでも設置できます。
フォームを複数作りたい
フォームの作成数は無制限です。「新規作成」から同じ手順で追加でき、ショートコードのID番号が自動的に割り振られます（例：）。
まとめ：設定完了までの流れ
| ステップ | 作業内容 | 目安時間 |
|---|---|---|
| 1 | プラグインをインストール・有効化 | 5分 |
| 2 | ライセンスキーを認証 | 2分 |
| 3 | フォームの項目を作成 | 10分 |
| 4 | メール設定 | 5分 |
| 5 | デザイン調整（任意） | 5分 |
| 6 | ショートコードをページに設置 | 3分 |
| 7 | 送信テスト | 5分 |
操作でわからないことや、うまく動作しない場合は、ヨコハマラボまでお気軽にお問い合わせください。日本語でサポートします。