Diviお問い合わせフォームに記入した後にリダイレクトする方法

お問い合わせフォームに入力した後のリダイレクトは、見落とされがちなやり取りの 1 つです。 しかし、それは重要な相互作用です。 メッセージを受信したことと、次に何を期待するかをユーザーに通知します。 幸いなことに、リダイレクトは Divi の Contact Form Module で簡単に行うことができます。 この投稿では、Divi お問い合わせフォームに入力した後にリダイレクトする方法について説明します。 また、独自のページを作成するのに役立つリダイレクト ページの例も示します。

始めましょう。

プレビュー

カスタム メッセージを含むデスクトップ リダイレクト コンタクト フォーム ページ

カスタム メッセージを含む電話リダイレクトの連絡先フォーム ページ

Diviお問い合わせフォームに記入した後にリダイレクトする方法

Divi 連絡先フォーム モジュールの [全般] タブにリダイレクト オプションがあります。 これらの例では、Divi 内で利用できる無料の Device Repair Layout Pack の Contact ページを使用しています。

設定にアクセスするには、ホバー時に表示される濃い灰色のアイコンをクリックしてモジュールを開きます。

次に、リダイレクトというセクションまで下にスクロールし、リダイレクト オプションを有効にします。

• リダイレクト URL を有効にする: はい

リダイレクト先のURL を入力します。 モジュールを閉じて、設定を保存します。 ご覧のとおり、リダイレクトを有効にするのは簡単です。 難しいのは、それらをどこに送るかを知ることです。

• リダイレクト URL: リダイレクト ページの URL

Divi連絡フォームをリダイレクトする場所を選択する方法

[リダイレクト URL] フィールドには任意の URL を入力できますが、リダイレクトするページはユーザーにとって意味のあるものでなければなりません。 これは連絡プロセスの一部であり、彼らが役立つ情報を含める必要があります。 それは彼らに伝わり、自然な進行のように感じられ、あなたのウェブサイトのように見えるべきです.

ホームページ、ブログ、または同様のページにリダイレクトするのではなく、メッセージを受信したという情報を含むカスタム ページにユーザーをリダイレクトすることをお勧めします。 次に何が起こるかについての情報を含め、彼らが使用できるいくつかのリンクを提供することができます. ダウンロードへのリンク、FAQ などを含めることができます。

レイアウトのスタイルを使用してカスタム ページを作成することをお勧めします。

カスタム メッセージを含むリダイレクト コンタクト フォーム ページを作成する

カスタム メッセージ用のページを作成しましょう。 Device Repair Layout Pack の連絡先ページのスタイリング キューを使用します。 これにより、カスタム メッセージ ページがレイアウトに合わせてスタイル設定されます。

最初のリダイレクト コンタクト フォーム ページ セクション

ページを作成し、青い歯車アイコンをクリックしてセクションの設定を開きます。

次に、 [背景]まで下にスクロールし、 [グラデーション]タブを選択します。 4 つのグラデーション ストップを作成します。 最初に白を選択し、20% に設定します。 2 番目に #edbf48 を選択し、1 番目の上に設定します。 3 番目に #edbf48 を選択し、33% に設定します。 4番目に白を選択し、3番目の上に置きます。 グラデーションの方向を 115 度に変更します。 これにより、背景のストライプが作成されます。 設定を閉じます。

• 最初の勾配停止: 20%、#ffffff
• 2 番目のグラデーション ストップ: 20%、#edbf48
• 3 番目のグラデーション ストップ: 33%、#edbf48
• 4 番目のグラデーション ストップ: 33%、#ffffff
• 勾配方向: 115deg

最初の行

次に、単一列の Rowを追加します。 デフォルト設定を使用します。

タイトル

次に、 Text Moduleを追加します。

コンテンツ タイプを見出し 1 に設定し、コンテンツ エディターにメッセージを入力します。

• コンテンツ タイプ: 見出し 1
• 本文: お問い合わせありがとうございます。 すぐにご連絡いたします。

文章

次に、 [デザイン]タブを選択します。 下にスクロールして、 [テキストの配置]を [中央揃え] に変更します。

• テキストの配置: 中央揃え

見出しテキスト

見出しテキストまで下にスクロールします。 フォントに Inter を選択します。 Weightを Bold に、 Colorを black に設定します。

• フォント: インター
• 重量: 太字
• 色: #000000

フォント サイズをデスクトップの場合は 75 ピクセル、タブレットの場合は 40 ピクセル、スマートフォンの場合は 24 ピクセルに変更します。 行の高さを1.2em に変更します。 モジュールを閉じます。

• サイズ: デスクトップ 75px、タブレット 40px、スマートフォン 24px
• 行の高さ: 1.2em

2 番目のリダイレクト コンタクト フォーム ページのセクションと行

次に、最初のセクションの下に新しいセクションを追加し、単一列の行を追加します。 デフォルト設定を使用します。

お問い合わせフォーム ページの説明をリダイレクトする テキスト タイトル

2 行目にテキスト モジュールを追加し、その設定を開きます。

コンテンツを見出し 4 に変更し、コンテンツ エディターにタイトルを入力します。 内容が一目でわかるように「What's Next」というタイトルをつけています。

• コンテンツ タイプ: 見出し 4
• コンテンツ本文: 次のステップ

文章

[デザイン]タブを選択し、 [テキストの配置] を[中央揃え] に設定します。

• テキストの配置: 中央揃え

