Divi プラグインのハイライト: Divi お問い合わせフォーム ヘルパー

公開: 2023-04-17

Divi Contact Form Helper は、Divi と連携して組み込みの連絡フォーム システムの機能を拡張するプラグインです。 連絡先フォーム モジュールに設定を追加し、フォーム エントリを管理できる WordPress ダッシュボードにインターフェイスを追加し、Divi テーマ オプションに追加設定を追加します。 このプラグインは、新しいデザインとカスタマイズ オプションに加えて、日付ピッカー、ファイル アップロード フィールド、データベースへの送信を保存する機能などの新機能を追加します。

このプラグインのハイライトでは、Divi Contact Form Helper の機能と設定を見て、それが適切な製品であるかどうかを判断するのに役立ちます.

始めましょう!

目次
  • 1 Diviコンタクトフォームヘルパーのインストール
  • 2 Divi お問い合わせフォーム ヘルパー
    • 2.1お問い合わせフォームモジュール
    • 2.2ダッシュボード
    • 2.3テーマのオプション
  • 3 Divi コンタクトフォームヘルパーの例
    • 3.1例 1
    • 3.2例 2
  • 4 Diviお問い合わせフォームヘルパーを購入する
  • 5最終的な考え

Diviコンタクトフォームヘルパーのインストール

他の WordPress プラグインと同じように、Divi Contact Form Helper をインストールできます。 WordPress ダッシュボードでプラグイン ページを開き、[新規追加] をクリックします。 上部にある [プラグインのアップロード] をクリックし、コンピューターから .zip プラグイン ファイルを選択します。

Divi プラグイン ハイライト Divi コンタクトフォームヘルパー インストール

プラグインをインストールしたら、プラグインを有効化します。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー アクティベート

ディビお問い合わせフォームヘルパー

Divi コンタクト フォーム ヘルパーは、Divi の既存のコンタクト フォーム モジュールの拡張機能です。 ファイルのアップロード、フィールド テキスト オプション、提出物をデータベースに保存する機能、日時ピッカー、追加のデザイン設定などの機能が追加されます。 プラグイン設定は、コンタクト フォーム モジュール、新しい WordPress ダッシュボード ページ、および追加の Divi テーマ オプション設定に分散されています。 これらすべての設定を見て、このプラグインで何ができるかを理解してください。

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

このプラグインのハイライトを見ていくと、Divi Builder Contact Form Helper 設定を使用して行われた変更は、Visual Builder に自動的に表示されないことに注意してください。 加えられた変更を表示するには、ページを新しいタブで開き、更新してデザインを更新する必要があります。

新しいお問い合わせフォーム モジュールの設定にアクセスするには、Divi Builder のページに新しいお問い合わせフォームを追加します。

DiviプラグインハイライトDiviコンタクトフォームヘルパー挿入モジュール

フィールド内容の設定

次の設定は、コンタクト フォーム モジュールの個々のフィールド設定のコンテンツ タブ内にあります。

テキスト設定

[テキスト設定] タブでは、フィールド ラベルの表示と非表示、プレースホルダーの表示と非表示、カスタム プレースホルダー テキストの入力、カスタム説明テキストの入力、説明の場所の選択を行うことができます。

DiviプラグインハイライトDiviコンタクトフォームヘルパーフィールド設定

これがフロントエンドでの結果です。 この例では、ラベル、プレースホルダー、および説明を [名前] フィールドに追加しました。

Divi プラグイン ハイライト Divi コンタクトフォーム ヘルパー フィールドラベル

フィールド オプションの設定

次に、[フィールド オプション] 設定を見つけることができます。 設定は、選択したフィールドのタイプによって異なります。

テキストエリア タイプが選択されている場合、メッセージの最小長と最大長を設定し、許可される記号を選択し、テキスト エリアの最小高さを変更するオプションがあります。

DiviプラグインハイライトDiviコンタクトフォームヘルパーテキストエリアの長さ

各フィールド タイプには、アイコンを追加して色を変更するオプションもあります。

