ウェブフォームの作成

ウェブフォームの作成

お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

Webフォームの作成は、次の3つのステップで行います

  • フォームの作成 - 項目をドラッグ&ドロップしてフォームを作成し、WYSIWYGエディターで簡単にレイアウトやデザインを調整できます。
  • フォームの詳細設定 - フォーム名や、申込者がフォーム送信後にリダイレクトされるランディングページのURL、データ割り当てルール、通知の詳細などを追加します。
  • フォーム用コードの生成 - フォームを埋め込むためのさまざまなコード形式が利用できます。WordPress、Google Sites、Facebook、Joomlaなど一部のサードパーティサイト用のコードもすぐにご利用いただけます。

Webフォームを作成し、TempsやJobsのデータを生成することができます。Webフォーム作成時には、以下の要素が利用可能です:

オプション
説明
項目を追加
フォームに必要な項目をドラッグ&ドロップで追加します。初期設定では、新規フォーム作成時にいくつかの項目が自動で追加されています。
項目のフォントやフォームレイアウトの設定
WYSIWYGエディターを使用して、フォーム内の項目のフォントスタイルやサイズ、背景色、配置などを変更できます。
画像認証(CAPTCHA)の挿入
画像認証(CAPTCHA)は、セキュリティのためにフィードバックフォームやWebサイトの登録、コメント投稿者の応募などで使用されます。Zoho WorkerlyシステムのWebフォームに画像認証(CAPTCHA)を追加することで、不正な自動スパムプログラムによる送信を防ぐことができます。このオプションは有料エディションでのみ利用可能です。
フォームでファイルをアップロード
このオプションを利用すると、web-to-temp/連絡先フォーム(または他のカスタムタブ)から、問題のスクリーンショットや見積依頼、人物の写真などのファイルを取り込むことができます。最大3ファイルまでアップロード可能で、全ファイルの合計サイズは20MB以内である必要があります。合計ファイルサイズが上限を超える場合、フォームは送信されず、データもZoho Workerlyに追加されません。この機能は支払い済みエディションのみでご利用いただけます。
項目を必須に設定 

名前、メールアドレス、携帯電話番号などの重要な情報を、ウェブフォームに入力する応募者から必須項目として収集できます。

項目を非表示に設定
フォームに非表示項目とその値を追加できます。これらの非表示値はウェブフォームとともに送信されますが、フォームを入力する応募者には表示されません。
項目にヘルプリンクを追加
入力するデータが特定の形式でなければならない場合があります。例えば、日付の形式はDD-MM-YYYYと指定する必要がある場合があります。このような場合には、ヒントや説明を追加するオプションを利用して、応募者が正しく記入できるようサポートできます。
ボタン名の変更
通話-to-操作ボタンの名前は「保存」「送信する」などに設定できます。ご要望に応じて簡単に名前を変更できます。
フォームの場所URLを指定
場所URLは、ウェブフォームを設置する予定のウェブページのURLです。URLを指定することでスパム防止になり、特定ドメインから送信されたフォームのみを有効な情報として受け付けることができます。
ランディングページURLを指定
これは、申請者がWebフォームを送信済み後にリダイレクトされるウェブページのURLです。
データ割り当てルールの選択
Webフォームから作成済みのデータは、アサインメントルールのヘルプを利用して、Workerlyのユーザーに自動的に担当者を割り当てることができます。
通知設定の指定
データ所有者およびフォームを送信する申請者へ通知を送信する設定を行います。メールテンプレートまたは自動応答ルールを使用して通知メールの送信が可能です。組織内のユーザーへメールを送信する場合、通知は差出人メールアドレスサポート@zohoworkerly.comから送信済みとなります。
フォームコードの埋め込み
Webフォームのコードを自分のウェブページに埋め込んでください。コードは、HTMLデータ元コード、埋め込みコード、iFrameコードの3種類の形式で利用可能です。

 Webフォームの生成

Tempsおよび連絡先向けのWebフォームを生成するには

  1. 設定」>「設定」>「Web Forms」>「Web Forms」に移動します。
  2. Web Formsページで、ドロップダウンリストからタブを選択します。
    選択したタブに紐づく既存のWebフォームが一覧表示されます。
  3. + Web Formを作成をクリックします。
  4. Webフォームビルダーで、以下の操作を行います:
    • フォームの作成
      • 必要な項目をWebフォームにドラッグ&ドロップします。
      • 画像認証(CAPTCHA)を挿入します。
      • ファイルアップロードのオプションを追加します。
      • 項目を必須に設定します。
      • フォーム内で項目を非表示にします。
      • 項目にヒントやヘルプリンクを表示します。
      • フォームのフォントやレイアウトを設定します。
      • ボタン名を変更します。
    • フォームの詳細およびその他の設定の指定
      • フォーム名、ランディングページURL、フォーム設置URLなど、フォームの詳細情報を追加します。
      • データ割り当てルールを設定します。
      • 通知設定を行います。
    • Webフォームコードのコピーおよび埋め込み設定
      • 自社サイトや他社のサイトに埋め込むためのコードを取得します。
        コードは、HTMLデータ元コード、埋め込みコード、iFrameコードの3つの形式で利用できます。

 手順 1: フォームの作成

