Diviでインラインコンタクトフォームを作成する方法

ホームページの主人公（または折り目の上の）セクションは、主要な不動産です。 そして、ほとんどの不動産開発業者のように、あなたはあなたのスペースを最大にしたいです。 そこで、インラインの連絡フォームが役に立ちます。 インラインフォームは、基本的に、すべてのフィールドまたはコントロールが並んで、インラインで、左揃えになっているフォームです。 このコンパクトなレイアウトは、ホームページやランディングページでのコンバージョンを増やすのに最適です。

今日は、DiviのVisualBuilderを使用してWebサイトのインライン連絡フォームを作成する方法を紹介します。 これを実現するために必要な作業は、実際にはフォームフィールドの幅と配置の両方を調整することです。 これを実現するために、連絡先モジュールの設計機能を利用し、[詳細設定]タブにカスタムCSSを追加します。

Diviを初めて使用する場合は、[詳細設定]タブでこのチュートリアルに取り組むことを思いとどまらせないでください。 私は物事をシンプルかつ明確に保つために最善を尽くしました。

楽しみ。

インラインお問い合わせフォームの例を次に示します。

コンセプトとインスピレーション

自動車保険を購入したり、オンラインで新しい家を検索したりする必要がある場合は、入力フィールドを最小限に抑えて意図的にコンパクトにしたインラインフォームを見たことがあると思います。これにより、ユーザーはボールを転がす傾向が強くなります。新しい見積もり。 そこで、Diviユーザーにも同様のことを行う簡単なインライン連絡フォームを作成したかったのです。 このお問い合わせフォームでは、見積もりを作成したり、家のリストを作成したりすることはできませんが、クライアントやユーザーが簡単に連絡できる方法を提供したいビジネスオーナーやブロガーのニーズに適合します。

Diviを使用した設計の実装

私たちのYoutubeチャンネルを購読する

まず、単一の列構造の行を持つ通常のセクションを追加します。

残りの要素は白い背景では見づらいので、先に進んで、セクション設定に移動し、以下を更新して、セクションに背景色を追加しましょう。

コンテンツオプション

背景色：＃006ea5

設定を保存する

これで、Contact FormModuleを行に追加できます。

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

コンテンツオプション

ボタンテキストの送信：「見積もりを取得」
メール：[メッセージの送信先のメールアドレスを入力してください]
キャプチャの表示：いいえ
フォームの背景色：rgba（255,255,255,0）

デザインオプション

フォームフィールドフォント：Lato
フォームフィールドのフォントサイズ：24px
フォームフィールドのテキストの色：#ffffff
入力境界半径：3px
境界線を使用：はい
ボーダーカラー：#ffffff
ボーダー幅：1px
ボタンのテキストサイズ：24pxデスクトップ、20pxタブレット、20pxスマートフォン
ボタンのテキストの色：＃0c71c3
ボタンの背景色：＃f4f11f
ボタンの境界線の幅：3px
ボタンの境界半径：3

設定を保存する

[コンテンツ]タブに戻り、フィールドバーの右側にあるゴミ箱アイコンをクリックしてメッセージフィールドを削除します。 次に、個々のフィールドバーの下にある白いプラス記号が付いた灰色の円ボタンをクリックして、新しいフィールドを追加します。 これは電話フィールドになります。

次のようにフィールド設定を更新します。

コンテンツオプション

フィールドID：「電話」
タイトル：電話

デザインオプション

全幅にする：いいえ
許可される記号：数字のみ（0-9）

高度なオプション

メイン要素ボックス内に次のカスタムCSSを入力します。

Max-width: 18%;
Float: left;
Margin-top: -1.5%;
Clear: none !important;

設定を保存する

次に、お問い合わせフォーム設定の[コンテンツ]タブに戻り、作成した[電話]フィールドを複製して、[郵便番号]フィールドに変換します。

次のようにフィールド設定を更新します。

コンテンツオプション

フィールドID：「Zip」
タイトル：郵便番号

高度なオプション

メイン要素ボックス内に次のカスタムCSSを入力します。

Max-width: 17%;
Margin-top: -1.5%;

設定を保存する

これまで、電話フィールドと郵便番号フィールドの幅と配置を調整してきました。 次に、[名前]フィールドと[電子メール]フィールドについても同じことを行う必要があります。

[名前]フィールドの設定に移動し、[メイン要素]ボックス内の次のカスタムCSSで詳細オプションを更新します。

Max-width: 20%;
Margin-top: -1.5%;

設定を保存する

