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

Diviの組み込みの連絡フォームモジュールは、簡単なメッセージには十分です。しかし、ファイルのアップロードを追加したり、支払いを受け取ったり、WordPressダッシュボードに送信を保存したりしようとすると、その制限に気づいたかもしれません。

Divi 5では、条件付きロジックやより優れたスタイリングオプションなど、フォームモジュールに実際の改善がもたらされました。とはいえ、組み込みフォームには、ほとんどのビジネスウェブサイトが必要とする主要な機能がまだ不足しています。エントリーストレージ、支払い処理がなく、スパム保護機能さえも限定的です。

WPFormsは、これらのギャップをすべて埋め、ネイティブモジュールを介してDiviに直接接続する専用のWordPressフォームビルダーです。AIフォーム生成機能、2,100以上のテンプレートを備えた実際のドラッグアンドドロップビルダーを利用でき、作成したすべてのフォームは簡単なドロップダウンからDiviビジュアルビルダーに直接ドロップされます。

WPFormsでDiviの問い合わせフォームを作成しましょう！ 🙂

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

以下では、DiviのフォームモジュールとWPFormsの主な違いを説明し、プラグインのインストールからDiviページでのフォームの公開までの完全なセットアップを説明します。

また、Diviのデザインコントロールを使用してフォームの外観をカスタマイズする方法と、すべてが接続された後に構築できる高度なフォームタイプをいくつか紹介します。

Diviの組み込み問い合わせフォームではなくWPFormsを使用する理由

Diviの問い合わせフォームモジュールは、基本的な機能は十分に処理します。テキストフィールド、メールフィールド、ドロップダウン、および条件付きロジック（Divi 5の場合）が利用できます。しかし、名前、メール、メッセージを収集する以上のことを必要とするようになると、制限が積み重なり始めます。

ファイルアップロードを受け付ける方法はなく、組み込みの支払い処理もなく、フォームの送信はWordPress内で表示または管理する方法なしに直接メールに送信されます。両方のオプションがどのように異なるかを示す簡単なサイドバイサイド比較を以下に示します。

シンプルな「名前、メール、メッセージ」の問い合わせフォームだけが必要な場合、Diviのモジュールはそれ自体で十分に対応できます。しかし、それ以上に複雑なものについては、WPFormsは3つまたは4つの追加モジュールを接続する必要なく、単一のプラグインでそれらのギャップをすべてカバーします。

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

WPFormsは、WordPress専用に作られたドラッグアンドドロップのフォームビルダーです。問い合わせフォームや支払いフォームから、アンケート、登録フォーム、計算フォームまで、あらゆるものをカバーする2,100以上のフォームテンプレートが付属しています。

Diviサイト向けのWPFormsで最も気に入っている点は、ネイティブモジュールとの統合です。DiviとElementorサイトの両方でフォームを設定しましたが、Diviモジュールは本当にスムーズな体験を提供します。

基本的なお問い合わせフォームであれば、WPForms Lite（無料版）で始められます。ファイルアップロード、条件付きロジック、またはエントリー保存が必要な場合は、Proプランをご利用ください。

開始するには、Proライセンスを購入してください。次に、ウェブサイトにWPFormsをインストールします。ヘルプが必要な場合は、WordPressにプラグインを追加する方法の手順に従ってください。

今すぐWPForms Proにアップグレード！:)

ステップ2：Diviの問い合わせフォームを作成する

WPFormsを有効にした状態で、WPForms » 新規追加にアクセスして最初のフォームを作成します。ここから始めるには2つの方法があります。従来のルートはテンプレートライブラリで、カテゴリ別に整理された何百もの既製フォームが読み込まれます。

「シンプルな連絡フォーム」を検索し、テンプレートを使用をクリックすると、名前、メール、コメント/メッセージフィールドがすでに配置されたクリーンな開始点が得られます。

より高速なオプションは、AIフォームジェネレーターです。これにより、「名前、メール、電話、部署用のドロップダウン、メッセージフィールドを備えた連絡フォームが必要です」のように、フォームに何をさせたいかを説明すると、WPFormsがそれを構築してくれます。

AI は、フィールドの選択肢を埋めるのにも役立ちます。「どこで当社のことを知りましたか？」というドロップダウンを追加し、すべての選択肢を入力するのが面倒な場合は、AI Choices が関連性の高いリストを生成してくれるので、編集できます。

