Diviでクリックしてお問い合わせフォームを作成する方法

公開: 2017-09-20

このDiviチュートリアルでは、Divi、いくつかのjQueryコード、およびCSSコード以外を使用せずに、ボタンをクリックした後に（オーバーレイとして）表示される連絡先フォームを作成する方法を示します。

これは、サイトの訪問者がボタンをクリックすることでコミットしたアクションに集中できるようにするための優れた方法です。別のページに移動することはありませんが、完了するまでそのアクションにロックします。

以下では、作成する内容を簡単に確認してから、チュートリアルにジャンプできます。

デスクトップでの結果

クリック時のお問い合わせフォーム

携帯電話とタブレットでの結果

クリック時のお問い合わせフォーム

インスピレーション

この投稿のインスピレーションはコメントリクエストから来ており、B3multimediaにあります。彼らはこれを機能させるために別の方法を使用していますが、クリックするだけで連絡フォームを作成する素晴らしい方法もあります。結果を見てください：

クリック時のお問い合わせフォーム

ボタンモジュールでセクションを作成

通常、Diviのフロントエンドビジュアルビルダーでほとんどすべてを行う方法を示します。ただし、今日の投稿では、バックエンドビルダーを使用します。私たちが使用しているコードのおかげで、少し簡単になりました。とはいえ、フロントエンドエディターが大好きな場合は、フロントエンドの「スケルトン」ビューを使用して、このチュートリアルを簡単に完了することができます。

では、このチュートリアルに取り掛かりましょう。

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

最初に行う必要があるのは、お問い合わせフォームをポップアップできるボタンを配置する新しいセクションを追加することです。標準セクションを追加して、1列の行を選択するだけです。それが終わったら、ボタンモジュールを追加します。

ボタンのスタイルは自由に設定できますが、ボタンのURLが「＃」で始まり、その後に何か他のものが続くことを確認する必要があります。空白のままにすることも、「＃」文字のみを使用することもできません。「＃」とテキストを追加することで、ボタンをクリックしてもページは移動しません。空白のままにすると、クリックするとページが更新されます。また、「＃」のみを使用すると、ページの上部に移動します。

クリック時のお問い合わせフォーム

次に行う必要がある重要なことは、ボタンにCSSクラスを割り当てることです。このCSSクラスは、この投稿の後半でjQueryコードで使用して、クリック後に連絡先フォームがポップアップするようにします。ボタンに割り当てる必要があるクラスは、単に「ボタン」です。

クリック時のお問い合わせフォーム

クリック時にデスクトップお問い合わせフォームを作成

次に行う必要があるのは、この投稿の前の部分で作成したボタンをクリックすると表示されるデスクトップの連絡先フォームを作成することです。この投稿の後半では、モバイル版の作成方法についても説明します。

この方法を使用すると、基本的に行内に任意のデザインを作成し、ポップアップとして表示することができます。次の例を作成する方法を示すことによって、達成できることを味わうだけです。

クリック時のお問い合わせフォーム

新しい標準セクションを追加

作業中のページに新しい標準セクションを追加することから始めます。追加したセクションの[詳細設定]タブに移動し、[CSSクラス]フィールドに「ポップアップ」を追加します。同じタブを下にスクロールして、CSSコードの次の行をカスタムCSSサブカテゴリの[前]フィールドに配置します。

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

クリック時のお問い合わせフォーム

これを追加することで、セクションがタブ全体を占めるようになります。 CSSコードで背景色を調整して、必要な背景オーバーレイを作成できます。この場合、透明度のある黒色を使用しています。同じタブ内で、CSSコードの次の行もメイン要素に追加します。

display: none;

クリック時のお問い合わせフォーム

[詳細設定]タブで最後に行う必要があるのは、[可視性]サブカテゴリの電話とタブレットのセクションを無効にすることです。

クリック時のお問い合わせフォーム

2列の行を追加する

