ディビのコンタクトフォームモジュールをスタイリングする5つのユニークな方法

お問い合わせフォームは、多くのWebサイトの重要な部分です。 彼らの主な目的は、直感的であり、訪問者が簡単に連絡できるようにすることです。 しかし、それはすべての連絡フォームが特定の事前定義された方法である必要があるという意味ではありません。 直感的な体験と美しいデザインを簡単に組み合わせることができます。 それはまさにこの投稿で行うことです。 Diviの組み込みオプションのみを使用して構築できる5つのユニークなDiviコンタクトフォームモジュールデザインを共有します。

それを手に入れよう！

Diviお問い合わせフォームモジュールデザインのプレビュー

デスクトップ

デスクトップ上のDiviコンタクトフォームモジュールのデザインを見てみましょう。

モバイル

そして、これは、Diviコンタクトフォームモジュールのデザインが小さい画面サイズでどのように見えるかです。

ディビのコンタクトフォームモジュールをスタイリングする5つのユニークな方法

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

お問い合わせフォーム＃1の作成

新しいセクションを追加

グラデーションの背景

最初の例から始めましょう！ 新しいセクションを追加し、背景設定に移動して、グラデーションの背景を追加します。

• 色1：＃4c00ff
• 色2：＃ffd400
• グラデーションタイプ：ラジアル
• 半径方向：左下
• 開始位置：34％
• 終了位置：34％

間隔

次に、間隔設定に移動し、いくつかのカスタムパディング値を追加します。

• トップパディング：200px
• ボトムパディング：200px

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加します。

列1の背景色

モジュールをまだ追加せずに、行の設定を開き、列1のグラデーションの背景を追加します。

• 列1の背景色：rgba（255,255,255,0.55）

列1の背景画像

最初の列にも背景画像を追加します。

• 列1の背景画像の繰り返し：繰り返しなし
• 列1の背景画像のブレンド：画面

列2の背景色

そして、2番目の列に白い背景色。

• 列2の背景色：#ffffff

サイジング

次に、サイズ設定を変更します。

• 列の高さを等しくする：はい

間隔

デフォルトのカスタムパディングもすべて削除します。

• トップパディング：0px
• ボトムパディング：0px

列の境界半径

[詳細設定]タブの両方の列に境界線の半径を追加します。

border-radius: 10px;

列1にテキストモジュールを追加

コンテンツを追加する

さまざまなモジュールの追加を開始する時が来ました！ 選択したコンテンツを含むテキストモジュールを最初の列に追加します。

テキスト設定

次に、テキスト設定に移動して、いくつかの変更を加えます。

• テキストフォント：満足
• テキストの色：＃333333
• テキストサイズ：100px
• テキスト行の高さ：1em
• テキストの向き：中央

間隔

いくつかのカスタムパディング値も追加します。

• トップパディング：600px
• ボトムパディング：100px

ボックスシャドウ

デザインに深みを加えるには、微妙なボックスシャドウを使用します。

• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：-16px
• 影の色：rgba（0,0,0,0.3）

列2に画像モジュールを追加します

PNG画像をアップロードする

2番目の列にイメージモジュールを追加して続行します。 選択したPNG画像をアップロードします。

サイジング

このモジュールのサイズ設定を変更します。

• 幅：25％（デスクトップ）、50％（タブレット）、60％（電話）
• モジュールの配置：中央

間隔

負の上部マージンを使用してオーバーラップを作成します。

• トップマージン：-60％

テキストモジュール＃1を列2に追加します

コンテンツを追加する

画像モジュールのすぐ下に、コンテンツを含むテキストモジュールを追加します。

テキスト設定

このモジュールのテキスト設定を変更します。

• テキストフォント：満足
• テキストの色：＃333333
• テキストサイズ：44px
• テキストの向き：中央

テキストモジュール＃2を列2に追加します

コンテンツを追加する

次に別のテキストモジュールを追加します。

テキスト設定

このモジュールのテキスト設定も変更します。

• テキストフォント：Arial
• テキストの色：＃ffd400
• テキストサイズ：18px
• テキスト文字の間隔：2px
• テキストの向き：中央

間隔

次に下マージンを追加します。

• 下マージン：100px

お問い合わせフォームモジュールを列2に追加

名前とメールフィールドで「全幅にする」オプションを有効にする

必要な最後のモジュールは、お問い合わせフォームモジュールです。 他の作業を行う前に、名前とメールのフィールドを開いてレイアウトを変更してください。