見出しテキスト

見出しテキストまで下にスクロールし、H4 タブを選択します。 フォントに Inter を選択し、 Weight をBold に、 Color を黒に設定します。

• フォント: インター
• 重量: 太字
• 色: #000000

サイズをデスクトップの場合は 19ps、タブレットの場合は 16px、スマートフォンの場合は 14px に変更します。 ラインの高さを1.6em に設定します。

• サイズ: デスクトップ 19px、タブレット 16px、スマートフォン 14px
• 行の高さ: 1.6em

間隔

次に、 Spacingまで下にスクロールし、 Bottom Marginに 0px を追加します。 モジュールを閉じます。

• 下マージン: 0px

お問い合わせフォーム ページの説明をリダイレクトする テキスト本文

次に、説明のタイトルの下にテキスト モジュールを追加します。

本文のコンテンツ エディターに説明テキストを追加します。 このテキストは、応答がいつ期待されるかをユーザーに通知します。 彼らのメッセージを受け取ったというメモも追加しています。

• コンテンツ本文: メッセージを受け取りました。2 営業日以内にメールをお送りします。

文章

[デザイン]タブに移動し、 [フォント]に [Open Sans] を選択し、[色]を黒に変更します。

• フォント: Open Sans
• 色: #000000

サイズをデスクトップの場合は 16px、タブレットの場合は 15ps、スマートフォンの場合は 14px に変更します。 ラインの高さを1.8em に設定します。

• サイズ: デスクトップ 16px、タブレット 15px、スマートフォン 14px
• 行の高さ: 1.8em

[テキストの配置]まで下にスクロールし、[中央揃え] を選択します。 モジュールを閉じます。

• テキストの配置: 中央揃え

よくある質問のテキスト タイトル

次に、情報と FAQ ページへのリンクを追加します。 まず、説明のタイトルText Moduleをコピーし、説明 Text Module の下にドラッグします。

Content Type を見出し 4 のままにして、 Body Content をFAQ に変更します。 他のすべての設定はすでに存在するため、モジュールを閉じることができます。

• コンテンツ タイプ: 見出し 4
• コンテンツ本文: よくある質問

よくある質問本文

次に、説明のテキスト モジュールをコピーし、FAQ タイトルのテキスト モジュールの下にドラッグします。

このモジュールに 1 つの変更を加えますが、最初にテキストを追加します。 必要に応じてスペースを追加して、必要なレイアウトを作成します。 例でわかるように、FAQ リンクを別の行に配置するためにスペースを追加しています。 FAQ ページのテキストへのリンクを追加したので、FAQ ページにリンクするようになりました。 色を変更する必要があります。

• コンテンツ本文: お待ちの間に、よくある質問をご覧ください。 これにより、予備的な質問に答えることができます。 FAQ を表示するには、次のリンクをクリックしてください: FAQ ページ

テキストリンク

次に、 [デザイン]タブの[テキスト]セクションに移動し、 [リンク]タブを選択して、[色]を #f26440 に変更します。 残りの設定はデフォルトのままにして、通常のテキスト設定に従います。 モジュールを閉じます。

• リンクテキストの色: #f26440

お問い合わせフォーム ページのリダイレクト ボタン

最後に、ユーザーをホームページに戻すボタンを追加しましょう。 ボタン モジュールを最後のテキスト モジュールの下に追加します。

ボタン モジュールの設定を開き、ボタン テキストをホームページに変更します。

• テキスト: ホームページ

リンク

次に、ホームページのURL をURL フィールドに入力します。 リンク ターゲットをデフォルト設定のままにして、リンクが同じウィンドウで開くようにします。

• ボタン リンク URL: ホームページの URL

アライメント

次に、 [デザイン]タブを選択します。 [配置]で、 [ボタンの配置]に [中央] を選択します。

• ボタンの配置: 中央

ボタン

Buttonまで下にスクロールし、 Use Custom Styles for Button を有効にします。 フォント サイズを 14px に変更します。 フォントの色を白に、背景の色を#286f6c に設定します。

• ボタンにカスタム スタイルを使用する: はい
• テキストサイズ: 14px
• 文字色：#ffffff
• 背景色: #286f6c

境界線の色を#286f6c に変更し、半径を0px に設定します。 フォントに Inter を選択し、 Weight をBold に、 Styleを TT に設定します。

• 枠の色: #286f6c
• ボーダー半径: 0px
• フォント: インター
• 重量: 太字
• スタイル: TT

間隔

最後に、 Spacingまで下にスクロールします。 上下のパディングを14ps に、左右のパディングを 20px に変更します。 モジュールを閉じて、設定を保存します。

• パディング: 上下 14px、左右 20px

結果

カスタム メッセージを含むデスクトップ リダイレクト コンタクト フォーム ページ

カスタム メッセージを含む電話リダイレクトの連絡先フォーム ページ

終わりの思い

これが、Diviお問い合わせフォームに記入した後のリダイレクト方法です. リダイレクトの設定は、Divi の Contact Form Module で簡単に行うことができます。 リダイレクト専用のページを作成し、そのページを使用して特定の情報とリンクを提供することをお勧めします。 訪問者は余分な努力を高く評価し、連絡プロセスがより理解しやすく充実したものになります。

我々はあなたから聞きたい。 お問い合わせフォームに入力した後、カスタム ページを使用してリダイレクトしていますか? コメントであなたの経験を教えてください。