2列の行を追加して続行し、[デザイン]タブに移動します。 Sizingサブカテゴリの行の幅を変更することから始めます。この例では、1291pxのカスタム幅を使用しました。

クリック時のお問い合わせフォーム

[デザイン]タブを下にスクロールし、[間隔]サブカテゴリ内の両方の列の上下左右のパディングに「30px」を使用します。

クリック時のお問い合わせフォーム

[詳細設定]タブに移動して終了します。 Main Element内に、CSSコードの次の行を追加します。

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

クリック時のお問い合わせフォーム

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

セクションと行にすべての変更を加えたら、表示するさまざまなモジュールを追加します。最初に追加するのは、表示されるタイトルです。行の最初の列に新しいテキストモジュールを追加し、[コンテンツ]タブ内にテキストを書き込んで、[デザイン]タブに移動することから始めます。 [デザイン]タブ内で、[テキスト]サブカテゴリに次の設定を使用しました。

テキストの向き：中央
テキストフォント：ロブスター
フォントスタイル：太字
テキストフォントサイズ：37
テキストの色：＃002282
テキスト行の高さ：1.7em

クリック時のお問い合わせフォーム

2番目のテキストモジュールを追加

新しいテキストモジュールを追加して続行し、[コンテンツ]タブに表示するテキストを入力します。 [デザイン]タブに移動し、次の設定をテキストサブカテゴリに適用します。

テキストの向き：中央
テキストフォント：Arial
テキストフォントサイズ：13
テキストの色：＃002282
テキスト行の高さ：1.7em

クリック時のお問い合わせフォーム

ソーシャルメディアフォローモジュールを追加する

次に、ソーシャルメディアフォローモジュールも最初の列に追加します。この場合、3つのソーシャルアイコンを選択しました。 Facebook、Twitter、Instagram。これらのソーシャルアイコンを[コンテンツ]タブに追加したら、[アイコン]サブカテゴリで[リンクの形状]を[円]に変更します。

クリック時のお問い合わせフォーム

最後に行う必要があるのは、[詳細設定]タブでこのモジュールに左側のパディングを追加することです。次のCSSコード行をメイン要素に追加します。

padding-left: 40%;

クリック時のお問い合わせフォーム

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

次に、行の2番目の列に移動できます。その列で最初に配置するのは、お問い合わせフォームモジュールです。この例では、2つのフィールドのみを選択しました。名前とメールアドレス。連絡先フォームモジュールを追加したら、連絡先フォームモジュールの[デザイン]タブに移動し、[フォームフィールドテキスト]サブカテゴリに次の変更を加えます。

フォームフィールドのフォントサイズ：15
フォームフィールドテキストの色：＃002282
フォームフィールドラインの高さ：1.7em

クリック時のお問い合わせフォーム

同じタブ内で、次の変更をボタンサブカテゴリに適用します。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：20
ボタンのテキストの色：#FFFFFF
ボタンの背景色：＃0086c4
ボタンの境界線の幅：2
ボタン半径：3

クリック時のお問い合わせフォーム

[詳細設定]タブに移動し、5％の上部パディングを追加します。

クリック時のお問い合わせフォーム

宣伝文モジュールを追加する

2番目の列に追加する必要があるもう1つのものは、宣伝文句モジュールです。このモジュールが必要なのは、ポップアップの右上にある終了アイコンだけです。アイコンのリストから次のアイコンを選択し、他はすべて空白のままにします。

クリック時のお問い合わせフォーム

次に、[詳細設定]タブに移動し、CSSクラスとして「閉じる」と入力します。同じタブ内で、カスタムCSSサブカテゴリのメイン要素に次のコード行を追加します。

position: absolute;
top: -45px;
right: -30px;
cursor: pointer;

クリック時のお問い合わせフォーム

行にグラデーションの背景を適用する

最後になりましたが、行に見栄えの良いグラデーションの背景を追加します。設定を開き、グラデーションの背景オプションに次の変更を適用します。