WYSIWYGエディターで項目をドラッグ&ドロップし、さまざまな設定を利用してフォームを作成できます。

 項目の追加

必要な項目をフォーム内にドラッグ&ドロップし、フォントスタイルやサイズ、背景色、項目の配置などを変更できます。

項目を追加し、フォームのフォントやレイアウトを設定するには

  1. 項目リストタブで、項目をクリックし、フォームビルダー内にドラッグ&ドロップします。
  2. フォント、背景色、項目ラベルの配置、フォームの幅などを変更します。


メモ

  • 初期設定では、一部の項目がフォームに追加済みです。
    • Tempsおよび連絡先の場合 - Last名前メール電話番号項目。
  • 以下の項目はデータに必須のため、フォームから削除することはできません。
    • Tempsおよび連絡先の場合 - 項目。
  • カスタム項目を利用するには、まず該当タブで作成する必要があります。
  • ウェブフォームの連絡先で勘定名項目を追加し、連絡先詳細が送信済みの場合、Zoho Workerlyで自動的にアカウントが作成されます。同じ名前のアカウントがすでにWorkerlyアカウント内に存在する場合、フォームの詳細が送信されてもアカウントは作成されません。
  • 必須項目の詳細が一部未入力でも、アカウントは作成されます。後でアカウントを編集する際に、他の必須詳細を保存前に入力する必要があります。

 ファイルをアップロード

web-to-temp/連絡先フォームを通じて、問題のスクリーンショット、見積もり依頼、人物の写真などのファイルを取得できます。ファイルサイズは20MB以内にしてください。ファイルのサイズが制限を超える場合、フォームは送信されず、Zoho Workerlyにデータが追加されません。このオプションは支払い済みエディションでのみ利用可能です。

ファイルをアップロードするオプションを追加するには

  1. 詳細ツールタブをクリックします。
  2. ファイルアップロード項目をドラッグ&ドロップします。
     

 画像認証(CAPTCHA)の挿入

画像認証(CAPTCHA)を追加して、不正な自動スパムプログラムによるウェブフォームへの入力を防止します。このオプションは支払い済みエディションでのみ利用可能です。

画像認証(CAPTCHA)を挿入するには

  1. 詳細ツールタブをクリックします。
  2. 画像認証(CAPTCHA)項目をドラッグ&ドロップします。

 

 項目を必須に設定

名前、メールアドレス、携帯電話番号など、応募者がウェブフォームに入力する重要な情報を、項目を必須に設定することで収集できます。

項目を必須に設定するには

  1. 必須に設定したい項目にマウスポインターを移動します。
  2. 設定アイコンをクリックします。
  3. 項目プロパティのポップアップで、必須項目に設定のチェックボックスを選択します。
  4. 完了をクリックします。

 

 項目を非表示に設定

フォームに非表示項目とその値を追加できます。これらの非表示値はウェブフォームとともに送信されますが、フォーム入力者には表示されません。例えば、同じフォームを複数のウェブページに設置している場合、非表示項目を利用することで、どのウェブページから作成されたデータかを特定できます。

フォームで項目を非表示にするには

  1. フォーム内で隠したい項目にマウスポインターを移動します。
  2. 設定アイコンをクリックします。
  3. 項目プロパティのポップアップで、非表示項目として設定のチェックボックスを選択します。
  4. 項目の値を指定し、完了をクリックします。

 

提供する項目によっては、特定の形式でデータの入力が必要な場合があります。例えば、日付の形式はDD-MM-YYYYのように指定する必要がある場合があります。そのような場合は、申請者がフォーム入力時に参考にできるヒントや補足情報を追加するオプションを利用できます。

項目にヒントやヘルプリンクを追加するには

  1. ヒントやヘルプリンクを追加したい項目にマウスポインターを移動します。
  2. 設定アイコンをクリックします。
  3. 項目プロパティのポップアップで、ヘルプリンクを含めるのチェックボックスを選択します。
  4. 以下のいずれかを選択します。
  • リンク&テキスト - リンクのテキストを指定し、リンクURLを入力します。
  • リンクのみ - ヘルプやヒントとなるテキストを指定します。例えば、日付項目には「MM-DD-YYYY」など。
     
  • 完了をクリックします。

 

 ボタン名の変更

