WordPressでDiviお問い合わせフォームを作成する方法

公開: 2022-01-20
how to create a divi contact form

WordPressサイトのDiviお問い合わせフォームを作成する簡単な方法をお探しですか?

Diviは、市場で最も人気のあるWordPressテーマの1つです。 それはあなたがフロントエンドからあなたのウェブサイトをカスタマイズすることを可能にするユーザーフレンドリーなビルダーが付属しています。 召喚状ボタン、お問い合わせフォームなどのページモジュールを追加できます。

Divi Contact Formモジュールを使用すると、サードパーティのサービスなしで連絡フォームを作成して挿入できます。 これは、サイトに基本的な連絡フォームを簡単に追加する方法が必要な場合に最適です。

ただし、ユーザー送信、メールマーケティングなどの高度な機能には、WPFormsのような強力なフォームビルダープラグインが必要です。

これが、Divi BuilderにWPFormsモジュールも付属しているため、数回クリックするだけでプロの連絡フォームを簡単に追加できます。

この投稿では、WordPressでDiviお問い合わせフォームを作成する次の2つの方法を紹介します。

  • DiviBuilderでお問い合わせフォームを作成する
  • WPFormsでDivi連絡先を作成する

DiviBuilderを使用したお問い合わせフォームの作成

まだDiviをお持ちでない場合は、まず、 Diviアカウントにサインアップする必要があります。 その後、ダッシュボードにアクセスしてテーマファイルをダウンロードできるようになります。

Divi

WordPressダッシュボードにDiviテーマをインストールしてアクティブ化したら、Diviお問い合わせフォームを追加するページまたは投稿を開きます。

投稿エディタに、[ DiviBuilderを使用]ボタンが表示されます。 ボタンをクリックして、サイトのフロントエンドでビルダーを起動します。

divi builder post editor

次の画面では、ページを最初から作成するオプション、作成済みのレイアウトを選択するオプション、または既存のページのクローンを作成するオプションが表示されます。

このチュートリアルでは、新しいページから始めて、お問い合わせフォームを追加します。

build from scratch divi

次に、ニーズに一致する行テンプレートを選択できるDiviビルダーが表示されます。

add row divi builder

行を追加すると、さまざまなタイプのコンテンツモジュールを追加できる[モジュールの挿入]パネルが表示されます。

下にスクロールすると、お問い合わせフォームモジュールがあります。 それをクリックするだけで、Diviお問い合わせフォームをサイトに挿入できます。

divi contact form module

デフォルトでは、連絡フォームは、名前、電子メール、メッセージの3つのフォームフィールドで構成されています。 [新しいフィールドの追加]ボタンをクリックして、必要に応じて他のフォームフィールドを追加できます。

divi contact form editor

さらに、テキスト設定には、タイトルの編集、成功したメッセージの送信、ボタンテキストの送信のオプションがあります。

divi form name and settings

Diviでは、電子メールメッセージを送信して、新しいフォームの送信に関する通知を受け取ることもできます。

さらに、リダイレクトリンク、スパム保護、バックグラウンド設定など、他の便利なオプションもあります。

divi contact form settings

Diviお問い合わせフォームモジュールを使用すると、WordPressサイトに簡単なお問い合わせフォームを簡単に追加できます。 ブランドのスタイルに合わせることができるように、たくさんのカスタマイズオプションがあります。

Diviお問い合わせフォームにさらに高度な機能を追加する場合は、優れたフォームビルダープラグインを使用する必要があります。

そして、それはまさに次の方法で行うことです。 最も強力なWordPressフォームビルダーであるWPFormsを使用してDivi連絡先を作成する方法を紹介します。

WPFormsを使用してDiviお問い合わせフォームを作成する

WPForms

WPFormsは、WordPress用の最高のドラッグアンドドロップフォームビルダープラグインです。 数回クリックするだけで、お問い合わせフォーム、登録フォーム、ダウンロードフォームなど、あらゆる種類のフォームを作成できます。

WPFormsには100以上のビルド済みフォームテンプレートが付属しているため、連絡フォームを最初から作成する必要はありません。 フォームフィールドを追加または削除して、必要に応じてカスタマイズできます。 また、このためのコーディングの知識も必要ありません。

