Contact Form by gripspace は、お問い合わせフォームをコードを書かずに作れる WordPress プラグインです。確認画面、自動返信メール、送信内容の保存、日時を選んでもらう予約カレンダーまで、ひとつのプラグインで扱えます。

この記事では、インストールしてからフォームをページに置くまでの手順と、予約カレンダーや外部サービスとの連携のような少し踏み込んだ設定を、管理画面に出てくる名前のまま説明します。内容はバージョン 0.11.5 時点のものです。

このプラグインは、当サイト（ワプラボ）を運営する ibis studio株式会社が開発し、WordPress.org で無料公開しています。開発元が書いている説明であることをご了承ください。

できること

• ドラッグ&ドロップでフォームを作る（テンプレートから始めることもできます）
• 送信前の確認画面、入力しやすくする仕組み（EFO）、reCAPTCHA によるスパム対策
• 管理者宛の通知メールと、送信者への自動返信メール
• 送信内容を WordPress の中に保存し、管理画面で一覧・詳細を確認する
• 予約カレンダー（空いている時間枠から選んでもらい、埋まった枠は出さない）
• 任意で Zoom や Google と連携し、予約と同時に会議URLの発行やカレンダー登録を行う
• 任意で grip space（外部サービス）と連携し、訪問企業の把握やアクセスレポートを使う

フォームを作って送信を受け取るだけなら、外部サービスのアカウントは要りません。Zoom・Google・grip space との連携は、必要な人だけが後から足す機能です。

インストールと有効化

動作要件は WordPress 5.8 以上、PHP 7.4 以上です。WordPress.org で公開しているので、管理画面から検索して入れられます。

1. 管理画面の「プラグイン」から「新規プラグインを追加」を開く
2. 検索欄に「Contact Form by gripspace」と入力する
3. 表示されたプラグインの「今すぐインストール」を押し、続けて「有効化」を押す

有効化すると、管理画面の左メニューに「GS フォーム」が追加されます。中にあるメニューは次のとおりです。

フォームを作る

「GS フォーム」の「新規追加」を開くと、最初に「フォームテンプレートを選択」という画面が出ます。白紙から作る場合は「空から作成」を選びます。テンプレートは次の5種類です。

テンプレートは出発点にすぎません。選んだあとで項目を足したり消したりできます。作成中の画面上部の「テンプレート」ボタンから、あとで選び直すこともできます。

画面の見方

編集画面は、左が操作パネル、中央がプレビュー、右が選んだ項目の設定です。上部に「項目」「デザイン」「設定」の3つのタブがあり、左のパネルの中身が切り替わります。プレビューは「入力欄」と「完了画面」を切り替えられ、入力欄は「PC」と「スマホ」の表示を確認できます。

フォーム名を入れて右上の「保存」を押すと保存されます。新しいフォームは、最初の保存のあとにそのフォームの編集画面へ移ります。

項目を追加する

「項目」タブの左側に、追加できる項目が「コンタクト項目」「基本」「選択」「ステップ分割」に分かれて並んでいます。押すと末尾に追加され、プレビューの好きな位置へドラッグして入れることもできます。並べ替えはドラッグか、各項目の上下の矢印で行います。

• コンタクト項目 … 名前、メールアドレス、電話番号、会社名、会社URL、住所、役職
• 基本 … テキスト、テキストエリア、日付選択、生年月日、性別、ファイル、規約に同意する、hidden、日程調整（予約）
• 選択 … プルダウン、ラジオボタン、チェックボックス、レビュー（5段階評価）
• ステップ分割 … ステップ区切り（フォームを複数のページに分ける）

プレビューで項目を押すと、右側に「項目の設定」が開きます。どの項目にも、タイトル、「必須にする」、ヘルプテキスト（補足説明）、HTML の id 属性と class 属性があります。項目ごとの主な設定は次のとおりです。