Diviプラグインは、Diviコンタクトフォームヘルパーフィールドアイコンを強調表示します

これは、メッセージ フィールド内のフロント エンドのアイコンです。

Divi プラグインは、Divi コンタクト フォーム ヘルパー フィールド Icon-2 を強調表示します

Select Dropdown フィールド タイプを選択すると、ドロップダウン検索を使用するオプションが表示されます。

Divi プラグイン ハイライト Divi コンタクトフォームヘルパー ドロップダウン検索

これがフロントエンドのドロップダウン検索です。 ドロップダウンの結果は、上の検索バーに入力するとフィルタリングされます。

DiviプラグインハイライトDiviコンタクトフォームヘルパーオプション検索

[チェックボックス] フィールド オプションが選択されている場合、[列] または [インライン] の 2 つのレイアウト オプションが表示されます。 列が選択されている場合は、列の数を設定できます (最大 4 列)。

Divi プラグイン ハイライト Divi コンタクトフォームヘルパー チェックボックス列

以下は、3 つの列とアイコンを含む列のレイアウトです。

Divi プラグイン ハイライト Divi コンタクト フォーム ヘルパー チェックボックス 3 列

そして、これが別のインライン レイアウトです。

DiviプラグインハイライトDiviコンタクトフォームヘルパーインライン

ラジオ ボタン フィールドのレイアウトには、列またはインライン レイアウトのオプションもあり、最大 4 つの異なる列のオプションがあります。

Divi プラグイン ハイライト Divi コンタクト フォーム ヘルパー ラジオ カラム

これは、2 列の列レイアウトです。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー ラジオ 2 列

そして、これがインラインレイアウトです。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー インライン ラジオ

ファイルアップロード設定

ファイルのアップロード設定にアクセスするには、最初に [フィールド オプション] 設定で [フィールド タイプ] を [入力フィールド] に設定する必要があります。 次に、ファイルのアップロード設定が表示されます。

Divi プラグインは、Divi お問い合わせフォーム ヘルパーの入力フィールドを強調表示します

[ファイル アップロード設定] タブで、ボタンを選択して、フィールドをファイル アップロード フィールドとして使用できるようにします。

DiviプラグインハイライトDiviコンタクトフォームヘルパーファイルのアップロード

有効にすると、最大アップロード ファイル サイズ、最大ファイル数、許可するファイル タイプを設定できます。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー ファイル アップロードの最大数

日時設定

日付/時刻の設定は、フィールド タイプが入力フィールドに設定されている場合にのみ表示されます。 ボタンを切り替えて、入力フィールドを日付/時刻ピッカーとして使用します。

Divi プラグイン ハイライト Divi コンタクトフォームヘルパー 日時 有効化

このオプションを有効にすると、3 つの設定タブが表示されます。 [全般] タブでは、タイプ (日付と時刻のピッカー、日付のピッカー、または時刻のピッカー)、日付/時刻の形式を設定し、ピッカーをインラインで表示するように選択し、現在の日付/時刻で入力を設定し、言語を変更できます。 、またはロケールの方向を RTL に変更します。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー 日時ピッカー

日付設定タブでは、カスタムの日付形式を設定し、週の開始日を設定し、無効にする曜日を選択し、週を無効にすることができます。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー 日付設定 1

また、過去の日付を無効にしたり、現在の日付を無効にしたり、固定または相対的な最小日付を設定したり、固定または相対的な最大日付タイプを設定したり、利用可能な日付と利用できない日付を設定したりすることもできます。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー 日付設定 2

[時間] タブでは、カスタムの時間形式、最小時間と最大時間、使用可能時間と使用不可時間、時間ステップ間隔を設定できます。

これは、フロントエンドの日付/時刻ピッカーです。

Divi プラグイン ハイライト Divi コンタクトフォームヘルパー 日時ピッカー フロントエンド

フォーム コンテンツの設定

次の設定は、お問い合わせフォーム設定のコンテンツ タブにあります。

管理者のメール設定

