見積リクエスト機能は、潜在的な顧客が見積や、ビジネスが提供するサービスや製品に関する情報をリクエストするために使用できるフォームを作成するために使用されます。見積リクエスト機能を使用すると、お客様のニーズに合わせて調整できるさまざまなタイプのフィールドを追加できます。ビジネスニーズ。

たとえば、あなたの会社が Web サイトのデザインを提供している場合、顧客は、以前に作成したフォームを介して Web サイトのデザインの見積もりをリクエストできます。 通常、フォームには「予算はいくらですか」、「緊急度」、「ウェブサイトの種類」など、より一般的な質問が含まれます。 顧客がフォームに入力した情報に基づいて見積書を作成し、顧客に送信できます。

フォームは直接リンクとして顧客に直接送信することも、iframe を介して既存の Web サイトのページに直接フォームを埋め込むこともできます。たとえば、既存の会社の Web サイトに「見積依頼」という名前のメニュー リンクをこのページに含めることができます。 iframe フォームを埋め込むことができます。

見積依頼フォームを作成する #

最初のステップは、見積依頼フォームを作成することです。 見積依頼フォームは無制限に作成できます。 これを行うには、管理者ユーザーとしてログインしているときに、次の手順に従います。

  • 上をクリックします パラメータ puis 見積もり依頼フォーム.
  • 上をクリックします 新しい形 .
  • フォームの名前を追加します。例: “ウェブサイトの見積もりリクエスト"
  • 言語 – この言語は現在、検証メッセージにのみ使用されています。
  • 送信ボタンのテキスト - ユーザーがフォームを送信するためにクリックする場所の下部にあります 例 見積もりを依頼する ou お問い合わせ、 ニーズに合わせて自由に調整してください。
  • フォームが正常に送信された後に表示されるメッセージ – このメッセージは、フォームが正常に送信された後に表示されます。
  • ステータス – Djaboo スペースで正常に送信された後、見積もりリクエストはどのようなステータスになりますか。
  • 責任感がある – 見積リクエストを特定のスタッフに自動的に割り当てます。
  • 通知設定 – 通知の種類に応じて、すべてのユーザーは Djaboo に埋め込まれた通知を介して通知され、さらに、見積もりリクエストを担当するメンバーは電子メール通知を受け取ります。 パラメータ-> メールテンプレート -> 見積依頼が割り当てられました (個人に送信) は無効としてチェックされていません。
  • reCAPTCHAの – Google Recaptcha を使用してスパムを防ぐことができます。 Google Recaptcha のフィールドは、以前に設定した場合にのみ表示されます。 再キャプチャキー .

フォームを作成すると、フォーム ビルダーと統合コード フォーム領域に 2 つの新しいタブが表示されます。

  • フォームビルダ – フォームを作成し、必要なすべてのフィールドを調整する場所。
  • 埋め込みコード は、フォームを表示するために Web サイトに配置する必要があるコードです。リンクから、それぞれに一意のキーがあることが確認できることに注意してください。

フォームにフィールドを追加する #

フォームにフィールドを追加するには、フィールドをフォーム領域の右側にドラッグするだけです。電子メール フィールドがフォームに表示され、必須フィールドとしてもマークされている必要があることに注意してください。

フィールドのカスタマイズ #

ラベルをカスタマイズし、ヘルプ テキストやプレースホルダーを追加して必須にすることができます。 フィールドをフォーム領域にドラッグするとき、右上のフィールドの上にマウスを置くと、3 つのボタン (編集、コピー、削除) が表示されます。

フォームをカスタマイズしたら、左下のボタンをクリックします 登録者 [埋め込みコード] タブをクリックして、Web サイトに追加する必要があるコードを取得します。 コードは iframe として配置され、提供されたコード スニペットに合わせて幅と高さを直接調整できます。

形式 #

Web サイトに合わせて入力フィールドの色をカスタマイズする必要がある場合は、サイト上にcustom.css ファイルを作成し、必要なスタイルを適用できます。

エントリの境界線の色を変更する例:


body.estimate-request-form input { border-color:red; }

送信ボタンの背景色を変更する例:


body.estimate-request-form #form_submit { background:red; } body.estimate-request-form #form_submit:hover, body.estimate-request-form #form_submit:active { background:green; }

フォームにロゴを含める #

フォームに会社のロゴを含めるには、以下に示すようにクエリ文字列パラメーターを使用して URL を共有または埋め込みます。

https://votre-entreprise.djaboo.appform-url?with_logo=1https://votre-entreprise.djaboo.app/form-url?with_logo=1

直接リンクの共有 #

実際に Web サイトにフォームを埋め込まなくても、フォームを顧客と直接共有できます。この機能は、電子メールや SMS などにリンクを含めたい場合などに便利です。

フォームのリンクが iframe に埋め込まれておらず、直接共有されていることを Djaboo が認識するには、URL クエリ文字列を指定する必要があります。この場合、Djaboo はフォームにより良いスタイルを提供します。


https://votre-entreprise.djaboo.app/form-url?with_logo=1&styled=1

複数列のフォームレイアウトを作成する #

フォームをカスタマイズしてフィールドを複数の列に表示したい場合、デフォルトではフォーム フィールドはドキュメントの単一の全幅列に追加されます。追加できるフィールドに適用されるカスタム クラスを使用してこれを実現する機能が追加されました。 12行1列まで。

次の例では、2 列 2 行の 1 つのフィールドを作成します。

列はフォーム ビルダーでは適用されず、フォームが埋め込みリンクにアクセスして表示される場合、または iframe 内にある場合にのみ適用されることに注意してください。

保存する [保存] ボタンをクリックしてフォームを保存し、埋め込みリンクからフォームをプレビューして最終結果を確認します。

前述したように、最大​​ 12 列を追加できます。この場合は、form-col-6 + form-col-6 = 12 です。3 列を追加したい場合は、4 つのフィールドに form-col-3 クラスを適用します ( form -col-4*3 フィールドは 12 になり、フィールドはドキュメントに適合します) が XNUMX つずつ順番に配置されます。

ほとんどの場合、Web サイトの小さなコンテナ/一部にフォームを埋め込むことになるため、CSS ブートストラップ グリッドには常に新しい行の列が表示されます (2 列に分割されません)。この場合は、別の追加クラスを追加することを検討してください。小さなコンテナの場合、たとえばクラス form-col-6 を追加した場合、小さな領域の別のクラス form-col-xs-6 を追加します。ここをクリックしてどのように見えるかを確認してください.