• 名前 … 名前とふりがなを表示／名前のみ／ふりがなのみを選べます。ふりがなはひらがなかカタカナを指定できます
• メールアドレス … 確認用にもう一度入力させる欄を出せます
• 電話番号 … 1欄でまとめて入力するか、3分割にするかを選べます
• 住所 … 郵便番号から住所を入れる「郵便番号検索」ボタンが付きます
• ファイル … 許容する拡張子と、1〜20MB のサイズ上限を決められます
• 規約に同意する … 規約の本文をフォーム内に直接書くか、規約ページの URL にリンクするかを選べます

「郵便番号検索」は、訪問者がボタンを押したときだけ、入力された郵便番号を外部の住所検索サービス（ZipCloud）に送って住所を取得します。

デザインを整える

「デザイン」タブは「全体」「項目」「送信ボタン」の3つに分かれています。

• 全体 … 背景色、フォームの最大幅、ラベルの配置（PC とスマホで別々に、上か左か）、必須／任意の表示（アスタリスク、「必須」バッジ、「任意」バッジ、両方、表示しない）
• 項目 … ラベルのフォント・文字色・文字サイズ、ラジオボタンとチェックボックスの形、入力欄の枠色・背景色・フォーカス時の色
• 送信ボタン … ボタンの文言、色、幅

フォームの最大幅は、置いたページの本文の幅より広くはなりません。もっと広げたい場合は、固定ページを全幅のテンプレートにしてください。

設定タブ：確認画面・EFO・スパム対策・メール

「設定」タブには「EFO（入力体験の最適化）」「確認画面」「セキュリティ（reCAPTCHA）」「メール送信」「エラーメッセージ」「データの保存」が並んでいます。

EFO（入力体験の最適化）

入力の途中で諦められないようにするための設定です。オン・オフを個別に切り替えられます。

確認画面

「送信前に入力内容の確認画面を表示する」をオンにすると、入力 → 確認 → 送信の流れになります。オンにすると、入力画面のボタンは「確認画面へ」のような文言に変わり、確認画面で送信ボタンを押したときに送信されます。戻るボタンと送信ボタンの文言・色・幅もここで変えられます。

セキュリティ（reCAPTCHA）

「reCAPTCHA を有効化する」をオンにして、サイトキーとシークレットキーを入れます。対応しているのは reCAPTCHA v2 のチェックボックス形式です。Google の reCAPTCHA 管理画面で「v2 チェックボックス」のキーを作ってください。シークレットキーはサーバー側の検証にだけ使われ、ページには出力されません。

メール送信

「管理者宛通知メール」と「自動返信メール」の2つがあります。どちらも初期状態はオフです。フォームを作っただけでは通知が届かないので、公開前に必ずオンにしてください。

• 管理者宛通知メール … 送信先（カンマ区切りで複数可）、CC、BCC、件名、本文、差出人名、差出人アドレス、Reply-To
• 自動返信メール … 返信先メール項目（送信者のメールアドレスが入る項目）、件名、本文、差出人名、差出人アドレス、Reply-To

件名と本文には、次の差し替えキーワードが使えます。各項目の name（エイリアス）を角括弧で囲んで書くと、その項目の値も差し込めます。

[form_name]    フォーム名
[name]         名前の項目に入力された値
[email]        メールアドレスの項目に入力された値
[all_fields]   送信された全項目（「項目名: 値」の形で1行ずつ）
[meeting_url]  予約で発行した会議のURL（Zoom / Google 連携時）
[cancel_calendar_url]  予約者がキャンセルするためのURL（自動返信メールのみ）

[meeting_url] と [cancel_calendar_url] は、本文に書かなくても、予約を受けたときに本文の末尾へ自動で付きます。好きな位置に出したいときだけ書いてください。

メールは WordPress 標準の送信機能（wp_mail）で送ります。差出人を独自ドメインのアドレスにすると、サーバーの構成によっては迷惑メール扱いになることがあります。届かないときは、SMTP 経由で送る設定を検討してください。

エラーメッセージとデータの保存