• 全幅にする：はい

件名フィールドを追加

このデザインを作成するために、件名に別のフィールドを追加しました。

要素

次にキャプチャオプションを無効にします。

• キャプチャの表示：いいえ

フォームフィールドのテキスト設定

このお問い合わせフォームモジュールのフォームフィールドのテキスト設定にいくつかの変更を加えます。

• フォームフィールドの背景色：rgba（255,255,255,0）
• フォームフィールドフォント：Arial
• フォームフィールドのフォントの太さ：軽い
• フォームフィールドのテキストサイズ：16px
• フォームフィールドの文字間隔：2px

ボタンの設定

ボタンの外観も変更しています。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストの色：＃ffd400
• ボタンの境界線の幅：0px
• ボタンの文字間隔：2px
• ボタンフォント：Arial
• フォントスタイル：下線
• 下線の色：＃4c00ff

間隔

次に、いくつかのカスタムパディング値を追加します。

• ボトムパディング：100px
• 左パディング：50px
• 右パディング：50px

国境

そして、各フィールドに微妙な下の境界線を追加します。

• 下の境界線の幅：2px
• 下の境界線の色：#efefef

個々のフィールド間隔

最後になりましたが、メッセージ1を除いて、個々のフィールドのそれぞれに下マージンを追加します。

• 下マージン：20px

お問い合わせフォーム＃2の作成

新しいセクションを追加

グラデーションの背景

次の例に移りましょう！ 背景がグラデーションの新しいセクションを追加します。

• 色1：＃562fef
• 色2：#ffffff
• グラデーションタイプ：線形
• 開始位置：50％
• 終了位置：50％

間隔

このセクションの間隔設定にいくつかのカスタムパディング値を追加します。

• トップパディング：200px
• ボトムパディング：200px

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加します。

背景色

モジュールをまだ追加せずに、行の設定を開き、行に背景色を追加します。

• 背景色：#ffffff

列2グラジエントバックグラウンド

次の行の2番目の列にグラデーションの背景を追加します。

• カラー1：＃9932ff
• カラー2：＃562fef
• 列2の勾配タイプ：線形
• 列2の勾配方向：160度

サイジング

行のサイズ設定も変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい

間隔

次に、いくつかのカスタム間隔値を追加します。

• トップパディング：0px
• ボトムパディング：0px
• 列1の上部パディング：100px
• 列1の下部パディング：50px
• 列1の左パディング：50px
• 列1の右パディング：50px
• 列2の上部パディング：100px
• 列2の下部パディング：100px
• 列2の左パディング：50px
• 列2の右パディング：50px

国境

行の各境界線に「20px」を追加します。

ボックスシャドウ

最後に、行に微妙なボックスシャドウを追加します。

• ボックスシャドウブラー強度：45px
• ボックスシャドウスプレッド強度：-11px
• 影の色：rgba（0,0,0,0.3）

列1にテキストモジュールを追加

コンテンツを追加する

モジュールの追加を開始する時が来ました！ 最初の列のテキストモジュールから始めます。

テキスト設定

このモジュールのテキスト設定を変更します。

• テキストフォントの太さ：超太字
• テキストフォントスタイル：大文字
• テキストの色：＃562fef
• テキストSuze：100px（デスクトップ）、80px（タブレット）、60px（電話）
• テキスト文字の間隔：-10px
• テキスト行の高さ：1em

間隔

下マージンも追加します。

• 下マージン：50px

お問い合わせフォームモジュールを列1に追加

要素

最初の列に必要な2番目のモジュールは、お問い合わせフォームモジュールです。 モジュールを追加したら、[キャプチャの表示]オプションを無効にします。

• キャプチャの表示：いいえ

フォームフィールドのテキスト設定

次に、フォームフィールドの背景色を変更します。

• フォームフィールドの背景色：#ffffff

ボタンの設定

ボタンの設定も試して、テキストを含むものではなくアイコンボタンを作成してください。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：73px
• Bottonテキストの色：rgba（0,0,0,0）
• ホバーボタンの背景色：rgba（255,255,255,0）
• ボタンの境界線の幅：0px
• ボタンアイコンの色：＃9932ff
• ボタンのホバーにアイコンのみを表示：いいえ

ボックスシャドウ

最後に、各フィールドに微妙なボックスシャドウを追加します。

• ボックスシャドウブラー強度：36px
• ボックスシャドウブラー強度：-14px
• 影の色：rgba（0,0,0,0.3）

