vwおよびvhの長さの単位を使用してDiviでレスポンシブコンタクトフォームを設計する方法

公開: 2019-06-12

Webフォームは、Webサイトの成功にとって非常に重要です。これは、ほとんどのオンラインビジネスが、電子メールリストを作成し、潜在的な購入者と通信することによってお金を稼ぐために、電子メールオプトインや連絡フォームなどのフォームに依存していることを考えると理にかなっています。そして最近では、すべてのブラウザとモバイルデバイスで見栄えのするレスポンシブフォームを設計していることを確認する必要があります。

このチュートリアルでは、Diviでvwおよびvhの長さの単位を使用してレスポンシブコンタクトフォームを設計する方法を紹介します。ブラウザの幅と高さに応じて調整される入力フィールドとボタンのサイズと間隔を設定する方法について説明します。これにより、携帯電話の横向きのビューでも、すべてのデバイスでフォームの可視性を最大化できます。

これを行うには、フォームのテキスト、フィールド、ボタンを簡単にカスタマイズできるDiviの組み込み設定を使用します。

始めましょう。

スニークピーク

デスクトップ

タブレット

電話（ポートレート）

電話（風景）

レスポンシブコンタクトフォームのレイアウトを無料でダウンロードします（レスポンシブEメールオプチンフォームも含まれています！）

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、次の設定が必要です。

Diviテーマがインストールされ、アクティブになっています
フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）
お気に入りの飲み物（まだコーヒーを飲んでいない場合を除き、オプション）

その後、Diviでレスポンシブフォームの作成を開始するための空白のキャンバスが作成されます。

レスポンシブデザインにvwとvhの長さの単位を使用する理由

長さの単位は、Webページの要素のサイズとスペースに必要な値です。おそらく、Webデザインで使用される最も一般的な長さの単位は、ピクセルとパーセンテージです。たとえば、ピクセルはテキストのサイズ設定に使用される一般的な長さの単位であり、emの長さの単位は一般に行の高さに使用され、パーセンテージの長さの単位はレスポンシブデザインの要素の間隔とサイズ設定に一般的に使用されます。実際、Divi要素（モジュール、行、セクション）のデフォルトの長さの単位値は、これらの一般的な長さの単位を使用して作成されます。

長さの単位は、絶対（他の要素のサイズに関係なく同じサイズのまま）または相対（他の要素のサイズに応じて変更/スケール）のいずれかになります。たとえば、ピクセルは絶対長の単位です。したがって、テキストの本文のフォントサイズが16ピクセルの場合、コンテナのサイズに関係なく、テキストは16ピクセルのままになります。ただし、パーセンテージとemはどちらも相対的な長さの単位です。したがって、要素のテキストサイズが変更されると、em値を持つ行の高さが調整されます。また、パーセンテージも相対的な長さの単位であるため、幅が80％の行は、そのコンテナー（またはセクション）の80％になります。

vwとvhの長さの単位も相対的な長さの単位ですが、要素の親コンテナーに相対的ではなく、実際のブラウザーのビューポートに相対的です。ビューポートの幅（vw）はブラウザの幅を基準にしており、ビューポートの高さ（vh）はブラウザの高さを基準にしています。これらの長さの単位を使用すると、ビューポートに応じて拡大縮小されるため、すべてのブラウザでデザインの一貫性を保つことができます。これにより、各要素のサイズがより予測可能になり、管理が容易になります。各デバイスまたはレスポンシブブレークポイントで各要素に異なるサイズを指定することについてそれほど心配する必要はありません。 vhの長さの単位は、ポートレートビューとランドスケープビューでの電話のビューポートの高さを考慮に入れるため、携帯電話のディスプレイに特に便利です。

この手法は、ユーザーがブラウザの幅を調整すると、スケールがスムーズに拡大するデスクトップ上の大きな全幅ディスプレイに依存するデザインに最適です。

長さの単位の詳細については、Diviでの長さの単位の使用に関するこのガイドを確認してください。

パート1：Diviでのレスポンシブコンタクトフォームの設計

セクションと行の作成

1列の行を持つ通常のセクションを作成します。モジュールを追加する前に、次のようにセクション設定を更新してください。

背景グラデーションの左の色：＃fd7b5b
背景グラデーション右色：＃a92200

次に、行の設定を開き、背景のグラデーションを付けます。

背景グラデーションの左の色：＃ffdb8b
背景グラデーションの右の色：＃fdb15b

