Jetpackフォームブロック

Jetpack Formsの機能を活用して、リード、フィードバック、支払いなどを収集するフォームを作成・共有できます。

Jetpack Blocks require the Block Editor (also referred to as the Gutenberg editor). If you’ve installed the Classic Editor plugin, you have a few options:

  • Deactivate the Classic Editor: Go to Plugins → Installed Plugins in your WP Admin and deactivate the Classic Editor plugin.
  • Enable both editors: If you prefer flexibility, navigate to Settings → Writing in your WP Admin (not the menu under Jetpack settings). Set Allow users to switch editors to Yes. You will only see these options if you have the Classic Editor plugin installed and active.

Some custom themes or plugins may prevent you from using the Block Editor. In that case, please contact the support team for the plugin or theme for further assistance.

For more details, see Using Blocks and the Classic Editor.

Jetpackのフォーム機能はデフォルトで有効になっています。必要に応じて、Jetpack Formsを無効にするにはこちらの手順に従ってください。

クラシックエディターを使用している場合は、お問い合わせフォーム(クラシックエディター)をご覧ください。

Jetpackフォームを追加

Jetpackに接続されたすべてのサイトでフォームブロックを利用でき、無料で使用できます。投稿または固定ページにフォームを追加するには、次の手順に従います。

  1. エディターで/formと入力するか、ブロック挿入ツールからフォームブロックを選択します。
  2. あらかじめ作成されたフォームパターンから選択してすぐに始める(下記参照)か、空のフォームから始めます。
  3. 各フィールドのツールバーを使って、フィールドを削除、追加、並べ替え、必要に合わせてフォームフィールドをカスタマイズします。
  4. フィールドの*設定を切り替えて、必須または任意にします。
  5. 送信ボタンをカスタマイズするには、ボタンをクリックしてテキストを直接置き換えます。

Jetpackフォームエディターの使用

フォームの作成と管理にはJetpackフォームエディターも利用できます。ブロックエディターの外部にある独立したインターフェースです。WP管理画面のJetpack → フォームから直接フォームを作成、整理、公開できます。

フォームエディターのウェルカムガイド

フォームエディターを初めて開くと、フィールドの追加、フィールドのラベルと設定の編集、フォーム送信後の動作の選択、完成したフォームの公開と共有という、フォーム作成の流れを5つの手順で紹介するガイドが表示されます。

ガイドをいつでも再度表示するには、フォームエディターの右上にあるオプションアイコン(⋮)をクリックし、「ウェルカムガイド」を選択します。

このガイドは、フォームエディターを初めて訪れたときに表示されます。以前にブロックエディターを使用していて、自分で作成したフォームがすでにある場合は表示されません。また、投稿または固定ページ上のフォームから「フォームを編集」をクリックしてフォームに移動した場合も表示されません。Jetpack → フォームから直接フォームエディターを開いた場合だけです。

フォームパターンを使ってすぐに始める

Jetpack Formsには、挿入してカスタマイズできる、あらかじめ作成されたフォームパターンが複数用意されています。パターンを使えば、最初から作成することなく、動作するフォームを最も速く作成できます。

利用可能なフォームパターン

次のフォームパターンがJetpackに含まれています。

  • お問い合わせフォーム:訪問者からの問い合わせを受け付ける汎用フォームです。
  • 出欠確認フォーム:イベントへの回答と出席情報を収集します。
  • 登録フォーム:新しいユーザーまたは参加者の登録情報を収集します。
  • 予約フォーム:訪問者が予約を申し込んだり、予約日時を設定したりできます。
  • フィードバックフォーム:意見、レビュー、提案を収集します。
  • 複数ステップフォーム:長いフォームを複数のステップに分割し、訪問者が進捗バーと「次へ」および「前へ」ボタンを使って、1画面ずつ入力できるようにします。パターンには編集、追加、削除できる3つのステップが最初から用意されています。
  • リード獲得フォーム:フォローアップのために見込み顧客の情報を収集します。

