見積リクエスト機能は、潜在的な顧客が見積や、ビジネスが提供するサービスや製品に関する情報をリクエストするために使用できるフォームを作成するために使用されます。見積リクエスト機能を使用すると、お客様のニーズに合わせて調整できるさまざまなタイプのフィールドを追加できます。ビジネスニーズ。
たとえば、あなたの会社が 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 を追加します。ここをクリックしてどのように見えるかを確認してください.