初期設定では、「送信する」と「リセットする」の2つのアクションボタンが用意されています。これらのボタン名は、ご利用用途に応じて変更が可能です。

ボタン名を変更する方法

  1. フォーム内で名前を変更したい項目にマウスポインターを移動します。
  2. 設定アイコンをクリックします。
  3. 項目プロパティのポップアップで、項目名を編集します。
    項目の名前はフォーム内のみで変更されます。
  4. 完了をクリックします。

 

 フォームから項目を削除する

不要な項目はウェブフォームから簡単に削除でき、必要に応じていつでも追加可能です。

フォームから項目を削除するには

  1. フォームから削除したい項目にマウスポインターを移動します。
  2. 削除アイコンをクリックします。

 

 Webフォームのプレビュー

Webサイトに公開する前に、Webフォームを確認できます。

フォームをプレビューするには

  1. フォームビルダーでプレビューリンクをクリックします。
    フォームのプレビューが表示されます。

 

 手順 2: フォームの詳細を指定

  1. フォーム名を入力します(例:フィードバック、お問い合わせ など)。
  2. ランディングページのURLを指定します。フォームを送信した応募者は、ここで指定したURLにリダイレクトされます。URLは'http:// または https://'で始まる必要があります。
    リダイレクトURLの長さは255文字以内にしてください。(例:https://www.zylker.com/thank-you.html
  3. フォーム設置URLを指定します。これはWebフォームが設置されるWebページのURLです。'http:// または https://'で始まる必要があります。(例:https://www.zylker.com/contact-us.html
    複数のウェブサイトでフォームを設置する予定がある場合や、設置先が未定の場合は、この項目に * を入力してください。これによりスパム防止となり、特定ドメインから送信されたフォームのみ有効な情報として取得されます。
  4. 以下のいずれかの設定を選択し、Webフォーム経由で送信されたデータの担当者を割り当てます。
  • ユーザーを選択 - 選択リストからユーザーを選択してください。フォームから作成されたすべてのデータが、選択したユーザーに担当者として割り当てられます。
  • 割り当てルールの作成または選択 - 既存の割り当てルールを選択するか、新しく作成してください。ルールに基づき、データがユーザーに担当者として割り当てられます。割り当てルールを利用することで、ラウンドロビン方式によるデータのユーザー割り当ても可能です。
  • 通知 [データ] 担当者を有効にし、必須の場合はデータ担当者に送信されるメールテンプレートを選択します。メールが組織内のユーザーに送信される場合は、サポート@zohoworkerly.com のメールアドレスから通知として送信されます。
  • AcknowledgeApplicantを有効にすると、Webフォームを送信した本人へメールを送信できます。メールテンプレートを選択後、差出人およびReply to項目の入力を求められます。
    ここで、ドロップダウンリストから以下のいずれかの設定を選択できます。
    • ご自身のアカウントメールアドレス
    • 組織のメールアドレス
    • データ担当者のメールアドレス
    • 他のユーザーのメールアドレス
  • 自動応答ルールの使用 - 既存の自動応答ルールのいずれかを使用します 。Webフォームで収集した詳細情報に基づき、自動応答ルールを実行して特定のメールを送信できます。
    Webフォームで収集した情報が自動応答ルールの条件を満たさない場合、2番目のオプションで選択されたメールテンプレートが確認メールとして送信されます。
  • 全応募者への初期設定返信 - このWebフォーム経由で作成された派遣スタッフへ送信するメールテンプレートを選択します。
  •  手順3:埋め込み用Webフォームコードの使用

Webフォーム用のコードは3つの形式で利用可能です:データ元コード埋め込み用コードiFrameコード。また、コードは一部のサードパーティサイト(WordPress、Facebook、Google Sites、Joomla)向けにもすぐに利用できます。注:ScriptおよびiFrameコードは有料エディションでのみ利用可能です。

  1. データ元コード、埋め込みまたはiFrameコードをリストから必要に応じて選択します。
  2. コードをコピーし、Webフォームを設置したいWebサイトに貼り付けます。
  3. 完了をクリックします。


メモ

  • スパムを防ぐため、作成済みWebフォーム(HTMLファイル)は、有効なWebサーバー(Apache、Microsoft、IISなど)で公開する必要があります。
  • フォームの値をデスクトップから送信すると、Webフォームは動作しません。
  • Webフォーム用のHTMLコードが作成済みの場合、一部のエンティティは初期設定で非表示になっています。非表示エンティティを削除すると、Webフォームは動作しません。以下のコードスニペットはWebフォームのコードから削除しないでください。