AI要約
WordPressウェブサイト用のDiviコンタクトフォームを簡単に作成する方法をお探しですか?
WPFormsの統合とDiviコンタクトフォームモジュールを通じて、簡単にコンタクトフォームを作成できることを知って喜んでいただけるでしょう。
このガイドでは、両方の方法の手順を説明しますので、あなたに最適なオプションを選択できます。
Diviコンタクトフォームの作成方法
WPFormsまたはDiviコンタクトフォームモジュールを使用してDiviコンタクトフォームを作成できます。両方の方法について、以下の手順に従ってください。
この記事の内容
Divi Builderでコンタクトフォームを作成する
Diviコンタクトフォームモジュールを使用すると、メール、テキスト、チェックボックス、ラジオボタン、ドロップダウンなどの入力フィールドを簡単に作成できます。
ステップ1:WordPressにDiviテーマをインストールする
まず最初に行う必要があるのは、Diviアカウントにサインアップすることです。Diviはプレミアムテーマなので、年間89ドルのサブスクリプションを購入する必要があります。

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

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

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

Diviテーマがウェブサイトにインストールされたら、有効化ボタンをクリックすると、Divi Builderを使用できるようになります。
ステップ2:ページを追加してDivi Builderをロードする
新しいページまたは投稿を作成し、WordPress投稿エディタが開くのを待ちます。Divi Builderをロードするには、紫色のDivi Builderを使用ボタンをクリックします。

これにより、ページがDivi Builderで再読み込みされ、3つのオプションが表示されます:ページを最初から構築する、既製のレイアウトを選択する、既存のページをクローンする。
Diviでコンタクトページをゼロから作成する手順を説明しているので、構築を開始ボタンをクリックします。

素晴らしい!次に、コンタクトフォームを作成するために必要なのは、Diviコンタクトフォームモジュールをロードすることです。始めましょう。
ステップ3:Diviコンタクトフォームモジュールを追加する
Divi Builderで、+(プラス)ボタンをクリックし、オプションのリストから、ニーズに合った新規行テンプレートを選択します。

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

コンタクトフォームモジュールを追加すると、名前、メール、メッセージの3つのフォームフィールドが表示されます。これでコンタクトフォームの準備ができました!
ステップ4:Diviコンタクトフォームを設定する
開始するには、Divi Builderのコンタクトフォームをクリックしてカスタマイズオプションを開きます。新規フィールド追加ボタンをクリックして、他のフォームフィールドを追加できます。

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

背景設定、スパム保護、リダイレクトリンクなどの便利なツールも見つかります。必要に応じて自由にこれらを変更してください。
WPFormsでDiviコンタクトフォームを作成する
WPFormsは、WordPress向けの最高のドラッグ&ドロップフォームビルダーであり、お問い合わせフォーム、計算フォーム、注文フォームなどを作成するために使用できます!
ステップ1:WPFormsプラグインをインストールする
WordPress向けの最高のフォームビルダープラグインとして、WPFormsはDiviと正常に統合され、フォーム作成プロセスを簡単にします。
プラグインのLiteバージョンでさえ、Diviのお問い合わせフォームモジュールと比較して非常に役立つ多くの機能が付属しています。
ただし、Proにアップグレードすると、高度なフォームフィールド、エントリー管理、ファイルアップロードなどの追加機能を利用できます!
ニーズに合ったライセンスレベルを決定したら、WPFormsプラグインをインストールしてください。手順については、WordPressプラグインのインストールに関するこのガイドを確認してください。
ステップ2:コンタクトフォームを作成する
次に、新しいフォームを作成します。WordPressダッシュボードからWPFormsに移動し、新規追加オプションをクリックします。

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

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

これで完了です!WPFormsを使用して、お問い合わせフォームを正常に作成しました。次に、通知と確認をカスタマイズしましょう。
ステップ3:通知と確認をカスタマイズする
通知を設定することで、新しいフォームのエントリーについて常に把握できます。これはフォームビルダー内にあります。設定に移動し、次に通知を選択します。

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

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

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

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

ステップ4:Diviコンタクトフォームを公開する
このお問い合わせフォームを追加するには、Diviビルダーに移動し、Diviのお問い合わせフォームモジュールで行ったように、行スタイルを選択します。

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

WPFormsモジュールが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の最高のSMTPプラグインで。メールを修正する時間がない場合は、追加購入で完全なWhite Glove Setupアシスタンスを利用でき、すべての有料プランで14日間の返金保証が付いています。
この記事がお役に立った場合は、WordPressのヒントやチュートリアルについては、FacebookとTwitterでフォローしてください。