WPFormsで作成するすべての連絡先フォームは100%応答するため、どの画面サイズでも美しく表示されます。 組み込みのスパム保護オプションもあるので、サイトでのスパムや詐欺フォームの送信を防ぐことができます。

500万を超えるアクティブなインストールにより、WPFormsは世界中のあらゆるタイプの企業に愛されています。 Diviユーザーで、すばらしい連絡フォームをサイトに追加したい場合は、WPFormsを使用することもできます。

WPFormsを使用してDiviコンタクトフォームを作成する必要がある理由のいくつかを次に示します。

  • 使いやすくセットアップも簡単
  • 高度なフォームの通知と確認
  • ファイルのアップロードとコンテンツの送信機能
  • ビルトインフォーム提出管理システム
  • メールリストを拡大するためのメールマーケティングの統合
  • 部分的なフォームエントリをキャプチャするためのフォーム放棄オプション
  • eコマースと支払いオプションのフォームフィールド

そして素晴らしいニュースは、DiviBuilderにWPFormsモジュールがあることです。 そのため、WPFormsを使用して作成したお問い合わせフォームをサイトに簡単に追加できます。

また、Diviの有無にかかわらず、任意のWordPressサイトでWPFormsを使用できます。 Diviの支払いをやめることにした場合でも、WPFormsで作成したフォームはサイトにそのまま残ります。

それでは、WPForms+Diviを使用して連絡フォームを作成する方法を学びましょう。

ステップ1:WPFromsプラグインをインストールしてアクティブ化する

まず、WPFormsアカウントにサインアップする必要があります。

WPFormsは、あらゆるタイプのビジネスの要件に適合するように設計された柔軟な価格プランを提供します。 あなたのビジネスに適したプランを選ぶことができます。 そして、無料で利用できるライトバージョンがあります。

サインアップすると、WPFormsダッシュボードにアクセスできるようになります。 プラグインファイルは、ライセンスと一緒に[ダウンロード]タブにあります。

WPForms license key

このプラグインファイルをWordPressサイトにインストールする必要があります。 詳細については、WordPressプラグインのインストール方法に関するガイドを確認してください。

サイトにWPFormsをインストールしてアクティブ化したら、管理ダッシュボードの[ WPForms]»[設定]タブに移動します。

ここで、ライセンスキーを入力し、[キーの確認]ボタンをクリックする必要があります。

verify wpforms license

次に、検証成功のメッセージが表示されます。 これで、WPFormsを使用して連絡フォームの作成を開始できます。

ステップ2:お問い合わせフォームを作成する

新しいフォームを作成するには、WordPressダッシュボードの[新規追加]タブに移動します。 これにより、サイトに適したお問い合わせフォームテンプレートを検索できるテンプレートライブラリが起動します。

このチュートリアルでは、 SimpleContactFormテンプレートから始めます。 このテンプレートには、名前、電子メール、メッセージなど、連絡フォームに必要なすべての基本的なフォームフィールドが含まれています。 他のテンプレートをプレビューして、どちらが自分に適しているかを確認することもできます。

お問い合わせフォームの名前を入力し、選択したフォームテンプレートの[テンプレートを使用]ボタンをクリックします。

create divi contact form in wpforms

次の画面に、WPFormのドラッグアンドドロップフォームビルダーが表示されます。 すべてのフォームフィールドは左側にあり、フォームプレビューはページの右側にあります。

数字、ドロップダウン、複数選択、ファイルのアップロード、評価、リッチテキストなど、さまざまな便利なフォームフィールドがあります。

wpforms form fields

フォームフィールドを挿入するには、フォームフィールドを左側からドラッグして、フォームプレビューに配置するだけです。

wpforms drag and drop

これらのフォームフィールドのいずれかをカスタマイズする場合は、それらをクリックすると、フィールドオプションが表示されます。 フォームフィールドに応じて、フォームラベル、説明、必須、およびその他の追加オプションを変更するオプションがあります。

add file upload to divi contact form

必要なすべてのフィールドをDiviお問い合わせフォームに追加したら、フォームビルダーの上部にある[保存]ボタンをクリックします。

次に、フォームの設定、通知、確認を設定する必要があります。