「エラーメッセージ」では、必須や形式違いのときに出す文言を書き換えられます。「データの保存」の「送信内容（添付ファイルを含む）をこのサイトのサーバに保存する」は初期状態でオンです。オフにすると、送信内容も添付ファイルもサーバーに残らず、メール送信だけが行われます。

完了画面

中央のプレビューを「完了画面」に切り替えると、送信後の動作を設定できます。「完了画面を表示する」なら本文を編集し、「任意のページにリダイレクトする」ならリダイレクト先の URL を入れます。

ページに設置する

保存したフォームの編集画面の上部に、ショートコードが表示されます。「フォーム」一覧の「フォーム識別子」の列にも同じものが出ています。これをコピーして、フォームを置きたい固定ページや投稿に貼り付けます。

[grip_form id="フォームごとの英数字"]

id には、フォームごとに割り当てられた英数字が入ります。番号ではないので、必ず画面に表示されたものをコピーしてください。ブロックエディターでは「ショートコード」ブロックに貼り付けます。テーマのファイルを書き換える必要はありません。

届いた問い合わせを確認する

「問い合わせ一覧」を開くと、フォームごとの問い合わせ件数が並びます。件数を押すと、そのフォームに届いた送信の一覧が開きます。一覧には登録日時、管理者メール送信先、状態、添付の有無が出ます。

• 詳細画面では、送信内容のほかに「タイトル」と「状態」を付けられます。状態は「未対応」「対応中」「完了」の3つです
• 「グラフを表示」を押すと、フォームの表示数と CV 数、CVR を、過去7日・30日・90日で確認できます
• 管理者メール送信先は、送信された時点の設定が記録されます。あとで設定を変えても、過去の行は書き換わりません

メールが届かなかった場合でも、「データの保存」がオンなら送信内容はここに残っています。取りこぼしを防ぐ意味でも、保存はオンのままにしておくことをおすすめします。

予約カレンダーを使う

「項目」タブの「基本」にある「日程調整（予約）」を追加するか、テンプレートの「オンライン相談予約」を選ぶと、予約カレンダー付きのフォームになります。訪問者は日付を選んでから、空いている時間枠を選びます。

日程調整の項目の設定

• 説明文（カレンダー上部に表示）
• 所要時間 … 30分・45分・60分・90分・120分から選ぶか、カスタムで分数を入れます
• 各時間帯の最大受付数 … 同じ枠に何件まで予約を受けるか
• 予約開始日（X日後から） … 0なら当日から、1なら翌日から
• 予約可能期間（何日先まで表示）
• 祝祭日は受け付けない
• 日程候補（曜日 × 時間帯） … 曜日ごとに「+ 時間帯を追加」で受付時間を登録します。「全曜日に適用」で同じ時間帯をほかの曜日にもコピーできます
• 除外中の日程枠 … 特定の日、または特定の日の時間枠だけ受け付けないようにします
• 参加メンバー、時間枠の色（通常／選択中）

初期状態では、平日の10:00〜18:00を所要時間で区切った枠が入っています。プレビューに表示された時間枠を押すと、その枠をその日だけ除外できます。もう一度押すと元に戻ります。

予約のあるフォームでは、自動返信メールをオンにしてください。オフのままだと、予約者に確認メールもキャンセル用のURLも届きません。項目の設定にも警告が出ます。また、管理者宛通知メールの送信先が未設定の場合、予約とキャンセルの通知は WordPress の管理者メールアドレスに送られます。

スケジュール画面

「スケジュール」では、すべてのフォームに入った予約を月表示と一覧で確認できます。フォームや担当メンバーで絞り込め、予約を押すと送信された内容が見られます。特定の日や時間枠を受け付けないようにする設定もこの画面からでき、閉じた日を再び開くこともできます。項目の設定にある「除外中の日程枠」と同じ一覧です。

Zoom・Google との連携（任意）

「設定」の「オンライン会議」で、自分の Zoom アカウントや Google アカウントを連携できます。grip space のアカウントは必要ありません。連携したら、日程調整の項目の設定で「主催者」を選び、「予約が入ったとき」の動作を決めます。