フォームパターンを挿入する方法

フォームパターンには2つの方法でアクセスできます。

  1. ブロック挿入ツールから:エディターで/formと入力します。利用可能なフォームパターンの一覧が表示されるので、ニーズに最も合うものを選択します。
  2. フォーム設定画面から: Jetpackフォームブロックを新しく追加すると、利用可能なすべてのレイアウトを表示するパターン選択画面が表示されます。任意のパターンをクリックすると、すぐに挿入できます。

挿入後は、パターンのすべての部分を完全に編集できます。フィールドの追加、削除、並べ替え、ラベルの変更、用途に合わせた設定の調整が可能です。

Jetpackフォームブロック内で利用できるフォームフィールド

フォームブロックには、フォームにフィールドを追加する複数のブロックがあります。利用可能なフォームフィールドは次のとおりです。

  • カスタムHTMLフィールド:サイト所有者はフォーム内にカスタムHTMLを挿入できます。カスタム書式、埋め込みコンテンツ、標準では利用できない追加のフォーム要素を追加するために使用できます。
  • 日付選択:ユーザーがカレンダーから日付を選択できます。予約のスケジュールに便利です。想定される日付形式は入力欄の下に表示されます。
  • ドロップダウンフィールド:ドロップダウンメニューに選択肢の一覧を表示します。複数の選択肢から回答を選ぶ形式に便利です。
  • メールフィールド:ユーザーのメールアドレスを取得します。問い合わせへの返信に便利なように、有効なメールアドレスの入力が必要です。
  • ファイルアップロードブロック:ユーザーはフォームの送信時にファイルをアップロードできます。
  • 非表示フィールド:送信データに含まれるものの、ユーザーには表示されない追加情報を保存します。送信元の追跡や、連携・自動化のためのデータ受け渡しに役立ちます。
  • 複数行テキストフィールド:長いメッセージや説明を入力できる複数行のテキストエリアを提供します。
  • 複数選択(チェックボックス):ユーザーは1つ以上の選択肢を選べます。
  • 名前フィールド:訪問者の名前を取得し、1行のテキスト入力として表示します。
  • 数値入力フィールド:数値を入力するための1行の入力欄を提供します。
  • 電話番号フィールド:直接連絡するための電話番号を取得します。フォームの回答に含まれる電話番号はクリック可能で、国番号セレクターも備えています。対応デバイスでは、電話をかけたり、デフォルトの電話アプリを直接開いたりできます。
  • 評価フィールド(星やハート):フォームの送信時に、顧客が評価を残せるようにします。たとえば、商品やサービスのレビューに利用できます。
  • 単一選択(ラジオボタン):あらかじめ定義された一覧から1つの選択肢を選べるようにします。任意で「その他」の選択肢とテキスト入力欄を追加し、定義済みの選択肢に該当しない場合にユーザーが独自の回答を入力できるようにすることも可能です。これを有効にするには、エディターで単一選択(ラジオボタン)フィールドを選択し、右サイドバーのブロック設定を開いて、「その他」オプションを含める設定をオンにします。
  • スライダーフィールド:見積もり依頼で予算を指定したり、距離や割合の範囲を設定したり、標準の評価フィールド以外の方法で項目を評価したりするなど、幅広い用途に対応します。
  • 利用規約への同意:送信前にユーザーが利用規約に同意することを必須にして、コンプライアンスの確保に役立ちます。
  • テキスト入力フィールド:短いテキスト回答を入力するための1行の入力欄を提供します。
  • 時刻入力フィールド:時刻を入力するための1行の入力欄を提供します。予約やスケジュールのフォームに便利です。
  • ウェブサイトフィールド:ウェブサイトURL用の1行入力欄を提供します。ビジネスやブログのリンクを収集するのに便利です。

この動画では、フォームにドロップダウンフィールドを追加する方法をご覧いただけます。

HTMLタグの制限