列2にテキストモジュールを追加します

コンテンツを追加する

2番目の列に必要な最初のモジュールは別のテキストモジュールです。

テキスト設定

コンテンツを追加したら、このモジュールのテキスト設定を変更します。

• テキストフォントの太さ：超太字
• テキストの色：#ffffff
• テキストサイズ：23px
• テキスト文字の間隔：-1px

宣伝文モジュール＃1を列2に追加します

コンテンツを追加する

必要な2番目のモジュールは宣伝文句です。 先に進み、連絡先情報を入力してください。

アイコンを選択

次に、一致するアイコンを選択します。

アイコン設定

このアイコンの設定を変更します。

• アイコンの色：#ffffff
• アイコンの配置：左

タイトルテキスト設定

次に、タイトルテキストの設定にいくつかの変更を加えて続行します。

• タイトルテキストサイズ：15px
• タイトル文字の間隔：-0.5px

間隔

そして、トップマージンを追加します。

• 上マージン：120px

宣伝文句モジュールを2回クローンする

最初の宣伝文句モジュールの変更が完了したら、先に進んでモジュールのクローンを2回作成できます。

両方の複製のコンテンツとアイコンを変更する

両方の複製のコンテンツとアイコンを変更して、さまざまな種類の連絡先情報を訪問者と共有します。

両方の複製の間隔を変更する

両方の複製の上部マージンも変更する必要があります。

• トップマージン：30px

お問い合わせフォーム＃3の作成

新しいセクションを追加

背景色

3番目の例に移ります！ 次の背景色で新しいセクションを追加します。

• 背景色：＃3491CE

間隔

間隔設定にいくつかのカスタムパディング値を追加して続行します。

• トップパディング：200px
• ボトムパディング：200px

行＃1を追加

カラム構造

次に、次の列構造を使用して新しい行を追加します。

テキストモジュールを追加

コンテンツを追加する

モジュールの追加を開始する時が来ました！ 最初の列に追加する必要がある最初のモジュールはテキストモジュールです。 選択したコンテンツを入力します。

テキスト設定

次に、テキスト設定を変更します。

• テキストフォントの太さ：超太字
• テキストの色：rgba（255,255,255,0.24）
• テキストサイズ：100px（デスクトップ）、86px（タブレット）、60px（電話）
• テキスト行の高さ：1em
• テキストの向き：中央

間隔

負のボトムマージンも追加します。

• 下マージン：-100px

行＃2を追加

カラム構造

この例を完了するために必要な2番目の行には、次の列構造が含まれています。

グラデーションの背景

モジュールをまだ追加せずに、行設定を開き、グラデーションの背景を追加します。

• カラー1：＃11CE84
• カラー2：＃10C77F
• グラデーションタイプ：線形
• グラデーション方向：160度
• 開始位置：50％
• 終了位置：50％

サイジング

サイズ設定も変更してください。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい

間隔

次に、いくつかのカスタムパディング値を追加します。

• トップパディング：150px
• ボトムパディング：100px
• 左パディング：50px
• 右パディング：50px

国境

次に、境界線の設定に移動し、各コーナーに「20px」を追加します。 下の境界線も使用します。

• 下の境界線の幅：10px
• 下の境界線の色：＃1ba35a

ボックスシャドウ

微妙なボックスシャドウを追加して、行の設定を完了します。

• ボックスシャドウブラー強度：80px
• ボックスシャドウスプレッド強度：-24px
• 影の色：rgba（0,0,0,0.3）

お問い合わせフォームモジュールを列1に追加

名前とメールフィールドで「全幅にする」オプションを有効にする

行の最初の列に必要な最初のモジュールは、Contact FormModuleです。 名前とメールフィールドを開き、レイアウト設定を変更します。

• 全幅にする：はい

要素

次にキャプチャを無効にします。

• キャプチャの表示：いいえ

ボタンの設定

そして、ボタンの設定を変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストの色：#ffffff
• 色1：＃3AA0E3
• カラー2：＃3491CE
• グラデーションタイプ：線形
• 勾配方向：155度
• 開始位置：50％
• 終了位置：50％
• ボタンの境界線の幅：0px
• ボタンの境界線半径：10px
• ボックスシャドウスプレッド強度：-2px
• 影の色：＃0a60af

国境

また、各フィールドに「5px」の丸い角を追加しています。

列2にテキストモジュールを追加します

コンテンツを追加する

