ファーム
フォームは、ウェブサイト訪問者に連絡を取る機会を提供します。この記事では、ウェブサイトにフォームを挿入する方法と、フォームを最大限に活用する方法をご紹介します。
エディターには、様々な強力なプレビルドセクションが用意されています。フォームセクションを使えば、わずか数秒で完全に機能するお問い合わせフォームを追加できます。追加のフォーム要素を使用することで、これらのプレビルドフォームを個々の要件に合わせて調整できます。「キャプチャ」要素もすべてのフォームプリセットに含まれており、フォームがコンピューターではなく人間によって入力されていることを保証します。
デフォルトでは、フォームへの入力内容は、ウェブサイトの連絡先データに設定されている顧客のデフォルトのメールアドレスに送信されます。フォーム設定の「受信者」フィールドで受信者アドレスを指定できます。また、[email protected]、[email protected]、[email protected] などの形式で複数の受信者を追加することもできます。
フォームを追加する
Section titled “フォームを追加する”ウェブサイトにフォームを追加するには、左側のサイドバーにある 「フォーム」 カテゴリをクリックしてください。コンテンツパネルが開き、オレンジ色でマークされたすべての既成フォームセクションが表示されます。これらは、様々なフォーム要素で構成された、完全に機能するお問い合わせフォームです。フォームセクションの下には、青色でマークされたすべての個別のフォーム要素が表示されます。フォームセクションにフォーム要素を追加または削除して、ニーズに合わせてカスタマイズできます。
フォームセクションをウェブサイトにドラッグすると、完全に機能するお問い合わせフォームが利用可能になります。パンくずリストでわかるように、フォームセクションは3つの異なるレベルで構成されています。
- フォーム全体セクション
- フォームコンテナ
- そしてフォーム要素
いつものように、左側の設定パネルを使用して、フォームをニーズに合わせて調整できます。
フォーム設定
Section titled “フォーム設定”フォーム設定では、フォームの動作を定義します。
「タイトル」欄に分かりやすい名前を入力してください。そうすることで、カスタマーポータル内のフォーム入力がフォーム名に基づいて整理されるという利点があります。これにより、ウェブサイト訪問者がどのフォームに入力したかを、あなたと顧客は常に把握できるようになります。
「リダイレクト」フィールドと「Webhook」フィールドは、フォーム送信後に機能します。「リダイレクト」フィールドには、ウェブサイト訪問者がフォームを送信した後に転送するサブページのURLまたはスラッグを入力します。これらのページは通常、「サンキューページ」などであり、「ピクセル」と組み合わせて使用することで、ウェブサイト訪問者の行動をより正確に追跡できます。ピクセルの詳細については、カスタムHTML、CSS、JavaScriptコードの挿入に関する記事をご覧ください。さらに、ウェブサイト訪問者がフォームを送信するとすぐに、Webhook URLを介してCRMシステムなどの外部ツールに入力内容を転送することもできます。詳細 については 、 Webhookのセクションをご覧ください。
フォーム設定では、受信者のメールアドレス、送信者のメールアドレス、件名も定義できます。これは、例えば、フォームへの入力内容を特定のフォルダに振り分けるための自動メールフィルターなどに役立ちます。
フォーム要素
Section titled “フォーム要素”先ほども述べたように、左側のサイドバーの「フォーム」カテゴリには、あらかじめ用意されたフォームセクションの他に、フォーム要素も用意されています。では、フォーム要素とその機能について詳しく見ていきましょう。
すべてのフォーム要素は「必須」としてマークできます。要素が「必須」に設定されている場合、ウェブサイト訪問者はフォームを送信しようとした際にそのフィールドがまだ空の場合、入力する必要があることを通知されます。一部の要素には「プレースホルダ」も用意されています。プレースホルダは、テキストフィールドにサンプルコンテンツを入力し、その後上書きされるまでそのサンプルコンテンツを表示します。
1. テキスト入力フィールド
Section titled “1. テキスト入力フィールド”
テキスト要素は、プレーンテキスト入力が必要な場合に便利です。名前、肩書き、住所などの入力欄に使用できます。入力フィールドの上または横にラベルを追加したり、フィールド内に表示されるプレースホルダを使用して、ウェブサイト訪問者にそのフィールドに入力すべき情報の例を示したりすることができます。
2. 数値フィールド
Section titled “2. 数値フィールド”
数値フィールドは、入力にテキストではなく数値が含まれることが予想される場合に便利です。このフィールドには最小値と最大値を指定できるため、例えば注文を入力する際に便利です。
3. メールアドレスフィールド
Section titled “3. メールアドレスフィールド”
メールアドレスフィールドを使用すると、ウェブサイト訪問者が正しい形式のメールアドレスを入力したことを確認できます。ブラウザは誤った入力（一般的なメール形式ではない、@記号がないなど）を検出し、送信時にウェブサイト訪問者に警告を表示して、メールアドレスを修正できるようにします。
4. 電話番号フィールド
Section titled “4. 電話番号フィールド”
これは上記の入力フィールドと同じように機能します。電話番号のみに使用してください。
5. テキストエリアフィールド
Section titled “5. テキストエリアフィールド”
テキストエリアは、段落全体を記述できる広いスペースを提供します。これは、メッセージや詳細な説明に最適です。行数はテキストフィールドの初期の高さを決定するのに役立ちますが、最近のブラウザでは、ウェブサイト訪問者がこれをカスタマイズできる場合が多くあります。
6. チェックボックス
Section titled “6. チェックボックス”
フォーム内で複数の選択肢を用意したい場合は、チェックボックスが最適です。必要に応じて複数のオプションを追加できます。オプション名はいつでも変更できます。各オプションには「必須」を指定できます。このフィールドを有効にすると、システムはウェブサイト訪問者がフォーム送信時にこのフィールドをクリックしたかどうかを確認します。クリックしていない場合は、その旨が通知されます。
7. ラジオボタン
Section titled “7. ラジオボタン”
ラジオ ボタンはチェックボックスと同様に機能しますが、選択できるオプションが 1 つだけであるという違いがあります。
8. ドロップダウンリスト
Section titled “8. ドロップダウンリスト”
選択リストまたはドロップダウンリストを使用すると、ウェブサイト訪問者はリストから特定のオプションを選択できます。「複数」フィールドをクリックすると、チェックボックスと同様に複数のオプションを同時に選択できます。フィールドをクリックしていない場合、選択リストはラジオボタンと同様に機能し、1つのオプションのみを選択できます。また、選択を必須にするかどうかを指定することもできます。「選択してください」テキストもカスタマイズ可能です。
ドロップダウン リストを使用すると、オプションが多数ある場合にフォームをシンプルかつ整然とした状態に保つことができます。
9. 日付と時刻のフィールド
Section titled “9. 日付と時刻のフィールド”
日付と時刻のフィールドは、Web サイトの訪問者が特定の日付と時刻を選択できるようにするのに役立ちます。
「全般」セクションでは、通常どおりラベルとプレースホルダーテキストを割り当て、日付の選択が必須かどうかを指定できます。
「日付と時刻」セクションでは、日付、時刻、またはその両方を選択可能にするかどうかを指定できます。希望する日付と時刻の形式を選択し、必要に応じて最小時刻と最大時刻のフィールドで時刻を制限できます。例えば、レストランの営業時間内に予約を行うことができます。ウェブサイト訪問者が選択できる時間間隔も調整できます。例えば、デフォルトの「60分」では12:00、13:00、14:00などしか選択できませんが、「15分」では12:00、12:15、12:30などを選択できます。週番号を表示して、より見やすくすることもできます。「埋め込み」を選択すると、入力フィールドではなくカレンダー全体が表示されます。カレンダービューが埋め込まれていない場合は、入力フィールドをクリックするとカレンダーが表示されます。
画像は、「埋め込まれていない」要素 (最初の画像) と「埋め込まれた」要素 (2 番目の画像) の違いを示しています。
「平日」セクションでは、選択可能な平日を指定します。
最も早い日付と最も遅い日付を指定したい場合は、「最小日付」と「最大日付」のセクションに入力します。「なし」は制限がないことを意味します。「固定」は特定の日付を定義します。「動的」は、現在の日付に基づいて将来の日付を設定できます。例えば、「最小日付」がデフォルトで「今日から5日後」に設定されている場合、ウェブサイト訪問者は少なくとも5日後の日付のみを選択できます。これにより、お客様や顧客はリクエストに対応するのに十分な時間を確保できます。最大2か月後の日付のみを計画したい場合は、次の手順に従います。
「最大日付」の横に数字「2」を入力します 「今日からの日数」をクリックします 「今日から何ヶ月」を選択してください
10. フォームボタン
Section titled “10. フォームボタン”
ウェブサイト訪問者がフォームを送信するには、少なくとも1つのボタンが必要です。フォームボタン要素には、合計3つの機能を持たせることができます。
フォームをリセットし、入力したデータをすべて削除する フォームの送信 アクションなし（たとえば、独自の JavaScript を実行する場合に適しています） さらに、ボタンのデザインをニーズに合わせて調整できます。
11. ファイルアップロード要素
Section titled “11. ファイルアップロード要素”
ウェブサイト訪問者がファイルを自分でアップロードできるようにする場合は、この要素を使用します。「ファイル形式」フィールドに、アップロードを許可するすべてのファイル形式またはタイプを入力します。例えば、「.jpg, .png」と入力すると、JPGとPNGファイルが許可されます。また、ファイルタイプとして「images/*」を指定すると、すべての画像ファイルタイプを一括で許可できます。
このフィールドは「必須」としてマークすることもできます。
フォームを送信すると、このファイルは受信者のメールアドレスに送信されるメールに添付されます。これらのファイルは当社ではホストされません。そのため、アップロードできるファイルサイズの制限は、メールサービスプロバイダーが受信できる最大ファイルサイズに基づいております。
12. キャプチャ
Section titled “12. キャプチャ”
CAPTCHAは、お問い合わせフォームがスパムメールに悪用されることを防ぎます。フォーム設定で「メールを送信」オプションを無効にすると、フォームからCAPTCHAフィールドを削除することもできます。この場合、フォームへの入力内容はカスタマーポータルに表示されます。「メールを送信」オプションを有効にしたままにすると、以下の2つの代替手段を使用しない限り、CAPTCHAは必須となります。 フォーム入力の受信者として、当社が管理し、当社を通じて登録されたドメインで作成された電子メールアドレスを使用してください。 サードパーティのフォームを使用するには、サードパーティの埋め込みコードをウェブサイトプロジェクトに挿入します（例：HTML要素）。 これらの代替手段がなければ、キャプチャ要素なしでプロジェクトを保存することはできません。 キャプチャにはラベルやプレースホルダを割り当てることもできます。さらに、キャプチャ画像のテキストと背景色も設定できます。フォームコンテナに画像背景や背景テクスチャを使用している場合は、透明な背景が便利です。ただし、キャプチャの可読性は維持されます。
13. 通常の要素
Section titled “13. 通常の要素”フォームコンテナ内では、フォーム要素だけでなく、通常の要素も使用できます。プリセット全体を使用することも可能です。例えば、列、アコーディオン、その他のプリセットをフォームコンテナと組み合わせて、希望するフォームデザインを作成できます。
情報: フォームエントリの送信中は、Web サイト訪問者の入力内容のみが送信されます。
テストフォーム
Section titled “テストフォーム”プレビューウェブサイトでフォームの動作確認をすでに行っています。ウェブサイトはまだ公開する必要はありません。ウェブサイト訪問者としてフォームを使用し、ご自身またはお客様がメール通知を受信したか、また、メール通知を有効にしていない場合はフォームの入力内容がカスタマーポータルに表示されるかを確認してください。通常、通知は5～10分以内に届きます。
フォームを複数回連続してテストすると、IPアドレスが24時間自動的にブロックされ、フォームへの入力ができなくなる場合があります。この仕組みにより、お客様とお客様の顧客をスパムから保護しています。24時間経過前にフォームを再度使用するには、テストしたフォームのカスタマーポータルにある「フォーム入力」から、最後の入力内容を削除するだけです。その後、ウェブサイトからフォームへの入力内容を再度送信できます。
ウェブフック
Section titled “ウェブフック”Webhookは、ウェブサイトから別のサーバーに情報をプッシュします。この場合、Webhookはフォームへの入力内容を別のサーバーに送信するために使用できます。ウェブサイト訪問者がフォームを送信するたびに、データは指定したURLに送信されます。
Webhookの用途
Section titled “Webhookの用途”デフォルトでは、各フォームへの入力内容は顧客にメールで送信され、カスタマーポータルで利用可能になります。また、他のサービスを介してフォームデータを処理することも一般的です。
考えられる使用例は次のとおりです。
- CRM（Salesforce、Pipedriveなど）でリードを作成する
- カレンダー（例：Googleカレンダー）でスロットを予約する
- インスタント メッセージング プラットフォーム (例: Slack) にデータを転送する
- その他にも
Webhookを設定する
Section titled “Webhookを設定する”まだ追加していない場合は、ウェブサイトにフォームを追加してください。フォームの仕組みについては、「フォームの追加」セクションで既に説明しました。次に、パンくずリストの「フォーム」をダブルクリックして、フォーム設定に切り替えます。
設定パネルの「メッセージ」セクションに「Webhook」フィールドが表示されます。
フォームに関連付けるサービスによって、ここに入力するURLは異なります。入力するURLについては、選択したサービスのドキュメントをご覧ください。URLを入力したら、[Enter]キーを押して確定し、プロジェクトを保存してください。
リクエストペイロード フォームに情報を入力して送信するたびに、入力した URL に次のデータが送信されます。
パラメータ 説明 データ 指定された情報をJSONオブジェクトとしてフォーマットします。例:
{ 「名前」: 「ジョン・ドウ」 「電話番号」: 「+1 2345 67890」 「メールアドレス」: 「[email protected]」 「メッセージ」:「Hello World」}「ラベル」フィールドに入力した名前が使用されます。
フォームID このフォームを一意に識別する番号です。これはバックグラウンドで自動的に処理されます。 フォーム名 フォームの名前は「タイトル」フィールドに入力されます。
提出日時 フォームが送信された日時。ISO 8601に従ってフォーマットされます。例: 「Thu, 21 Dec 2000 16:01:07 +0200」
ZapierでWebhookを使用する
Section titled “ZapierでWebhookを使用する”Zapier.comは、Webアプリケーション間の情報共有を自動化するワークフローを提供しています。例えば、フォームへの入力内容をZapierに送信し、後続のステップで処理することができます。Zapier.comでは、このような自動化プロセスを「Zap」と呼びます。まず、新しいZapを作成し、トリガーとして「Webhooks by Zapier」を選択します。
トリガーを設定して「テスト」に進むと、個別の Webhook URL が表示されます。
この URL をWebhookフィールドにコピーします。
変更を保存し、次の手順を実行します。
- 上部ナビゲーションの左側にあるプレビュー（目）アイコンの上にマウスを移動します
- 開いたドロップダウンリストで「プレビューウェブサイトを開く」をクリックします。
- ウェブサイトのフォームにいくつかのテスト値を入力してフォームを送信します。
- その後、Zapier.comに戻り、「このステップをテスト」をクリックします。
すべてが正しく完了していれば、テスト値がここに表示されます。その後、データ処理のための追加手順を設定できます。情報が送信されるサードパーティツールによっては、ツールとZapier内で追加の手順が必要になる場合があります。