フィールドを配置したら、ドラッグアンドドロップビルダーを使用して、すべてを視覚的に並べ替え、名前を変更し、設定できます。フィールドを必須にしたり、プレースホルダーテキストを追加したり、フィールドサイズを調整したり、訪問者が選択したものに基づいてフィールドを表示または非表示にする条件付きロジックを使用したりできます。

フィールドの準備ができたら、設定タブをクリックして、フォーム通知を設定します。これにより、どのメールアドレスが送信を受信するか、通知メールの外観が制御されます。

公開する前にこれらの設定を確認するのに少し時間をかけてください。デフォルトではWordPress管理者のメールに通知が送信されますが、それは適切な受信トレイではない可能性があります。

WordPressのメール配信に関して注意すべき点が1つあります。WordPressはデフォルトでPHPの組み込みメール機能を使用しますが、多くのホスティングプロバイダーはそれをブロックまたはスロットルします。

受信トレイに表示されなかったフォーム送信があった場合、それはほぼ間違いなくその原因です。WP Mail SMTPプラグインは、認証済みSMTPサーバー経由でメールをルーティングすることにより、これを修正します。

後から欠落したメールのトラブルシューティングを行うのはイライラするので、フォームを公開する前に設定することをお勧めします。すべてがうまくいったら、右上隅にある保存をクリックしてください。

ステップ3：Diviビルダーを開く

新しいお問い合わせページ（またはお問い合わせフォームを配置したい任意のページ）を作成したら、Diviビルダーで編集ボタンをクリックして、Divi WordPressページクリエーターを起動します。

既存のページの場合、少し異なる場合があります。その場合は、単にDiviビルダーを使用をクリックして起動します。どちらでも同じビジュアルエディターに入ることができます。

ビルダーが開いたら、ページのレイアウトについて尋ねられます。

ステップ4：Diviの問い合わせフォームページのレイアウトを選択する

ビルダーが読み込まれたら、構築を開始をクリックして空白のキャンバスを開きます。Diviは、最初のセクションの行レイアウトを選択するように求めます。ここではシングルカラムの行を選択することをお勧めします。

連絡フォームを全幅表示にし、訪問者の注意を他のコンテンツに分散させるのではなく、フォームの入力に集中させます。

次に、空白のページが表示されます。ここが作成スペースです！そして、Diviページのレイアウトをどのようにしたいか、WPFormsの連絡フォームをどこに配置したいかをここで決定します。

行（rows）を使用して、Diviページに追加したいレイアウトの種類を尋ねるポップアップが表示されます。この記事では、最初の選択肢を選びましょう。

これにより、連絡フォームはその行の唯一の「オブジェクト」となり、多くの注目を集め、人々が入力するようになります。行のために最初のオプション（単一行）を選択してください。

次に、モジュールを挿入するように求められます。次に、素晴らしいWPFormsフォームをそこに配置しましょう。

ステップ5：WPForms Diviモジュールを挿入する

WPFormsには独自のDivi統合と連絡フォームモジュールがあるため、この手順は非常に簡単です！追加するには、検索ボックスで**WPForms**を検索し、表示されたモジュールを選択します。

「**コンテンツ**」タブで、「**フォーム**」ドロップダウンから連絡フォームを選択します。これは、WPFormsで作成したすべてのフォームを一覧表示します。

フォームのタイトルと説明をオンまたはオフにすることもできますが、ほとんどの人はページをすっきりさせるためにオフにします。

フォームはすぐにページにレンダリングされるため、公開する前にレイアウトにどのように適合するかを正確に確認できます。すべて問題がなければ、緑色のチェックマークをクリックしてモジュールを保存します。

よくできました。連絡フォームが埋め込まれ、準備ができました。次に、Diviでページを公開するのと同じ方法で公開できます。ページビルダーの下部にある3つのドットをクリックして、追加のDivi設定を表示します。

次に、「**公開**」ボタンを選択してライブで表示します。Divi連絡フォームが公開されました。送信は、通知メールと**WPForms » Entries**ダッシュボードの両方に流れ込みます。

ここで、WordPress内からすべての送信を表示、検索、スター付け、エクスポート、管理できます。これだけでも、メールに送信されて消えてしまうDiviの組み込みフォームよりも大幅なアップグレードです。

問い合わせフォームを超える