手順3:フォーム設定を構成する

フォーム設定を変更するには、フォームビルダーの左側のメニューパネルから[設定]»[全般]タブを開きます。 ここでは、フォーム名、フォームの説明、送信ボタンのテキストなどを変更できます。

サイトでスパム対策保護を有効にするオプションもあります。 これにより、お問い合わせフォームにGooglereCAPTCHAが設定されます。

general settings wpforms

[設定]»[通知]タブに移動して、Diviお問い合わせフォームの電子メール通知を設定します。 管理者のメールアドレスに送信されるデフォルトの通知があることがわかります。

複数の電子メールアドレスを追加するか、[新しい通知の追加]ボタンをクリックして、複数のフォーム通知を送信できます。

これにより、新しいフォームの送信についてあなたとあなたのチームメンバーに通知したり、顧客に送信の詳細を送信したりすることができます。

form notificaitons wpforms

これについての詳細が必要な場合は、適切なフォームの通知と確認を設定する方法に関するガイドを確認してください。

同様に、WPFormsを使用すると、ユーザーがサイトで連絡先情報を送信した後に何が起こるかを決定できます。 [設定]»[確認]タブに移動すると、確認アクションを選択するオプションが表示されます。

wpforms-confirmations

したがって、ユーザーが送信ボタンを押した後、フロントエンドにカスタムの「ありがとう」メッセージを表示できます。 または、リダイレクトオプションを選択して、ユーザーをサイトの別のページまたは外部URLに送信します。

フォームの設定が完了したら、必ず[保存]ボタンをクリックしてください。

お問い合わせフォームの準備ができたので、DiviBuilderを使用してWebサイトに挿入できます。

ステップ4:DiviにWPFormsモジュールを追加する

このお問い合わせフォームを任意のページまたは投稿に追加するには、Divi Builderを開き、Diviお問い合わせフォームモジュールの場合と同様に行レイアウトを選択します。

ここでの唯一の違いは、 WPFormsモジュールを検索する必要があることです。

divi wpforms contact form

WPFormsブロックを挿入すると、作成した連絡先フォームを選択するための設定が表示されます。 お問い合わせフォームのタイトルと説明を表示するオプションもあります。

choose wpforms contact form

Divi Builderを使用して、お問い合わせフォームのデザインとスタイルを変更することもできます。 Diviの連絡フォームの外観に満足したら、右のチェックマークボタンをクリックします。

ステップ5:Diviお問い合わせフォームを公開する

最後のステップは、お問い合わせフォームを公開することです。 これを行うには、DiviBuilderの下部にある3つのドットボタンをクリックします。

publish divi contact form

次に、ズーム、レスポンシブプレビューなどのさまざまなオプションが表示されます。 右側には、[ドラフトの保存]と[公開]の2つのボタンがあります。

[公開]ボタンをクリックして、WordPressサイトにページとお問い合わせフォームを公開します。

publish your divi contact form

これで、DiviとWPFormsを使用して連絡フォームが正常に作成されました。 Diviはお問い合わせフォームモジュールを提供していますが、ファイルのアップロード、エントリ管理、メーリングリストの統合などの機能が不足しています。

WPFormsを使用すると、これらの問題を簡単に解決できます。 ベーシックからプロフェッショナルまで、あらゆるタイプのコンタクトフォームを作成するのに役立つ機能が満載です。

WPFormsを使用すると、要件に応じて任意の目的でWordPressフォームを作成することもできます。 注文フォーム、イベント登録フォーム、サインアップフォームなどを作成できます。

今日は以上です! このチュートリアルが、WordPressでDiviお問い合わせフォームを簡単に作成する方法を学ぶのに役立つことを願っています。

WordPressフォームについてさらにサポートが必要な場合は、次のリソースを確認してください。

  • WordPressでイベント登録フォームを作成する方法
  • WordPress用の8つの最高のメールキャプチャツールとフォームビルダー
  • フォームの放棄を簡単に減らす方法

これらの投稿は、WordPressフォームにユーザーを登録し、メーリングリストを増やすのに役立ちます。 最後の1つは、フォームの放棄率を減らし、コンバージョンを改善するのに役立ちます。