セキュリティ上の理由から、フォームブロックではすべてのHTMLタグを使用できません。使用できないタグの例をいくつか示します。

  • header
  • embed
  • frame
  • iframe
  • form
  • input
  • object
  • textarea
  • script
  • style
  • link

Jetpack AIを活用して独自のフォームを作成する

Jetpack AIを利用したフォームブロックの機能は、Jetpack AI Assistantスイートの一部です。

Jetpack AI offers you 20 free requests to get started. For more information about upgrading, please refer to our detailed Usage limitations and upgrades guide.

Jetpack AIを使ってフォームを作成する方法

  1. フォームブロックで、次のように表示されているフィールドを見つけます。Jetpack AIにフォームを作成してもらいます。(表示されない場合は、ブロックツールバーのキラキラ ✨アイコンをクリックしてください)。
  2. 収集したい情報の簡単な説明を入力します。
  3. クリックします。生成。

フォームブロックに関連するフォームフィールドが自動入力されます。

フォームの作成に使用できるプロンプトの例を示します。

  • 名前、メールアドレス、電話番号を収集する登録フォームを追加します。
  • 名前とメールアドレスを入力し、さらにSからXXLまでのTシャツのサイズを尋ねるフォームを作成します。

既存のフォームの編集にもJetpack AIを使用できます。フォームがAIで作成されたものでも、パターンから作成されたものでも構いません。例:

  • 悪いから最高までの選択肢で、フィードバックを収集するブロックを追加します。
  • 電話番号フィールドをメールアドレスフィールドの前に移動します。
  • すべてのフィールドを必須にします。

この動画では、Jetpack AIのフォーム連携の動作をご覧いただけます。

フォームをプレビューしてテストする

訪問者がフォームを操作する前に、任意のフォームをプレビューし、テスト回答を送信してすべてが最初から最後まで正常に動作することを確認できます。テスト回答は実際の送信とは別に記録されるため、データに混在することはありません。

フォームエディターガイドのフォームをプレビューしてテストするをご覧ください。

ブロック設定を調整する

フォーム ブロックを追加した後、フォームに入力されたときの動作を指定できます。

通知先を選択する

メール通知