管理者の電子メール設定では、管理者向けのカスタム メッセージを入力し、リッチ テキストを使用して管理者メッセージをフォーマットできます。 これらの設定を使用して、管理者の電子メールを追加したり、カスタム ロジックで条件付きの電子メール アドレス ルーティングを有効にしたりできます (心配しないでください。プラグインの作成者には、これを設定するのに役立つドキュメントがあります!)。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー 管理者のメールが有効

さらに、管理者の電子メールの件名、電子メール アドレス CC、および電子メール アドレス BCC を設定できます。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー 管理者メール

確認メールの設定

確認メールの設定もカスタマイズできます。 確認メールの送信を有効にし、カスタムの件名を入力し、カスタム メッセージを入力できます。 メッセージに使用するリッチ テキスト形式を有効にすることもできます。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー 確認メール

提出エントリー

送信エントリの設定では、データベースへのエントリの保存、ファイルのアップロードのデータベースへの保存、電子メールの添付ファイルとしてのファイルのアップロードの送信、ユーザー エージェントの詳細の収集、一意のフォーム ビューを追跡するための Cookie の使用、および追加されるカスタム メッセージの変更を行うことができます。ファイル付きのメールに。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー 送信エントリ

送信ボタン

送信ボタンの設定では、送信ボタンのテキストと待機テキストを変更できます。

DiviプラグインハイライトDiviコンタクトフォームヘルパー送信ボタン

統合

Zapier と Pabbly の 2 つの統合オプションがあります。 いずれかのオプションを有効にして、メールの送信先のメールボックス アドレスを追加できます。

DiviプラグインハイライトDiviコンタクトフォームヘルパー統合

提出後の行動

送信後の動作には、カスタム成功メッセージを追加するためのスペースと、フォーム タイトルを非表示にするオプション、カスタム テキストとリンクを含む成功ボタンを表示するオプション、またはリダイレクト URL を有効にするオプションが含まれます。

Divi プラグインは、送信後に Divi コンタクトフォームヘルパーをハイライトします

これは送信後の動作で、成功メッセージを表示し、フォーム タイトルを非表示にし、成功ボタンを表示します。

Divi プラグインは、Divi お問い合わせフォーム ヘルパーの成功ボタンを強調表示します

管理ラベル

ここで、データベースに表示される独自の管理ラベル (フォーム ID) を追加できます。 データベースやその他の管理エリアに表示される一意の識別番号を追加することもできます。

Divi プラグイン ハイライト Divi コンタクトフォームヘルパー 一意の ID

デザイン設定

お問い合わせフォーム設定のデザインタブに移りましょう。 ここでもいくつかの新しい設定に気付くでしょう。

フィールド ラベル、フィールドの説明、成功メッセージ テキストの設定

フィールド ラベル テキスト設定、フィールド説明テキスト設定、および成功メッセージ テキスト設定セクションには、フォント、テキストの色、サイズ、間隔、配置など、デフォルトのフォントおよびテキスト デザインの設定がすべて含まれています。

Divi プラグインは、Divi コンタクト フォーム ヘルパー フィールド ラベル テキストを強調表示します

ここでは、名前フィールドと電子メール フィールドのラベルが表示され、フィールド ラベルのテキスト デザインがフロント エンドに表示されるようにカスタマイズされていることがわかります。

DiviプラグインハイライトDiviコンタクトフォームヘルパーラベルデザイン

成功ボタンの設定

成功ボタンの設定では、フォント、テキスト サイズ、ボタンの間隔、ボタンの色など、デフォルトのボタン デザイン設定を使用して、成功ボタンのデザインをカスタマイズできます。

DiviプラグインハイライトDiviコンタクトフォームヘルパー成功ボタン設定

これは、フロント エンドのカスタマイズされた成功ボタンです。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー カスタマイズされた成功ボタン

日付/時刻ピッカーの設定

日付/時刻ピッカーのデザイン設定の一般タブ内で、背景色、余白、パディング、境界線、および影の設定をカスタマイズできます。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー 日付 一般設定

