DiviのContactFormModuleを使用して見積もりフォームを作成する方法

公開: 2017-06-12

見積もりフォーム（別名、見積もり依頼フォーム）は、電話に出る手間をかけずに適格な見込み客を獲得しようとしている中小企業にとって優れたソリューションです。良い見積もりフォームは、適切な適格な質問をすることによって、あなたのサービスの準備ができていない悪い卵を整理することができます。また、クライアントのニーズを正確に特定して、効果的な応答/オファーを準備し、電話で受け取ったら販売を終了できるようにすることもできます。

フォーム処理専用の優れたフォームプラグインが数多くあります。しかし、Diviサイトのシンプルで効果的なソリューションを探しているなら、Diviの更新されたContact FormModuleがまさに必要なものです。

今日は、条件付きロジックを使用してリードをより適切に認定するための、シンプルでありながら強力な見積もりフォームを作成するプロセスについて説明します。また、カスタムCSSを使用して、フォームをさらにすっきりと読みやすくする高度なデザイン機能をいくつか追加します。

見積もりフォーム

始めましょう。

Diviを使用した設計の実装

フルスクリーンヘッダーセクションの構築

見積もりフォームはどのページにも追加できますが、この例では、見積もりフォーム専用のページを使用します。

訪問者を歓迎するために、ユーザーにボタンをクリックするかスクロールしてフォームを表示するように強制するフルスクリーンヘッダーを使用しています。これは、より個人的なエクスペリエンスを作成し、フォームを表示する前にスクロールしてクリックするというアイデアにユーザーを温めるクールな機能です。場合によっては、記入するのに長いフォームしかないページにたどり着くと、少し魅力的で圧倒されるように思えます。もちろんこれはオプションであり、フルスクリーンヘッダーなしでより良く変換されるかどうかを確認するために間違いなくテストします。

Visual Builderを使用して、ページの上部に全幅セクションと全幅ヘッダーモジュールを追加します。

見積もりフォーム

次のように全幅ヘッダー設定を更新します。

コンテンツオプション

タイトル：[タイトルを入力してください; 「QuoteForm」のような退屈なタイトルではなく、より個人的なものにするようにしてください]
小見出しテキスト：[小見出しテキストを入力]

ボタン＃1テキスト：[ボタンテキストを入力してください; 「見せて」や「これをやろう」など]
ボタン＃1 URL：#quote（これは、以下のフォームを含むセクションにスクロールするアンカーCSS IDに使用されます）
ロゴ画像のURL：[ロゴ画像を入力]
背景オーバーレイ：rgba（0,0,0,0.7）
背景画像：[1920 x1080の背景画像をアップロード]

デザインオプション

テキストとロゴの向き：センター
フルスクリーンにする：はい
下スクロールボタンを表示：はい
アイコン：[アイコンを選択]
下にスクロールアイコンの色：＃999999
テキストの色：明るい
タイトルフォント：Ubuntu
タイトルフォントサイズ：36px
小見出しフォント：Ubuntu
小見出しのフォントサイズ：22px
ボタン1にカスタムスタイルを使用する：はい
ボタン1のテキストサイズ：20px
ボタン1のテキストの色：#ffffff
ボタン1の背景色：＃e09900;
ボタンワンボーダーカラー：＃e09900
ボタン1文字の間隔：1px
ボタン1フォント：Ubuntu

見積もりフォーム

設定を保存する

見積もりフォームの作成

見積もりフォームには、DiviのContact FormModuleを使用します。まず、全幅（1列）の行を持つ通常のセクションを追加する必要があります。次に、お問い合わせフォームモジュールを行に追加します。

見積もりフォーム

お問い合わせフォームの設定を次のように更新します。

コンテンツオプション？

タイトル：[お問い合わせフォームのタイトルを定義するか、手順を追加してください]
ボタンテキストの送信：見積もりを取得
Eメール：[メッセージの送信先のEメールアドレスを入力してください]
リダイレクトURLを有効にする：はい（これはオプションですが、良い考えです）
リダイレクトURL：[カスタムサンキューページへのリダイレクトURLを入力]

デザインオプション

タイトルフォント：Ubuntu
タイトルフォントサイズ：30px
タイトル文字の間隔：1px
フォームフィールドフォント：Ubuntu
フォームフィールドのフォントサイズ：24px
フォームフィールドのテキストの色：＃e09900
入力境界半径：5px
境界線を使用：はい
ボーダーカラー：＃999999
ボーダー幅：1px
ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：24px
ボタンのテキストの色：#ffffff
ボタンの背景色：＃e09900;
ボタンの境界線の色：＃e09900
ボタンの文字間隔：1px
ボタンフォント：Ubuntu

詳細オプション（カスタムCSS）

キャプチャフィールド：

Font-size: 24px;
Max-width: 60px;
Padding: 16px 14px 14px;

キャプチャテキスト：

Font-size: 24px

見積もりフォーム

設定を保存する

見積もりフォームフィールドの追加

設定したものではなく、フォームアイテムを追加するときが来ました。デフォルトでは、フォームには「名前」、「電子メール」、および「メッセージ」のフィールドが含まれています。「メッセージ」は削除できます。

会社の分野

「メール」フィールドの下に新しいフィールドを追加し、コンテンツオプションの下の設定を次のように更新します。

フィールドID ：会社
タイトル：あなたの会社の名前は何ですか？
必須フィールド：はい

サービスフィールド

「会社」フィールドの下に新しいフィールドを追加し、コンテンツオプションの下の設定を次のように更新します。

フィールドID ：サービス
タイトル：今日はどのようにお手伝いできますか？
タイプ：ラジオボタン
オプション：

