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

Diviに標準搭載されているお問い合わせフォームモジュールは、簡単なメッセージのやり取りには十分です。しかし、ファイルのアップロードや支払いの受け付け、あるいは単に送信内容をWordPressの管理画面に保存しようとしたことがあるなら、その限界に直面したことがあるでしょう。

Divi 5では、条件分岐機能やスタイリングオプションの充実など、フォームモジュールに大幅な改善が加えられました。とはいえ、標準搭載のフォームには、多くのビジネスサイトに必要な主要機能が依然として欠けています。入力データの保存機能や決済処理機能はなく、スパム対策機能も限定的です。

WPFormsは、そうした課題をすべて解決するWordPress専用のフォームビルダーであり、ネイティブモジュールを通じてDiviに直接連携します。AIによるフォーム生成機能や2,100種類以上のテンプレートを備えた本格的なドラッグ＆ドロップビルダーを利用でき、作成したフォームはすべて、シンプルなドロップダウンメニューからDiviのビジュアルビルダーに直接配置できます。

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

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

以下では、DiviのフォームモジュールとWPFormsの主な違いについて解説し、プラグインのインストールからDiviページへのフォーム公開までの設定手順を順を追って説明します。

また、Diviのデザインコントロールを使ってフォームの外観をカスタマイズする方法をご紹介し、すべての設定が完了した後に作成できる、より高度なフォームの種類についても解説します。

Diviの標準搭載の問い合わせフォームではなく、なぜWPFormsを使うべきなのか

Diviの問い合わせフォームモジュールは、基本的な機能については十分にこなしてくれます。Divi 5を使用している場合、テキストフィールド、メールアドレス入力欄、ドロップダウンメニュー、条件分岐ロジックなどが利用可能です。しかし、名前、メールアドレス、メッセージの収集以上の機能が必要になると、その限界が次々と明らかになってきます。

ファイルのアップロードを受け付ける機能はなく、組み込みの決済処理機能もありません。また、フォームからの送信データは直接メールに送信されるため、WordPress内でそれらを確認したり管理したりすることはできません。ここでは、2つのオプションの違いを簡単に並べて比較します。

「名前、メールアドレス、メッセージ」というシンプルな問い合わせフォームだけで済むのであれば、Diviのモジュールだけで十分に対応できます。しかし、それ以上の複雑な機能が必要な場合でも、WPFormsなら1つのプラグインですべての要件をカバーできるため、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つの方法で開始できます。一般的な方法はテンプレートライブラリを利用することです。ここには、カテゴリ別に分類された何百もの既成フォームが用意されています。

「Simple Contact Form」を検索し、「テンプレートを使用」をクリックすると、名前、メールアドレス、コメント／メッセージのフィールドがすでに設定された、シンプルな基本フォームが表示されます。

より手っ取り早い方法は、AIフォームジェネレーターを利用することです。これを使えば、「名前、メールアドレス、電話番号、部署のドロップダウンメニュー、メッセージ入力欄を備えたお問い合わせフォームが必要」といった要件を説明するだけで、WPFormsが自動的にフォームを作成してくれます。

このAIは、フィールドの選択肢の生成にも役立ちます。「当サービスを知ったきっかけ」というドロップダウンメニューを追加する際、すべての選択肢を手入力するのが面倒な場合は、AI Choicesが編集可能な適切なリストを生成してくれます。

フィールドの設定が完了したら、ドラッグ＆ドロップビルダーを使って、すべての要素を視覚的に再配置、名前変更、設定を行うことができます。フィールドを必須項目に設定したり、プレースホルダーテキストを追加したり、フィールドのサイズを調整したり、条件分岐ロジックを使って訪問者の選択内容に応じてフィールドを表示・非表示にしたりすることが可能です。

フィールドの設定が完了したら、「設定」タブをクリックして、フォームの通知を設定してください。ここでは、送信されたデータを受け取るメールアドレスや、通知メールの表示形式などを設定できます。

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

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

送信したフォームの送信内容が受信トレイに表示されないことがある場合、その原因はほぼ間違いなくこれです。WP Mail SMTPプラグインは、認証済みのSMTPサーバーを経由してメールを送信することで、この問題を解決します。

フォームを公開する前に設定しておくことをお勧めします。公開後にメールが届かない問題のトラブルシューティングをするのは、とても面倒だからです。設定に問題がなければ、右上の「保存」をクリックしてください。

ステップ3：Divi Builderを開く

新しいコンタクトページ（またはコンタクトフォームを設置したいページ）を作成したら、「Edit With The Divi Builder」ボタンをクリックして、Divi WordPressページクリエーターを起動します。

既存のページの場合は、表示が少し異なるかもしれません。その場合は、「Divi Builderを使用」をクリックするだけで起動できます。どちらの方法でも、同じビジュアルエディタが開きます。

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

ステップ4: Diviのコンタクトフォームページレイアウトを選ぶ

ビルダーが読み込まれたら、「Start Building」をクリックして空白のキャンバスを開きます。Diviは、最初のセクションの行レイアウトを選択するよう促します。ここでは、1列の行レイアウトを選ぶことをお勧めします。

これにより、お問い合わせフォームが画面全体に表示され、訪問者の注意が他のコンテンツと競合することなく、フォームへの入力に集中できるようになります。

次に、空白のページが表示されます。ここがあなたのスペースです！そして、Diviページをどのように見せるか、WPFormsのコンタクトフォームをどこに設置するかを決める場所でもあります。

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

こうすることで、その行にはお問い合わせフォームだけが配置されるため、目立ちやすくなり、多くの人が入力してくれるようになります。さあ、行の設定で最初のオプション（1行のみ）を選択してください。