2番目の列で、必要な最初のモジュールはテキストモジュールです。 先に進んで、いくつかのコンテンツを入力してください。

背景色

次に、背景色を変更します。

• 背景色：rgba（255,255,255,0.13）

テキスト設定

テキスト設定も試してみてください。

• テキストフォントの太さ：軽い
• テキストの色：#ffffff
• テキストサイズ：15px
• テキスト文字の間隔：-0.5px

間隔

そして、モジュールに呼吸するスペースを与えるために、いくつかのカスタムパディングを追加します。

• トップパディング：12px
• ボトムパディング：12px
• 左パディング：10px
• 右パディング：10px

国境

また、左上隅と左下隅に「20px」を追加しています。 その上に、左の境界線を追加します。

• 左ボーダー幅：34px
• 左ボーダーの色：＃edf000

可視性

このデザインをさまざまな画面サイズに一致させるために、携帯電話とタブレットでテキストモジュールを無効にします。

テキストモジュールを2回複製する

最初のテキストモジュールの変更が完了したら、先に進んでモジュールのクローンを2回作成します。

両方の複製の内容を変更する

両方の複製の内容を別のものに変更します。

両方の複製の間隔を変更する

また、上部マージンを追加して、各モジュール間にスペースを作成します。

• トップマージン：20px

両方の複製の境界を変更する

大事なことを言い忘れましたが、複製のそれぞれの左の境界線の色を個別に変更します。

• 色1：＃00faff
• カラー2：＃00f76f

お問い合わせフォーム＃4の作成

新しいセクションを追加

背景色

4番目の例に移りましょう！ 次の背景色を使用して新しいセクションを追加します。

• 背景色：#FFBABD

間隔

このセクションのデフォルトのパディングを削除します。

• トップパディング：0px
• ボトムパディング：0px

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

グラデーションの背景

モジュールをまだ追加せずに、行設定を開き、グラデーションの背景を追加します。

• 色1：#ffffff
• 色2：rgba（41,196,169,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：38％
• 終了位置：38％

サイジング

次に、サイズ設定を変更します。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

間隔

そして、いくつかのカスタムパディングを追加します。

• トップパディング：160px
• ボトムパディング：160px

テキストモジュールを追加

コンテンツを追加する

最初に必要なモジュールはテキストモジュールです。 先に進んで、いくつかのコンテンツを入力してください。

テキスト設定

それに応じてテキスト設定を変更します。

• テキストフォント：Abril Fatface
• テキストの色：＃640076
• テキストサイズ：45px（デスクトップ）、34px（タブレット）、20px（電話）
• テキスト行の高さ：1em
• テキストの向き：中央

間隔

次に、いくつかのカスタム間隔値を追加します。

• トップマージン：300px
• トップパディング：50px
• ボトムパディング：50px

お問い合わせフォームモジュールを追加

名前とメールフィールドで「全幅にする」オプションを有効にする

必要な2番目で最後のモジュールはContactFormModuleです。 名前とメールの両方のフィールドを開き、レイアウト設定を変更します。

• 全幅にする：はい

要素

次に、要素設定でキャプチャオプションを無効にします。

• キャプチャの表示：いいえ

フォームフィールドのテキスト設定

フォームフィールドのテキスト設定にもいくつか変更を加えます。

• フォームフィールドの背景色：＃fff6f6
• フォームフィールドのテキストの色：＃ff7c7c

ボタンの設定

次の設定を使用して、ボタンをアイコンボタンに変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：88px
• ボタンのテキストの色：rgba（255,255,255,0）
• ホバーボタンの背景色：rgba（255,255,255,0）
• ボタンの境界線の幅：0px
• ボタンアイコンの色：＃e60085
• ボタンのホバーにアイコンのみを表示：はい

サイジング

また、サイズの値を試して、デザインがすべての画面サイズに一致するようにします。

• 幅：42％（デスクトップ）、50％（タブレット）、77％（電話）
• モジュールの配置：中央

間隔

モジュールにいくつかのカスタム間隔値を追加して続行します。

• 下マージン：200px
• 左パディング：50px
• 右パディング：50px

国境

そして、各コーナーに「10px」を追加します。

ボタンマージン

最後になりましたが、[詳細設定]タブで次のCSSコード行を使用して、アイコンボタンを右に押します。

margin-right: -100px;

お問い合わせフォーム＃5の作成

新しいセクションを追加

グラデーションの背景

最後の例に移りましょう！ 次のグラデーションの背景を持つ新しいセクションを追加します。