日付タブに移動すると、日付ピッカーの幅と高さを変更し、月/年のテキスト設定、曜日のテキスト設定、カレンダーの日付のテキスト設定、現在の日付の背景とテキストの色、選択した日付をカスタマイズできます。背景とテキストの色、利用可能な日付の背景とテキストの色、および利用できない日付の背景とテキストの色。

DiviプラグインハイライトDiviコンタクトフォームヘルパーの日付設定

時間タブでは、時間ピッカーの幅と高さ、時間テキストの設定、現在の時間の背景とテキストの色、選択した日付の背景とテキストの色、利用可能な時間の背景とテキストの色、利用できない時間の背景と色をカスタマイズできます。テキストの色。

Divi プラグインは、Divi コンタクトフォームヘルパーの時間設定を強調表示します

これらすべてのカスタマイズ オプションを使用して、日付/時刻ピッカーの外観を完全にカスタマイズできます。 これは、カスタマイズされたデザイン設定を備えたフロントエンドの日付/時刻ピッカーです。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー 日時ピッカー カスタマイズ

送信ボタン

送信ボタン セクションの下に 2 つの新しい設定が表示されます。 ボタンの配置を変更して、ボタンを全幅にすることができます。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー ボタンの配置 全幅

これがフロントエンドの全幅ボタンです。

Divi プラグイン ハイライト Divi コンタクトフォームヘルパー 全幅ボタン

国境

ここでは、色、スタイル、半径、幅、およびスタイル設定を使用してフォーカス入力境界線をスタイルできます。 この境界線は、選択すると個々のフィールドの周りに表示されます。

Divi プラグイン ハイライト Divi コンタクトフォームヘルパー 入力フォーカスボーダー

これは、名前フィールドを強調表示するフォーカス入力境界です。

Divi プラグイン ハイライト Divi コンタクト フォーム ヘルパー 入力 フォーカス ボーダー 名前 フィールド

ダッシュボード

新しいお問い合わせフォーム モジュールの設定について説明したので、WordPress ダッシュボードの [お問い合わせフォーム] ページを見てみましょう。

エントリー

受信したすべてのフォーム送信は、エントリ ページで確認できます。 エントリごとに、エントリ番号、電子メール アドレス、その読み取りステータス (エントリを読んだユーザーと読み取られた正確な日時を含む)、フォーム ID、日付、および IP が表示されます。 エントリ ページは、一番上で未読と既読で並べ替えることができます。 エントリに対して一括アクションを使用して、月ごとまたは特定のフォームごとにテーブルをフィルター処理することもできます。 最後に、上部のボタンを使用してエントリの CSV をエクスポートし、検索バーでエントリを検索できます。

Diviプラグインは、Diviコンタクトフォームヘルパーエントリを強調表示します

個々のエントリをクリックして表示すると、エントリの詳細セクションにフィールドの内容が表示されます。 この下には同じユーザーによる他のエントリがあり、非常に便利な機能です。 右側には、ゴミ箱と削除ボタン、メールの返信/送信ボタン、メール テンプレートの作成ボタン、投稿の作成ボタンがあります。 以下は、送信者 ID、送信者、連絡フォーム ID、ページ、リファラー URL、日付などのメタ詳細であり、その後にユーザー エージェントの詳細が続きます。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー フォーム エントリの詳細

メールを送る

電子メールの送信ボタンを選択すると、このインターフェイスが表示されます。 電子メールの送信者アドレス、電子メールの件名、返信先電子メール アドレス、およびメッセージを追加できます。 メッセージに記載されている電子メール データ タグも使用できます。

Divi プラグイン ハイライト Divi コンタクトフォームヘルパー メール送信

テンプレートを作成

メール テンプレートを作成して、エントリにすばやく応答することもできます。 テンプレートの種類、テンプレート名を設定し、連絡先フォームを選択し、アドレスからの電子メール、電子メールの件名、および電子メール メッセージを設定できます。

Divi プラグイン ハイライト Divi コンタクトフォームヘルパー テンプレートの作成

投稿を作成