さて、モジュールを挿入するように招待されます。次に素晴らしいWPFormsフォームを入れましょう。

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

WPFormsにはDiviとの連携機能とお問い合わせフォームモジュールが標準で備わっているため、この手順はとっても簡単です！追加するには、検索ボックスで「WPForms」と検索し、表示されたモジュールを選択してください。

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

フォームのタイトルや説明文の表示・非表示を切り替えることもできますが、ページの見栄えをすっきりさせるために、多くの人はこれらを非表示にしています。

フォームはページ上に即座に表示されるため、公開前にレイアウトへの表示状態を正確に確認できます。問題がなければ、緑色のチェックマークをクリックしてモジュールを保存してください。

よくできました。お問い合わせフォームが埋め込まれ、準備が整いました。あとは、Diviで他のページを公開するのと同じ手順で公開できます。ページビルダーの下部にある3つのドットをクリックすると、Diviの追加設定が表示されます。

次に、「公開」ボタンを選択して、実際に表示されるか確認してください。これでDiviの問い合わせフォームが公開されました。送信されたデータは、通知メールと「WPForms」＞「エントリー」ダッシュボードの両方に反映されます。

ここでは、WordPress内からすべての投稿を閲覧、検索、お気に入り登録、エクスポート、管理することができます。これだけでも、投稿をメールに送信した後はそれっきりになってしまうDiviの標準フォームに比べ、大幅な機能向上と言えます。

お問い合わせフォームの枠を超えて

WPFormsのDiviモジュールは、お問い合わせフォームだけでなく、作成するあらゆる種類のフォームに対応しています。プラグインをインストールしてDiviでモジュールが利用可能になったら、Diviユーザーが設定しがちな、特に人気のあるフォームの種類をいくつかご紹介します。

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

どのフォームからでも、Stripe、PayPal Commerce、またはSquareを使って直接支払いを受け付けることができます。フリーランサーがプロジェクトの着手金回収に、また中小企業が数量選択機能やクーポンコード付きのシンプルな注文フォームに、この機能を活用している例を目にしてきました。サービス業向けにDiviサイトを活用しているなら、これは最も実用的なアップグレードの一つと言えるでしょう。

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

WPFormsには、ドラッグ＆ドロップ式のファイルアップロード入力フィールドが搭載されており、複数のファイル形式のサポート、ライブカメラ撮影、サイズ制限の設定、およびGoogle DriveやDropboxへの自動クラウドストレージ同期機能を備えています。

Diviに標準搭載されているフォームにはファイルアップロード機能が一切ないため、これがDiviユーザーが別途フォームプラグインを探すことになる最も一般的な理由の一つとなっています。

複数ステップのリードフォーム

1ページに12個もの入力項目がある長いフォームは、途中で放棄されがちです。多段階フォームを使えば、これらの項目を複数のページに分割し、進捗バーを表示することで、訪問者が一度に処理しやすい範囲のセクションだけを見られるようにできます。

設定の詳細を知りたい方のために、改ページ、進捗インジケーター、条件付きページロジックを備えた多段階フォームの作成方法に関する完全ガイドを作成しました。

アンケートおよびご意見・ご感想フォーム

WPForms Proには、NPSスコアリング、リッカート尺度フィールド、および各回答を視覚的に分析できるインタラクティブなアンケートレポート機能が搭載されています。

Diviで構築されたサイトで顧客のフィードバックを収集したり、満足度調査を実施したり、市場調査を行ったりする場合、これを使えば、別途調査ツールを用意する必要がまったくなくなります。

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

WPFormsとDiviは、WordPressのフォーム作成においてよく使われる組み合わせです。ここでは、これらを併用する際によく寄せられる質問への回答をご紹介します。

WPFormsはDivi 5に対応していますか？

はい。WPFormsには、Divi 4とDivi 5の両方に対応したネイティブのDiviモジュールが用意されています。Diviのモジュールライブラリで「WPForms」を検索し、ドロップダウンからフォームを選択するだけで、ビジュアルビルダーに直接埋め込まれます。Divi 5との互換性のために追加の設定は一切必要ありません。

WPFormsはDiviで無料で使えますか？

WPForms Liteは完全に無料で、ドラッグ＆ドロップビルダー、AIフォームジェネレーター、AI Choices、基本的なStripe決済機能、そしてDiviモジュールとの完全な統合機能が含まれています。

費用は一切かからずに、実際に機能するお問い合わせフォームを作成・埋め込むことができます。ファイルのアップロード、条件分岐、入力内容の管理、複数ページにわたるフォームといった高度な機能をご利用いただく場合は、有料プランが年間49.50ドルからご利用いただけます。

Diviの問い合わせフォームからメールが送信されないのはなぜですか？

WordPressはデフォルトでPHPの組み込みメール関数を利用していますが、多くのホスティングプロバイダーは、この機能をブロックしたり、送信速度を制限したり、あるいは受信側のスパムフィルターをトリガーしてしまうサーバーを経由させたりしています。

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

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

Diviのお問い合わせフォームが公開されたので、サイト上での表示を微調整したいと思うかもしれません。フォームのデザインをDiviテーマの色、フォント、余白に合わせるためのヒントについては、WordPressでお問い合わせフォームのスタイルを設定する方法に関するガイドをご覧ください。

お問い合わせフォームを専用のページではなく、オーバーレイとして表示させたい場合は、WordPressでお問い合わせフォームのポップアップを作成する方法をご紹介します。これにより、ページをすっきりとした状態に保ちつつ、サイト内のどのページからでもボタンやリンクをクリックするだけでフォームにアクセスできるようになります。

今すぐDiviの問い合わせフォームを作成しましょう

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

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