Jetpackフォームで使用されるデフォルトのメールアドレスはサイト管理者のメールアドレスです(フォームの回答は、選択した受信者にメールで送信されます。受信者を選択しない場合は、サイト上でフォームが配置されている場所に基づいて自動的に決定されます。

受信者を設定するには:

  1. フォームブロックを選択し、ブロック設定サイドバーでフォーム通知を開きます。
  2. アドレスをメール通知の送信先に入力します。
  3. 複数の人に通知するには、各アドレスをコンマで区切ります。

フィールドは空の状態で始まり、プレースホルダーとして灰色のアドレスが表示されます。フィールドを空のままにした場合、回答はそのプレースホルダーのアドレスに送信されます。これは自動的に決定された受信者のプレビューであり、保存された値ではありません。

フィールドの下のヘルプテキストに、使用中のルールが示されます。

  • 投稿または固定ページでは、回答は投稿者に送信されます。
  • ウィジェット、ブロックテンプレート、またはテンプレートパーツでは、回答はサイト管理者のアドレス(設定 → 一般 → 管理者メールアドレス)に送信されます。
  • スタンドアロンのフォームエディターでは、回答はフォームが表示されるページの作成者に送信されます。

投稿または固定ページでは、投稿者がメールアドレスを保持し、サイトのメンバーであり、投稿を編集できる間に限り、回答は投稿者に送信されます。いずれかの条件を満たさなくなった場合、回答はサイト管理者のアドレスに送信されます。

アドレスを入力すると、フォームに保存されます。フィールドをクリアすると、フォームは自動的に決定された受信者に戻ります。

プレースホルダーに表示されているアドレスと同じアドレスを入力することもできます。保存すると回答の送信先がそのアドレスに固定されるため、後で投稿者が変わってもそこに届き続けます。フィールドが空の場合は、その時点の投稿者に従います。

以前はアドレスが表示されていたフィールドが空になっていても、フォームに変更はありません。そのアドレスはフォームに保存されたことがなく、常に自動的に決定されていました。そして現在も同じです。回答は以前とまったく同じ場所に送信されます。

プッシュ通知

フォームの回答についてプッシュ通知を受け取るには、回答の通知を有効化を選択します。Jetpackに接続されたユーザーのうち、誰が通知を受け取るかを指定できます。

詳しくは、Jetpackでプッシュ通知を設定する方法、Jetpackアプリまたはブラウザーのどちらで通知を受け取るかについても確認できます。

回答の保存

WP Adminでフォームの送信内容を保存しないように設定できます。フォームのブロックパネルで「回答の保存」設定にアクセスし、デフォルトで有効になっている設定をオフにします。

送信設定

送信後のアクション設定では、フォーム送信後にユーザーに表示する内容を制御します。選択肢は次のとおりです。

  • 送信したフィールドの概要と、カスタマイズ可能なメッセージ見出しを表示する。
  • カスタムテキストメッセージを表示する。
  • 別のウェブページにリダイレクトする。

概要には、設定した見出し、送信された各フィールドとその回答、フォームがあるページに訪問者を戻す戻るボタンが表示されます。回答はフィールドの種類に応じて表示されます。評価は星で表示され、ウェブサイトのアドレスはクリックできるリンクになり、電話番号は通話を開始するリンクになり、ファイルのアップロードにはファイル名とサイズが表示され、画像選択フィールドにはサムネイルが表示されます。

個別のフォームフィールド設定

各フォームフィールドの設定を個別にカスタマイズすることもできます。フィールドをクリックすると、次のオプションが表示されます。

  • フィールドを必須にする
  • フォームフィールドの幅を変更する(使用できる値は25%、50%、75%、100%)
  • 背景色(単色またはグラデーション)とテキスト色を変更する

フィールドにヘルプテキストを追加する

ヘルプテキストは、公開したフォームでフィールドの入力欄の下に表示される短いヒントです。入力内容の説明に使用します。たとえば、電話番号を尋ねる理由や、スライダーの両端が何を意味するかを説明できます。

スクリーンリーダーはフィールドのラベルの後にヘルプテキストを読み上げるため、追加してもフィールドの名前は変わりません。

フィールドにヘルプテキストを追加するには:

  1. エディターでフィールドを選択します。
  2. 下の「ヘルプテキストを追加…」プレースホルダーに入力するか、ブロック設定サイドバーを開き、「フィールド設定」の下にある「ヘルプテキスト」ボックスにテキストを入力します。
  3. 「保存」または「公開」をクリックして変更を保存します。

どちらの場所でも同じテキストが入力されるため、お好きな方をお使いください。ヘルプテキストを削除するには、ボックスを空にします。

ヘルプテキストはプレーンテキストです。リンクや太字・斜体の書式、改行は含められません。

次のフィールドではヘルプテキストを使用できます。

  • テキスト入力
  • 名前
  • メールアドレス
  • ウェブサイト
  • 電話番号
  • 複数行テキスト
  • 数値
  • 日付選択
  • 時刻入力
  • ドロップダウン
  • スライダー

次のフィールドではヘルプテキストを使用できません。

  • 評価
  • 複数選択(チェックボックス)
  • 単一選択(ラジオボタン)
  • 利用規約への同意
  • ファイルアップロード
  • 非表示
  • カスタムHTML

日付形式が表示される場所

日付選択フィールドでは、入力欄の中ではなく、その下に「YYYY-MM-DD」などの想定される形式が表示されます。以前のJetpackでは、形式がラベルの末尾に追加されていたため、「Birthday」という名前のフィールドは「Birthday(YYYY-MM-DD)」と表示されていました。現在、ラベルにはフィールドに付けた名前だけが表示されます。

ヒントにはフィールドの「日付形式」設定が反映されるため、形式を変更すると入力欄の下のテキストも変わります。

日付選択フィールドにヘルプテキストを追加すると、ヘルプテキストが先に表示され、その同じ行の後に形式が続きます。

送信ボタンをカスタマイズする

送信ボタンでは次の設定を変更できます。

  • ボタンのテキスト
  • ボタンの色(単色またはグラデーション)
  • テキストの色
  • 境界線の角丸
  • ボタンの幅(25%、50%、75%、100%、またはピクセル単位のカスタム値)
  • ボタンの配置(左揃え、右揃え、中央揃え)

通知メールの件名フィールドをカスタマイズする

Jetpackでは、フォームを送信するたびに送信されるメールの件名を変更できます。件名フィールドには、次のようなトークンを追加できます。{city}、およびJetpackはそのトークンを「市区町村」フォームフィールドの値に置き換えます(大文字と小文字は区別されません。単語が一致していることだけ確認してください)。

フォームと連携機能を管理する

Jetpackフォームを公開すると、WP Admin内で送信内容を確認および管理できるようになります。左側のメニューでJetpack → フォーム → 回答に移動してください。

回答を開いているときは、キーボードショートカットを使って、マウスなしで回答間を移動したり、スパムまたはゴミ箱としてマークしたりできます。

完全な一覧と、フォームの回答を表示、処理、エクスポートするためのその他の機能については、「お問い合わせフォームの回答と連携機能の管理」をご覧ください。

複数ステップフォームブロック

複数ステップフォームを使うと、長いフォームを小さく管理しやすいセクションに分割し、すべてのフィールドを一度に表示するのではなく、訪問者を一度に1ステップずつ案内できます。新しい複数ステップフォームを開始するには、「複数ステップフォーム」パターンを挿入します。既存のフォームを複数ステップフォームに変換することもできます。

専用のサポートページに移動すると、設定方法やカスタマイズ方法の詳細を確認できます。

Still need help?

Please contact support. We’re happy to advise.

プライバシー情報

フォームブロックは有効化されています。いつでも、Jetpackの機能を1ページで管理するガイドに従って無効化または再有効化できます。

使用データ
サイト所有者/ユーザー

アクティビティの追跡(以下に詳述)には、IPアドレス、WordPress.comユーザーID、WordPress.comユーザー名、WordPress.comに接続されたサイトのIDとURL、Jetpackのバージョン、ユーザーエージェント、訪問先URL、参照元URL、イベントのタイムスタンプ、ブラウザーの言語、国コードが含まれます。
サイト訪問者

サイトでAkismetが有効になっている場合、お問い合わせフォームの送信データ(IPアドレス、ユーザーエージェント、メールアドレス、サイトURL、コメント)は、スパムチェックのためAkismetサービス(Automatticも所有)に送信されます。実際の送信データは、送信先のサイトのデータベースに保存され、フォームの所有者(つまり、お問い合わせフォームが設置されたページを公開したサイト作成者)に直接メールで送信されます。このメールには、送信者のIPアドレス、タイムスタンプ、名前、メールアドレス、ウェブサイト、メッセージが含まれます。

IPアドレスは不正利用防止対策として含まれます。また、Akismetを使用しているサイトでは、適切なスパム対策を提供するために必要です。
追跡されるアクティビティ
サイト所有者/ユーザー

フィードバックフォームのページで機能が有効化または無効化された日時と、その操作を行ったユーザー、CSVまたはGoogleスプレッドシートがエクスポートされた日時を追跡します。
サイト訪問者

ありません。
同期されるデータ(詳細を読む)
サイト所有者/ユーザー

機能が有効化されているかどうかを識別する単一のオプションを同期します。
サイト訪問者

ユーザーのお問い合わせフォーム送信に関連付けられた投稿および投稿メタデータを同期します。サイトでAkismetが有効になっている場合、コメントとともに最初に送信されたIPアドレスとユーザーエージェントも、投稿メタデータに保存されているため同期されます。

In this section