• 色1：＃4bf2d0
• 色2：#ffffff
• グラデーションタイプ：ラジアル
• 半径方向：左
• 開始位置：36％
• 終了位置：36％

間隔

次に、間隔設定に移動し、カスタムパディングを追加します。

• トップパディング：250px
• ボトムパディング：250px

新しい行を追加

カラム構造

セクション設定の変更が完了したら、次の列構造を使用して新しい行を追加します。

背景色

モジュールをまだ追加せずに、行設定を開いて背景色を追加します。

• 背景色：#ffffff

列1の背景色

最初の列に別の背景色を追加します。

• 列1の背景色：＃f9f9f9

サイジング

次に、行のサイズ設定を変更します。

• カスタム幅を使用：はい
• ユニット：PX
• カスタム幅：1730px
• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい

間隔

そして、すべての画面サイズに一致するようにいくつかのカスタム間隔値を追加します。

• トップパディング：0px
• ボトムパディング：0px
• 列1の上部パディング：200px（デスクトップ）、0px（タブレットと電話）
• 列1の下部パディング：150px（デスクトップ）、0px（タブレットと電話）
• 列1の左パディング：50px
• 列1の右パディング：50px
• 列2の上部パディング：200px（デスクトップ）、100px（タブレットと電話）
• 列2の下部パディング：150px、100px（タブレットと電話）

ボックスシャドウ

行設定で最後に行う必要があるのは、微妙なボックスシャドウを追加することです。

• ボックスシャドウブラー強度：56px
• ボックスシャドウスプレッド強度：-17px
• 影の色：rgba（0,0,0,0.3）

列1にテキストモジュールを追加

コンテンツを追加する

モジュールの追加を開始する時が来ました！ 最初の列にテキストモジュールを追加します。

テキスト設定

コンテンツを追加したら、テキスト設定に移動して変更を加えます。

• テキストフォント：Cambay
• テキストの色：＃000000
• テキストサイズ：26px
• テキスト文字の間隔：-0.5px
• テキストの向き：右

間隔

上マージンも追加します。

• トップマージン：60px

可視性

そして、携帯電話とタブレットの両方でモジュールを非表示にします。

テキストモジュールを2回複製する

両方の複製の内容を変更する

最初のテキストモジュールの変更が完了したら、先に進んでモジュールのクローンを2回作成します。 両方の複製の内容を変更します。

両方の複製の間隔を変更する

両方の重複の上部マージンも変更します。

• トップマージン：80px

お問い合わせフォームモジュールを列2に追加

名前とメールフィールドで「全幅にする」オプションを有効にする

2番目の列に必要なモジュールは、お問い合わせフォームモジュールのみです。 名前とメールのフィールドを開き、レイアウト設定を変更します。

• 全幅にする：はい

要素

次にキャプチャオプションを無効にします。

• キャプチャの表示：はい

フォームフィールドのテキスト設定

次に、フォームフィールドのテキスト設定に移動し、いくつかの変更を加えます。

• フォームフィールドの背景色：rgba（255,255,255,0）
• フォームフィールドフォント：Cambay

ボタンの設定

そして、次のボタン設定を使用して一意のボタンを作成します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：64px（デスクトップ）、50px（タブレット）、40px（電話）
• ボタンのテキストの色：＃000000
• 色1：＃4bf2d0
• 色2：rgba（41,196,169,0）
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：25％
• 終了位置：25％
• ボタンの境界線の幅：0px
• ボタンのホバーにボタンのみを表示：いいえ

間隔

このモジュールにもトップマージンを追加します。

• トップマージン：50px

国境

そして、各フィールドに微妙な下の境界線を使用します。

• 下の境界線の幅：0.5px
• 下の境界線の色：＃000000

個々のフィールド間隔

最後になりましたが、次の下部マージンを各フィールドに個別に追加すれば完了です。

• 下マージン：50px

プレビュー

デスクトップ

すべての手順を完了したので、デスクトップ上のDiviコンタクトフォームモジュールの設計を最後に見てみましょう。

モバイル

そしてこれは、小さい画面サイズでのDiviコンタクトフォームモジュールの設計から期待できることです。

最終的な考え

この投稿では、作成したWebサイトで簡単に使用および変更できる5つの美しいDiviコンタクトフォームモジュールのデザインを共有しました。 お問い合わせフォームは、そこにある多くのWebサイトの重要な部分であるため、デザインが訪問者に連絡をとるように説得することを確認することが重要です。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！