次に、[電子メール]フィールドの設定に移動し、[メイン要素]ボックス内の次のカスタムCSSで詳細オプションを更新します。

Max-width: 20%;
Margin-top: -1.5%;

設定を保存する

重要な注意：各フィールドに使用されるカスタムCSSには、max-widthプロパティが特定のパーセンテージに設定されていることに注意してください。 このパーセンテージは、フィールドがコンテンツ領域の幅にどの程度関連するかを示します。 たとえば、Diviのデフォルトのコンテンツ領域は1080pxであるため、名前フィールドは1080pxの20％です。 これは、インラインフォーム用にさらにスペースを作成するかどうかを知るために重要です。 必要に応じて、max-widthプロパティのパーセンテージ値を調整するだけです。

ほとんど終わった。 これで、フォームを保持するセクションと行の間隔をクリーンアップするだけです。 [デザイン]タブの[セクション設定]に移動し、以下を更新します。

カスタムパディング：上12px、下14px

設定を保存する

次に、 [デザイン]タブの[行の設定]に移動し、以下を更新します。

カスタムパディング：上48px、右0px、下0px、左0px

設定を保存する

応答性を高める

これは水平フォームであるため、モバイルデバイスではフォームフィールドを調整する必要があります。 これを修正するために必要なのは、カスタムCSSの1つの小さなスニペットだけです。 [詳細設定]タブの[ページ設定]に移動し、 [カスタムCSS]ボックスで次の操作を行います。

@media (max-width: 767px) {

p.et_pb_contact_field {
max-width: 100% !important;
}
}

フォームがさまざまな画面サイズにどのように応答するかを次に示します。

3フィールドインラインコンタクトフォームの作成

4つのフィールドを持つインラインフォームを作成したので、いくつかのオプションを更新することで、簡単に3つのフォームフィールドに変換できます。 手順は次のとおりです。

1. 作成したインラインフォームを編集するか、フォームを複製します。
2. 郵便番号フィールドを削除します（現在、フィールドは3つしかありません）
3. [詳細設定]タブの[電話フィールド]（または3番目のフィールド）の設定を、次のカスタムCSSで更新します。

   Main Element box:max-width: 25%;
   float:left;
   margin-top: -1.5%;
   clear: none !important;

4. [詳細設定]タブの[電子メールフィールド]（または2番目のフィールド）の設定を、[メイン要素]ボックスの次のカスタムCSSで更新します。

   max-width: 25%;
   margin-top: -1.5%;

5. [詳細設定]タブの[名前]フィールド（または最初のフィールド）の設定を、[メイン要素]ボックスの次のカスタムCSSで更新します。

   max-width: 25%;
   margin-top: -1.5%;

注：フィールドの幅を広げるために、各フィールドのmax-widthプロパティが25％になっていることに注意してください。

2フィールドインラインコンタクトフォームの作成

いくつかのオプションを更新することで、インラインフォームを2フィールドフォームに変換することもできます。 手順は次のとおりです。

1. 作成したインラインフォームを編集するか、フォームを複製します。
2. 郵便番号フィールドと電話フィールドを削除して、2つのフィールド（名前と電子メール）のみを使用できるようにします。
3. [詳細設定]タブの[名前]フィールド（または最初のフィールド）の設定を、[メイン要素]ボックスの次のカスタムCSSで更新します。

   max-width: 37%;
   margin-top: -1.5%;

4. [詳細設定]タブの[電子メールフィールド]（または2番目のフィールド）の設定を、[メイン要素]ボックスの次のカスタムCSSで更新します。

   max-width: 37%;
   margin-top: -1.5%;
   clear: none !important;

他のフィールドタイプの追加

このチュートリアルは主に通常の入力フィールドタイプを対象としていますが、別のフィールドタイプに簡単に変更できます。 たとえば、選択ドロップダウンフィールドタイプを使用する場合は、他のフィールドと同じスタイルをすべて適用できます。 ただし、オプションを表示できるように、その特定のフィールドに背景色（＃006ea5）を追加する必要があります。

ドロップダウンフィールドは次のようになります…

最終的な考え

私の経験では、インラインコンタクトフォームはあなたのビジネスにとって強力なツールになり得ます。 すぐに使えるより堅牢なオプションを備えたより高度なプラグインがありますが、別のプラグインがあなたのお茶ではなく、より単純な解決策が理にかなっている場合は、これを試してみてください。 あなたがそれを好きになることを願っています。

コメントであなたからの連絡を楽しみにしています。