投稿の作成オプションを使用すると、連絡先フォームのフィールドをマッピングして、新しいブログ投稿またはページを作成できます。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー 投稿の作成

CSV をエクスポート

CSV エクスポート ページでは、CSV ファイル名を変更したり、連絡先フォームを選択したり、エクスポートに含めるエントリの種類を選択したりできます。

Divi プラグイン ハイライト Divi コンタクトフォームヘルパー CSV のエクスポート

フォーム

フォーム ページから、エントリ、ビュー、ユニーク ビュー、コンバージョン率、ユニーク コンバージョン率、最後のエントリ、およびエントリの表示、CSV のエクスポート、表示へのリンクなどの情報を含む、サイト上のすべてのフォームのリストを表示できます。フォーム。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー お問い合わせフォーム

テーマ オプション

それでは、WordPressダッシュボード内のDiviテーマオプションに移動しましょう. ここに、Divi Contact Form Helper というタイトルの新しいタブが表示されます。

一般設定

一般設定では、コンタクトフォーム統計の有効化、送信メールログの有効化、クローンログの有効化、アンインストール時のプラグインデータの削除の選択、許可された MIME タイプの編集を行うことができます。

Divi プラグイン ハイライト Divi コンタクト フォーム ヘルパー テーマ オプション 一般設定

SMTP 設定

SMTP 設定タブには、SMTP 設定を有効にするボタンがあります。 有効にすると、SMTP ホスト、電子メールからの SMTP、名前からの SMTP、暗号化、SMTP ポート、自動 TLS、および認証の設定が表示されます。 SMTP 統合も機能しているかどうかを確認するボタンがあります。

Divi プラグインは、Divi コンタクトフォームヘルパーの SMTP 設定を強調表示します

自動バックアップ設定

Divi Contact Form Helper には、有効にできる自動バックアップ設定が付属しています。 この機能を有効にし、バックアップ メール アドレスを追加し、バックアップ スケジュールを設定できます。

DiviプラグインハイライトDiviコンタクトフォームヘルパー自動バックアップ

カスタム ラベル テキスト

最後に、ここで連絡先フォームのラベル テキストをカスタマイズできます。

Divi プラグイン ハイライト Divi お問い合わせフォーム ヘルパー カスタム ラベル テキスト

Divi コンタクトフォームヘルパーの例

例 1

最初の例は、名前フィールド、電子メール アドレス フィールド、日付ピッカー、およびメッセージ フィールドを備えています。 全幅ボタン付きの青色の配色が特徴です。

Divi プラグイン ハイライト Divi コンタクト フォーム ヘルパーの例 1

例 2

2 番目の例は、緑色の配色で、同じ名前、電子メール アドレス、日付ピッカー、およびメッセージ フィールドと、ラジオ選択フィールドおよびファイル アップロード フィールドを備えています。

Divi プラグイン ハイライト Divi コンタクト フォーム ヘルパーの例 2

Divi お問い合わせフォーム ヘルパーを購入する

Divi Contact Form Helper は、Divi Marketplace で入手できます。 無制限の Web サイト使用と 1 年間のサポートと更新には 25 ドルかかります。 価格には、30日間の返金保証も含まれています.

ディビコンタクトフォームヘルパーレビュー

最終的な考え

Divi Contact Form Helper は、Divi Contact Form モジュールにいくつかの主要な機能を追加します。 このプラグインの追加のデザイン オプションにより、お問い合わせフォームのあらゆる側面を完全にカスタマイズし、独自のデザインを作成できます。 また、Divi Contact Form Helper が追加する機能のおかげで、ファイルを受け入れたり、イベントをスケジュールしたりすることもできます。 エントリ インターフェイスは便利で、メッセージに簡単に返信したり、WordPress ダッシュボードからエントリを追跡したりできます。 コンタクト フォームを次のレベルに引き上げたい場合、またはデフォルトのコンタクト フォームが提供できる機能を超える機能が必要な場合は、これが最適な製品になる可能性があります。

ご連絡をお待ちしております。 Divi Contact Form Helper を試しましたか? コメントであなたの考えを教えてください!