次に、ブラウザに合わせて拡大縮小できるように、vwの長さの単位を使用して行のサイズを設定しましょう。

幅：66vw（デスクトップ）、66vw（タブレット）、100％（電話）
最大幅：66vw（デスクトップ）、66vw（タブレット）、100％（電話）
最小高さ：100vh（電話）

パディング：0px上、0px下

66vwの値は、行がブラウザのビューポートの幅の約3分の2のままになるようにします。電話ディスプレイの100vh値は、行の高さが電話のビューポートの高さと等しいことを確認します（オプションですが、電話の行コンテンツ領域を最適に表示するための優れたタッチです）。

行の幅が100％（100vwではない）に設定されていることに注意してください。これは、ページを下にスクロールするときに100vwがスクロールバーの幅を考慮しないためです。したがって、全幅表示には常にパーセンテージを使用することをお勧めします。

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

行を配置したら、Contact FormModuleを行に追加できます。

お問い合わせフォームが追加されたら、タイトルと同様にコンテンツを更新し、キャプチャを無効にします。

タイトル：お問い合わせ
キャプチャを表示：いいえ

フィールドを全幅にする

このデザインでは、全幅フィールドを使用します。これにより、フィールド間に一貫した間隔を追加でき（フロートが使用されていないため）、後で独自のデザインを作成するために、各フィールドにカスタム幅を指定できます。今のところ、名前フィールドとメールフィールドの両方の設定を開き、[全幅にする]オプションを[はい]に設定します。

レスポンシブデザインのためのフィールドの最適化

次に、お問い合わせフォームの設定に戻ります。これで、vwおよびvhの長さの単位を使用してフォームフィールドをカスタマイズできます。以下を更新します。

フィールドテキストの色：＃333333
フィールドマージン（デスクトップおよびタブレット）：2vw上部、2vw下部
フィールドマージン（電話）：2vh上、2vh下

フィールドパディング（デスクトップとタブレット）：1vw上、1vw下、2vw左、2vw右
フィールドパディング（電話）：上2vh、下2vh、左2vh、右2vh

フィールドテキストサイズ：2.5vw（デスクトップ）、4vh（電話）

注：電話に4vhを使用すると、携帯電話のディスプレイの高さに合わせてテキストサイズを拡大縮小できます。これは、横向きの電話ディスプレイでフォームを表示する（電話を横向きにする）のに役立ちます。ただし、より一貫性のあるテキストサイズが必要な場合は、電話ディスプレイのフィールドテキストサイズにピクセル長の単位を使用することをお勧めします。

タイトルテキストのデザイン

タイトルテキストについては、以下をカスタマイズします。

タイトル見出しレベル：H2
タイトルフォント：Karla
タイトルフォントの太さ：太字
タイトルテキストの色：＃f56845
タイトルテキストサイズ：7vw（デスクトップ）、8vh（電話）
タイトル文字の間隔：1vw
タイトル行の高さ：0.6em

レスポンシブデザインのためのボタンの最適化

お問い合わせフォームボタンには、前にデザインしたフィールドと同様の間隔とテキストサイズを追加します。

クリックしてカスタムボタンスタイルを使用し、以下を更新します。

ボタンのテキストサイズ：2.5vw（デスクトップ）、4vh（電話）
ボタンのテキストの色：#ffffff
ボタンの背景色：＃333333
ボタンの境界線の幅：0px
ボタンの境界線半径：0px
ボタンフォント：Montserrat
ボタンマージン（デスクトップ）：1vw上、0px左、0px右
ボタンマージン（電話）：1vhトップ
ボタンパディング（デスクトップ）：3vw上部、3vw下部
ボタンパディング（電話）：上3vh、下3vh

ボタンボックスの影：スクリーンショットを参照
ボックスシャドウの水平位置：2em
ボックスシャドウの垂直位置：0.4em
影の色：rgba（245,104,69,0.29）

お問い合わせフォームに間隔を追加

次に、次のように、vw長さの単位とボックスシャドウを使用して、連絡先フォームにパディングを追加します。

パディング（デスクトップ）：上3vw、下3vw、左5vw、右5vw
パディング（電話）：上5vh、下5vh、左3vh、右3vh

ボタンボックスの影：スクリーンショットを参照
ボックスシャドウの水平位置：2em
ボックスシャドウの垂直位置：0.4em
影の色：rgba（245,104,69,0.29）