Diviコンタクトフォームの作成方法

Diviコンタクトフォームの作成方法:2つの異なる方法

要約:ChatGPTPerplexity

WordPressウェブサイト用のDiviコンタクトフォームを簡単に作成する方法をお探しですか?

WPFormsの統合とDiviコンタクトフォームモジュールを通じて、簡単にコンタクトフォームを作成できることを知って喜んでいただけるでしょう。

このガイドでは、両方の方法の手順を説明しますので、あなたに最適なオプションを選択できます。

Diviコンタクトフォームの作成方法

WPFormsまたはDiviコンタクトフォームモジュールを使用してDiviコンタクトフォームを作成できます。両方の方法について、以下の手順に従ってください。

Divi Builderでコンタクトフォームを作成する

Diviコンタクトフォームモジュールを使用すると、メール、テキスト、チェックボックス、ラジオボタン、ドロップダウンなどの入力フィールドを簡単に作成できます。

ステップ1:WordPressにDiviテーマをインストールする

まず最初に行う必要があるのは、Diviアカウントにサインアップすることです。Diviはプレミアムテーマなので、年間89ドルのサブスクリプションを購入する必要があります。

Divi ランディングページ

その後、Elegant Themesアカウントのメンバーエリアに移動し、Diviテーマのダウンロードボタンをクリックします。

Divi テーマをダウンロード

Diviテーマのzipファイルを入手したら、WordPressダッシュボードに移動します。そこから、外観 » テーマに移動し、新規追加ボタンをクリックします。

WordPress に新しいテーマを追加

次に、新規テーマ追加ボタンをクリックし、Divi.zipファイルをアップロードしてから、テーマをインストールボタンをクリックするだけです。

Divi テーマをインストール

Diviテーマがウェブサイトにインストールされたら、有効化ボタンをクリックすると、Divi Builderを使用できるようになります。

ステップ2:ページを追加してDivi Builderをロードする

新しいページまたは投稿を作成し、WordPress投稿エディタが開くのを待ちます。Divi Builderをロードするには、紫色のDivi Builderを使用ボタンをクリックします。

Divi ビルダーを使用する

これにより、ページがDivi Builderで再読み込みされ、3つのオプションが表示されます:ページを最初から構築する、既製のレイアウトを選択する、既存のページをクローンする。

Diviでコンタクトページをゼロから作成する手順を説明しているので、構築を開始ボタンをクリックします。

Divi をゼロから構築

素晴らしい!次に、コンタクトフォームを作成するために必要なのは、Diviコンタクトフォームモジュールをロードすることです。始めましょう。

ステップ3:Diviコンタクトフォームモジュールを追加する

Divi Builderで、+(プラス)ボタンをクリックし、オプションのリストから、ニーズに合った新規行テンプレートを選択します。

Divi ビルダーに行を追加

行を追加すると、モジュールのライブラリが開きます。新規モジュールタブから下にスクロールし、コンタクトフォームモジュールをクリックします。

Divi お問い合わせフォームモジュール

コンタクトフォームモジュールを追加すると、名前、メール、メッセージの3つのフォームフィールドが表示されます。これでコンタクトフォームの準備ができました!

ステップ4:Diviコンタクトフォームを設定する

開始するには、Divi Builderのコンタクトフォームをクリックしてカスタマイズオプションを開きます。新規フィールド追加ボタンをクリックして、他のフォームフィールドを追加できます。

Diviコンタクトフォーム設定

少し下にスクロールすると、テキストメニューの下に追加オプションがあり、タイトル、確認メッセージを編集したり、送信ボタンのテキストを変更したりできます。

Diviコンタクトフォームテキスト設定

背景設定、スパム保護、リダイレクトリンクなどの便利なツールも見つかります。必要に応じて自由にこれらを変更してください。

WPFormsでDiviコンタクトフォームを作成する

WPFormsは、WordPress向けの最高のドラッグ&ドロップフォームビルダーであり、お問い合わせフォーム、計算フォーム、注文フォームなどを作成するために使用できます!

ステップ1:WPFormsプラグインをインストールする

WordPress向けの最高のフォームビルダープラグインとして、WPFormsはDiviと正常に統合され、フォーム作成プロセスを簡単にします。

プラグインのLiteバージョンでさえ、Diviのお問い合わせフォームモジュールと比較して非常に役立つ多くの機能が付属しています。

ただし、Proにアップグレードすると、高度なフォームフィールド、エントリー管理、ファイルアップロードなどの追加機能を利用できます!

WPFormsホームページ

ニーズに合ったライセンスレベルを決定したら、WPFormsプラグインをインストールしてください。手順については、WordPressプラグインのインストールに関するこのガイドを確認してください。

ステップ2:コンタクトフォームを作成する

次に、新しいフォームを作成します。WordPressダッシュボードからWPFormsに移動し、新規追加オプションをクリックします。

WPForms 新規追加

その後、フォームに名前を付け、テンプレートを選択します。このガイドでは、フォーム作成を迅速に進めるために、シンプルなコンタクトフォームを選択します。

シンプルなコンタクトフォームテンプレートを使用する

フォームビルダー内では、フォームはこのように表示されます。必要に応じてフィールドを追加、変更、または並べ替えてください。

DiviコンタクトフォームWPForms

これで完了です!WPFormsを使用して、お問い合わせフォームを正常に作成しました。次に、通知と確認をカスタマイズしましょう。