最初のグラデーションの色：#FFFFFF
2番目のグラデーションの色：＃0c71c3
グラデーションタイプ：線形
グラデーション方向：124度
開始位置：50％
終了位置：50％

クリック時のお問い合わせフォーム

クリックでタブレットと電話のお問い合わせフォームを作成

デスクトップバージョンを作成したので、タブレットと電話のバージョンははるかに高速になります。デスクトップバージョンで使用したモジュールのほとんどは、モバイルバージョンでも同じです。モバイルでの最終結果は次のようになります。

クリック時のお問い合わせフォーム

新しい標準セクションを追加

別の標準セクションを追加することから始めます。このセクションは、前に作成したセクションと同じ設定にする必要があります。 'popup'をCSSクラスに追加し、CSSコードの次の行をBeforeフィールドに追加します。

top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;

クリック時のお問い合わせフォーム

次のCSSコード行もメイン要素に追加します。

display: none;

クリック時のお問い合わせフォーム

デスクトップバージョンの場合のように電話とタブレットで無効にする代わりに、可視性サブカテゴリのデスクトップで無効にします。

クリック時のお問い合わせフォーム

1列の行を追加する

携帯電話とタブレットのポップアップの場合、必要な列は1つだけです。この行では、カスタム幅を使用しません。ただし、デスクトップバージョンの場合と同じようにカスタムパディングを適用します。列の上部、左側、右側のパディングは30px。

クリック時のお問い合わせフォーム

また、CSSコードの次の行がカスタムCSSサブカテゴリのメイン要素に追加されていることを確認する必要があります。

transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;

クリック時のお問い合わせフォーム

テキスト、ソーシャルメディアのフォロー＆お問い合わせフォームモジュールのクローンを作成する

次に行う必要があるのは、デスクトップバージョンで使用した最初のテキストモジュールと、ソーシャルメディアのフォローおよび連絡フォームモジュールのクローンを作成することです。それらのクローンを作成したら、作成したばかりの新しいセクションの1列の行に配置します。

クリック時のお問い合わせフォーム

[詳細設定]タブで宣伝文モジュールのクローンを作成し、CSSコードを変更する

デスクトップバージョンで使用されたBlurbModuleのクローンを作成することもできますが、CSSコードに小さな変更を加える必要があります。デスクトップ用のコードを使用する代わりに、代わりに以下を使用してください。

position: absolute;
top: -15px;
right: -25px;
cursor: pointer;

'close'CSSクラスがBlurbモジュールにも使用されていることを確認してください。

クリック時のお問い合わせフォーム

行にグラデーションの背景を適用する

モバイル版では、行のグラデーションの背景にさまざまな設定を使用しています。

最初のグラデーションの色：#FFFFFF
2番目のグラデーションの色：＃0c71c3
グラデーションタイプ：線形
グラデーション方向：180度
開始位置：40％
終了位置：40％

クリック時のお問い合わせフォーム

テーマオプションにjQueryコードを追加する

このチュートリアルで最後に行う必要があるのは、jQueryコードを追加することです。テーマオプションまたは作業中のページ内に配置するコードモジュールを使用して、コードを追加できます。この例では、単にテーマオプションに配置します。

これを行うには、 WordPressダッシュボード> Divi>テーマオプション>統合>に移動し、次のjQueryコード行をWebサイトのヘッド内に貼り付けます。

<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>

クリック時のお問い合わせフォーム

結果

投稿を段階的に実行すると、デスクトップで次の結果を達成できるはずです。

クリック時のお問い合わせフォーム

そして、タブレットと電話で次の結果が得られます。

クリック時のお問い合わせフォーム

最終的な考え

この投稿では、クリック時にお問い合わせフォームを作成する方法を紹介しました。この方法を使用して訪問者と連絡を取ることは、微妙でありながら効果的です。質問や提案がある場合; 下のコメントセクションにコメントを残してください。

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

La1n / shutterstock.comによる注目の画像