• 何もしない
• Zoom ミーティングを作成
• Zoom ミーティングを作成し、Google カレンダーにも登録
• Google Meet を作成（カレンダーにも登録）
• Google カレンダーに登録のみ

連携はログインしているユーザーごとです。フォームごとに主催者を選べるので、担当者ごとに別のカレンダーを使い分けられます。予約がキャンセルされると、作成した会議やカレンダーの予定も削除されます。

Zoom・Google への会議作成は grip space を経由して行われ、予約の日時や会議名、参加者のメールアドレスが送られます。また、Basic 認証やメンテナンスモード、IP 制限がかかったサイトでは、外部から接続を確認できないため連携を始められません。

予約者によるキャンセル

バージョン 0.11.5 から、予約者が自分で予約をキャンセルできるようになりました。自動返信メールの末尾に、キャンセル用のURLが自動で付きます。本文の好きな位置に出したい場合は [cancel_calendar_url] と書きます。

• URL を開くと予約内容の画面が出て、キャンセルの理由（任意）を書いてから「この予約をキャンセルする」を押す流れです
• URL を開いただけではキャンセルされません。メールのリンクを自動で開くセキュリティ製品があっても、勝手にキャンセルされることはありません
• 開始時刻を過ぎた予約は、この画面からはキャンセルできません
• キャンセルされると枠が空き、管理者宛と予約者宛に通知が送られます。理由はスケジュール画面の予約の詳細に表示されます

キャンセル用のURLは管理者宛のメールには付きません。管理者が誤って開いてしまうのを防ぐためです。

grip space との連携（任意）

grip space は、サイトを訪れた企業を IP アドレスから把握し、アクセスを分析できる外部サービスです。このプラグインを提供している ibis studio株式会社が運営しています。フォームを使うだけなら連携は不要です。

連携は「設定」で行います。初めての場合は「grip space フリープランに新規登録」から、担当者名・メールアドレス・希望するアカウントIDなどを入れ、利用規約とプライバシーポリシーに同意して「登録して接続する」を押します。すでに grip space を使っている場合は、grip space で発行した連携キーを貼り付けて「連携キーで接続」を押します。

• 接続しても、アクセス計測は初期状態でオフです。「アクセス計測を有効にする」にチェックを入れて保存したときだけ、計測タグが設置され、アクセスデータが送られます
• 計測をオンにすると、「レポート」でサイト全体のアクセス、訪問企業、都道府県、業種別の集計を WordPress の管理画面の中で確認できます
• フォーム一覧の「grip space 連携」の列で、フォームごとに送信内容を grip space へ送るかどうかを選べます。連携できるフォームの数は grip space のプランによって決まります

計測やフォーム連携を使う場合、訪問者や送信者の情報を外部サービスに預けることになります。サイトのプライバシーポリシーにその旨を記載してください。

開発者向け：フック

動作をコードで調整するためのアクションとフィルターを用意しています。一覧と使用例は「設定」画面の下部にある「開発者向け: アクション・フィルターフック」で確認できます。主なものは次のとおりです。

grip_cf_field_options       選択肢（プルダウン等）を差し替える
grip_cf_validate            独自の入力チェックを足す
grip_cf_submission_values   保存・送信前に値を加工する
grip_cf_admin_email         管理者宛メールを差し替える
grip_cf_autoreply_email     自動返信メールを差し替える
grip_cf_after_emails        メール送信後に処理を足す
grip_form_submitted         送信が成功するたびに実行
grip_cf_upload_dir          添付ファイルの保存先を変える
grip_cf_form_config         フロントの設定（EFO 等）を調整する
grip_cf_booking_cancelled   予約者がキャンセルしたあとに実行
grip_cf_booking_fallback_admin  通知先未設定時の予約通知の宛先を変える

プラグインを削除したとき

プラグインを削除しても、フォーム、送信内容、連携の設定は消えません。削除時に消えるのは一時的なキャッシュだけです。grip space と連携している場合は、削除の前に「設定」で接続を解除しておくと、連携用のトークンも無効になります。