ステップ3:通知と確認をカスタマイズする

通知を設定することで、新しいフォームのエントリーについて常に把握できます。これはフォームビルダー内にあります。設定に移動し、次に通知を選択します。

フォーム通知設定WPForms

ここから、件名行の変更など、デフォルトの通知設定を変更したり、受信者に送信されるメールを変更したりできます。

コンタクトフォーム通知

次に、設定メニューで、リストから確認を選択して、フォームが正常に送信されたときの返信を設定します。

WPForms確認ページ

次に、メッセージ、ページ表示、リダイレクトのいずれであっても、ウェブサイトに最も適した確認タイプを選択します。

コンタクトフォーム確認

フォームとその設定を最新の状態に保つために、変更を保存することを忘れないでください。これで、フォームはDiviを通じて公開する準備ができました。

フォームを保存 WPForms

ステップ4:Diviコンタクトフォームを公開する

このお問い合わせフォームを追加するには、Diviビルダーに移動し、Diviのお問い合わせフォームモジュールで行ったように、行スタイルを選択します。

単一行を挿入 Divi

DiviにはWPFormsとの統合機能が付属しているため、フォームを追加するには、検索ボックスでWPFormsを検索し、表示されるモジュールを選択します。

DiviでWPFormsモジュールを選択

WPFormsモジュールがDiviに追加された後、追加の設定が表示されます。たとえば、ここで次のことができます。

  • 追加したいフォームを選択します。
  • フォームのタイトルを表示する設定を有効にします。
  • フォームの説明を表示する設定を有効にします。

準備ができたら、フォームの下にあるドロップダウンメニューからフォームを選択してください。

Diviフォームを選択

選択したフォームが自動的にDiviページに追加されます。設定を保存するには、緑色のチェックマークボタンをクリックしてください。

Diviフォームを保存

素晴らしい!WPForms を使用した Divi のお問い合わせフォームの準備が整いました!さらにカスタマイズしたい場合は、こちらの追加のデザイン設定をご覧ください。

Divi のお問い合わせフォームの作成に関するよくある質問

Divi テーマとその多くの機能(お問い合わせフォームなど)の使用は、読者の間で人気のあるトピックです。それに関するよくある質問への回答を以下に示します。

Divi にはお問い合わせフォームがありますか?

はい、Divi にはお問い合わせフォームモジュールが付属しています。このツールを使用すると、追加のプラグインを必要とせずに、ページにお問い合わせフォームを簡単に追加できます。ただし、WPForms のような専用フォームビルダーと比較すると機能が限定される場合があります。

Divi のお問い合わせフォームを編集するにはどうすればよいですか?

Divi のお問い合わせフォームを編集するには、Divi Builder でフォームがあるページに移動します。「お問い合わせフォーム」と表示されているモジュールをクリックします。ここで、フィールドの変更、スタイルの調整、フォーム通知および確認設定のカスタマイズを直接行うことができます。

WordPress には組み込みのお問い合わせフォームがありますか?

WordPress 自体には組み込みのお問い合わせフォーム機能は付属していません。ただし、WordPress ユーザーはプラグインを使用して簡単にお問い合わせフォームをウェブサイトに追加できます。WordPress にインストールされた Divi は、統合されたお問い合わせフォームモジュールを提供し、追加のプラグインの必要性をなくします。

Divi でポップアップのお問い合わせフォームを作成するにはどうすればよいですか?

Divi でポップアップのお問い合わせフォームを作成するには、Divi Builder と少しの創造性が必要です。まず、標準セクションでお問い合わせフォームをデザインします。次に、Divi Builder の表示オプションを使用して、ページ上のこのセクションを非表示にします。

最後に、ページ上のボタンまたはリンクにリンクして、セクションがポップアップとして表示されるようにトリガーします。この方法では、スムーズな操作のためにカスタム CSS または Divi ポップアッププラグインが必要になる場合があります。ただし、より簡単な方法としては OptinMonster を使用することです!

次に、WordPress で価格計算機を作成する方法を学びます

オンラインで商品を販売するために、ウェブサイトに価格計算機を作成する方法について簡単な解決策をお探しですか?ウェブサイト用の自動価格計算機を備えた簡単な注文フォームを設定するステップバイステッププロセスについては、このガイドをご覧ください。

ファイルをダウンロードするためにメールアドレスの入力を求めるフォームに、ユーザーが記入するように促す方法を知りたい場合も、可能です。このガイド「ファイルをダウンロードするためにメールアドレスを要求する方法」をご覧ください。

WordPressメールを今すぐ修正する

メールの修正準備はできましたか?今日から始めましょう WordPressの最高のSMTPプラグインで。メールを修正する時間がない場合は、追加購入で完全なWhite Glove Setupアシスタンスを利用でき、すべての有料プランで14日間の返金保証が付いています。

この記事がお役に立った場合は、WordPressのヒントやチュートリアルについては、FacebookとTwitterでフォローしてください。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、手数料が発生する可能性があることを意味します。WPFormsがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかをご覧ください。

ハムザ・シャヒド

ハムザはWP Mail SMTPのライターであり、デジタルマーケティング、サイバーセキュリティ、WordPressプラグイン、ERPシステムに関連するトピックも専門としています。もっと詳しく

無料のWP Mail SMTPプラグインをお試しください

お気に入りのSMTPプロバイダーを使用して、WordPressのメールを確実に送信してください。