ウェブサイト制作
アプリ開発
アートディレクション
ビデオの作成

必須フィールド：はい

アート目的分野

「サービス」フィールドの下に新しいフィールドを追加し、コンテンツオプションの下の設定を次のように更新します。

フィールドID ：art_purpose
タイトル：どのようなアートディレクションが必要ですか？
タイプ：ラジオボタン
オプション：

グラフィックデザイン
広告
ブランディング
包装

必須フィールド：はい
条件付きロジックを有効にする
関係：任意
ルール：今日はどのようにお手伝いできますか？ >等しい>アートディレクション

注：このロジックは、ユーザーが前の質問から「アートディレクション」を選択するたびに、このフィールドを表示します。

Web目的フィールド

「art_purpose」フィールドの下に新しいフィールドを追加し、コンテンツオプションの下の設定を次のように更新します。

フィールドID ：web_purpose
タイトル：どのようなウェブサイトが必要ですか？
タイプ：ラジオボタン
オプション：

Eコマース
ブログ
Webアプリ
ランディングページ

必須フィールド：はい
条件付きロジックを有効にする
関係：任意
ルール：今日はどのようにお手伝いできますか？ >等しい>ウェブサイトの制作

注：このロジックは、ユーザーが前の質問から「WebProduction」を選択するたびにこのフィールドを表示します。

ビデオフィールド

「web_purpose」フィールドの下に新しいフィールドを追加し、コンテンツオプションの下の設定を次のように更新します。

フィールドID ：ビデオ
タイトル：どのデバイスでビデオを表示しますか？
タイプ：ラジオボタン
オプション：

携帯電話
タブレット
モニターまたはテレビ
プロジェクター

必須フィールド：はい
条件付きロジックを有効にする
関係：任意
ルール：今日はどのようにお手伝いできますか？ >等しい>ビデオの作成

注：このロジックは、ユーザーが前の質問から「ビデオ作成」を選択するたびにこのフィールドを表示します。

アプリプラットフォームフィールド

「ビデオ」フィールドの下に新しいフィールドを追加し、コンテンツオプションの下の設定を次のように更新します。

フィールドID ：app_platform
タイトル：どのプラットフォームでアプリを開発しますか？
タイプ：ラジオボタン
オプション：

iOS
アンドロイド
ウィンドウズ
ブラックベリー

必須フィールド：はい
条件付きロジックを有効にする
関係：任意
ルール：今日はどのようにお手伝いできますか？ >等しい>アプリ開発

注：このロジックは、ユーザーが前の質問から「アプリ開発」を選択するたびにこのフィールドを表示します。

予算フィールド

「app_platform」フィールドの下に新しいフィールドを追加し、コンテンツオプションの下の設定を次のように更新します。

フィールドID ：予算
タイトル：予算をお考えの場合はお知らせください。
タイプ：ラジオボタン
オプション：

1,000ドル未満
約5,000ドル
10,000ドルを超える

必須フィールド：いいえ
条件付きロジックを有効にする
関係：任意
ルール：
今日はどのようにお手伝いできますか？ >等しい>アプリ開発
今日はどのようにお手伝いできますか？ >等しい>ビデオの作成
今日はどのようにお手伝いできますか？ >等しい>ウェブサイトの制作
今日はどのようにお手伝いできますか？ >等しい>アートディレクション

見積もりフォーム

設定を保存する

アンカーCSSIDを追加します

戻って、フォームを含むセクションのセクション設定を編集します。 [詳細設定]タブで、CSSIDの「見積もり」を入力します。

見積もりフォーム

これは、全幅ヘッダーのボタンURLに対応するため、ボタンをクリックするとセクションにスクロールします。

見積もりフォーム列のカスタム幅を設定する

次に、見積もりフォームを含む行の[行設定]に移動し、次のようにデザインオプションを更新します。

カスタム幅を使用：はい
カスタム幅：556px

見積もりフォーム

追加の設計のカスタマイズ

この見積もりフォームでは、ラジオボタンを使用しています。ラジオボタン/サークルをクリックすると、サークルフィラーの色は、[テーマカスタマイザー]> [一般設定]> [レイアウト設定]>のサイトのテーマアクセントの色に対応します。

見積もりフォーム

ラジオボタンの塗りつぶしの色のテーマアクセントの色をサイト全体で変更したくない場合は、[ページの設定]に移動し、[CSS]タブで次のカスタムCSSを入力します。

.et_pb_contact p input[type="radio"]:checked + label i:before { background: #e09900; }

また、次のCSSを追加して、ラジオボタンを含む質問のタイトルテキストをカスタマイズできます。

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_title { font-size: 24px; font-family: 'ubuntu'; font-weight: 400; }

最後に、ラジオボタンリストにスタイル付きの境界線を追加して、フォームのスタイルを次のCSSと一致させることができます。

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_list { float: left; overflow: hidden; border: 1px solid #999999; padding: 20px; border-radius: 4px; width: 100%; margin-top: 10px }

見積もりフォーム

それでおしまい。

最終結果を確認してください。

見積もりフォーム

最終的な考え

この見積もりフォームは、見積もりフォームでできることの簡単な例です。独自の見積もりフォームの場合は、「電話番号」などのフィールドを追加して、リードに折り返し電話をかけることができます。より条件付きのロジックを使用して、顧客のニーズに関するより具体的な情報を取得することもできます。

記事の冒頭で述べたように、より高度なプラグインがあります。理由から、堅牢なコンタクトフォームソリューションを専門とする会社全体があります。この投稿が、お問い合わせフォームモジュールが標準のお問い合わせフォームのニーズのほとんどを処理する能力を超えていることを示すのに役立つことを願っています。