WPForms Diviモジュールは、連絡フォームだけでなく、作成するすべてのフォームタイプで機能します。プラグインがインストールされ、モジュールがDiviで利用可能になったら、Diviユーザーが設定する傾向がある人気のあるフォームタイプのいくつかを次に示します。

支払いおよび注文フォーム

Stripe、PayPal Commerce、またはSquareを使用して、任意のフォームから直接支払いを受け入れることができます。フリーランサーがプロジェクトの頭金収集に使用したり、小規模ビジネスが数量セレクターやクーポンコード付きの簡単な注文フォームに使用したりするのを見てきました。サービスビジネス向けのDiviサイトを運営している場合、これは最も実用的なアップグレードの1つです。

ファイルアップロードフォーム

WPFormsには、複数のファイルタイプ、ライブカメラキャプチャ、設定可能なサイズ制限、Google DriveまたはDropboxへの自動クラウドストレージ同期をサポートするドラッグアンドドロップのファイルアップロードフォームフィールドが含まれています。

Diviの標準フォームにはファイルアップロード機能が全くありません。これが、Diviユーザーがまず別のフォームプラグインを探し始める最も一般的な理由の1つです。

マルチステップリードフォーム

1ページに12個ものフィールドがある長いフォームは、放棄されがちです。マルチステップフォームを使用すると、それらのフィールドを複数のページに分割し、プログレスバーを表示できるため、訪問者は一度に1つの管理しやすいセクションを見ることができます。

ページ分割、進捗インジケーター、条件付きページロジックを備えたマルチステップフォームの作成方法に関する完全なガイドを作成しました。設定について詳しく知りたい場合は、そちらをご覧ください。

アンケートおよびフィードバックフォーム

WPForms Proには、NPSスコアリング、リッカート尺度フィールド、およびインタラクティブなアンケートレポートが含まれており、すべての回答の視覚的な内訳を提供します。

Divi搭載サイトで顧客からのフィードバックを収集したり、満足度調査を実施したり、市場調査を行ったりする場合、これは別の調査ツールの必要性を完全に置き換えます。

Diviコンタクトフォームに関するよくある質問

WPFormsとDiviは、WordPressフォームを構築するための一般的な組み合わせです。ここでは、それらを一緒に使用することについて最も頻繁に寄せられる質問への回答を紹介します。

WPFormsはDivi 5で動作しますか？

はい。WPFormsにはネイティブのDiviモジュールがあり、Divi 4とDivi 5の両方で動作します。DiviモジュールライブラリでWPFormsを検索し、ドロップダウンからフォームを選択すると、ビジュアルビルダーに直接埋め込まれます。Divi 5の互換性に特別な設定は必要ありません。

WPFormsはDiviで無料ですか？

WPForms Liteは完全に無料で、ドラッグアンドドロップビルダー、AIフォームジェネレーター、AI選択肢、基本的なStripe支払い、および完全なDiviモジュール統合が含まれています。

無料で動作するコンタクトフォームを作成して埋め込むことができます。ファイルアップロード、条件付きロジック、エントリー管理、マルチページフォームなどの高度な機能については、有料プランは年間49.50ドルからご利用いただけます。

Diviコンタクトフォームがメールを送信しないのはなぜですか？

WordPressはデフォルトでPHPの組み込みメール関数に依存していますが、多くのホスティングプロバイダーはそれをブロックしたり、スロットルしたり、受信側のスパムフィルターをトリガーする可能性のあるサーバーを経由してルーティングしたりします。

WP Mail SMTPのようなSMTPプラグインをインストールすると、認証されたメールサーバー経由でフォームメールを送信することで、この問題が解決されます。これにより、Diviの標準フォームとWPFormsの両方の問題が解決されます。

次に、Diviフォームをさらに活用しましょう

Diviコンタクトフォームが公開されたので、サイトでの表示方法を微調整したいかもしれません。WordPressでコンタクトフォームをスタイル設定する方法に関するガイドをチェックして、フォームのデザインをDiviテーマの色、フォント、スペーシングに合わせるためのヒントを入手してください。

コンタクトフォームを専用ページに表示するのではなく、オーバーレイとして表示したい場合は、WordPressでコンタクトフォームのポップアップを作成する方法をご覧ください。これにより、ページがすっきりし、ボタンやリンクのトリガーを通じてサイトのどのページからでもフォームにアクセスできるようになります。

今すぐDiviコンタクトフォームを作成する

フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。

この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。