Ultimate Elementorお問い合わせフォームガイド

すべての Web 所有者は、顧客や見込み客と良好で長期的な関係を築きたいと考えています。 そこでお問い合わせフォームの出番です。 お問い合わせフォームをサイトに追加することを強くお勧めします。

間違いなく、WordPress ユーザーは大量のコンタクト フォーム プラグインと多数の機能にアクセスできます。 これにより、ユーザーはフォームを簡単かつシームレスに作成できます。 Elementor Contact Form ウィジェットを使用してフォームを作成できるとしたら?

Elementor を使用してお問い合わせフォームを作成する方法

Elementor お問い合わせフォーム ウィジェットを使用すると、お問い合わせフォーム タイプをパーソナライズして、数分でサイトに追加できます。 サイトとのシームレスなやり取りを可能にするために必要なすべての機能とフィールドが付属しています。 お問い合わせフォームは、Elementor の Pro バージョンの機能であることに注意してください。

つまり、フォームを作成するには Elementor Pro にアップグレードする必要があります。 この事実を確認したので、Elementor を使用して連絡先フォームを作成する簡単な手順を見てみましょう。

Elementor を使用してお問い合わせフォームを作成するためのステップバイステップガイド

お問い合わせフォームをサイトに追加するには、2 つの方法があります。 Elementor と Elementor Pro ウィジェットの両方をインストールする必要がある有料の方法があります。 サードパーティのプラグインをインストールする必要がある無料の方法もあります。 このガイドでは、Elementor Pro に焦点を当てます。

ステップ 1: Elementor ページで利用可能な多数のウィジェットから Elementor Contact Form ウィジェットを見つけます。 お問い合わせフォームを追加するページをクリックして開きます。

ドラッグ アンド ドロップ オプションを使用すると、Elementor のページにウィジェットを簡単に追加できますが、この投稿では、Elementor Pro の Contact Form Widget を使用して連絡フォームを作成する包括的なプロセスについて説明します。

ステップ 2: Elementor 連絡フォームには、名前、電子メール、メッセージなどの基本的な領域のフィールドが事前に入力されています。 次のステップでは、既定のフォームをカスタマイズして、必要なものに合わせます。 これを行うには、フォーム設定のコンテンツ セクションに移動し、「フォーム フィールド.

フォーム名には、タイトルを付けます。 次に、フォームフィールドをクリックします。 ここでは、必要な数のフィールドを追加できます。 フィールドを作成するときに、複製および削除できます。

Text、Email、URL、Checkbox、Textarea、Tel、Select、Radio、Acceptance、Number、HTML、Hidden、Password、Honeypot、reCAPTCHA、reCAPTCHA V3 など、使用できるフィールド オプションが多数あります。 .

機能を試して、何が機能し、連絡先フォームに追加できるかを確認できます. 詳細タブでは、フォームをカスタマイズするためのより多くのオプションを調べることができます。 これもチェックして、それに固有の機能が気に入るかどうかを確認してください.

ステップ 3: 必要に応じて送信ボタンをカスタマイズしてデザインします。 サイズ、列幅、ボタンのテキスト、ボタン ID、アイコン、配置など、自分に合わせて調整およびカスタマイズできるさまざまなフィールドがあります。 これらの機能を調べて、お問い合わせフォームにスタイルとセンスを追加してください。

ステップ 4: [送信後のアクション] メニューを設定する 通常、ユーザーがサイトでフォームを送信すると、フォームが送信されたことを示すために、サイトの訪問者になんらかのフィードバックまたは応答が必要になります。 これは自動ではありません。 必要なものを取得するには、「送信後のアクション」セクションを構成する必要があります。

フォームの [送信後のアクション] セクションをクリックし、[アクションの追加] フィールドをクリックします。 Email Webhook、Discord、Popup、ActiveCampaign、GetResponse、Slack など、さまざまなオプションが表示されます。 送信後にアクションを追加するには、任意のオプションを選択します。

たとえば、[メール アクション] を選択すると、コンタクト フォームに [メール] のタブが追加されます。 お問い合わせフォームからメールを送信したユーザーに送信されるメールを設定できます。 オプションを入力し、条件を設定して、フォーム アクションをカスタマイズします。

Elementorには、探索できるアクションの多数のオプションが用意されていることに注意してください。 繰り返しますが、他のサードパーティのサービスを検討して、よりシームレスにすることができます. 探索できるサードパーティ サービスには、Hubspot、Mailchimp、Drip、Convertkit、Slack などがあります。 これらはすべて Elementor に組み込まれているため、簡単にアクセスして使用できます。

ステップ 5: このステップでは、ユーザーがフォームに入力したときに何かが発生したときに、ユーザーへのメッセージをカスタマイズできます。 たとえば、フォームの送信に成功した場合やエラーが発生した場合は、メッセージを受け取る必要があります。

これを設定するには、[追加オプション] をクリックし、[カスタム メッセージ] で [はい] または [いいえ] を選択します。 デフォルトの 4 つのメッセージを、ユーザーに表示する内容に編集します。 これらのメッセージは、成功メッセージ、エラー メッセージ、必須メッセージ、および無効メッセージです。

ステップ 6: Elementor お問い合わせフォームのスタイルを設定してカスタマイズし、ユニークで退屈にならないようにします。 Elementor には、使用できるカスタム スタイル オプションが用意されています。 これを行うには、[スタイル] タブをクリックして、利用可能なオプションと設定を確認します。 これらのいずれかを使用して、連絡先フォームの完全なスタイルを変更できます。

ステップ 7: Elementor お問い合わせフォームの構成が完了しました。次の最終段階は、それを公開することです。 これを行うには、フォームの下部にある [更新] ボタンをクリックします。

これにより、フォームが公開され、ページがライブになり、サイト訪問者がアクセスできるようになります。 購読者からウェブサイトへのデータとリードの収集を開始できます。

結論

デザインする連絡フォームの種類によって、Elementor で使用する機能が決まります。 ただし、この投稿では、このツールを使用してフォームを作成する方法の基本を説明しました。 前述のように、Elementor の Pro バージョンでのみお問い合わせフォーム機能にアクセスできます。 ツールのプロ版を購入するには、約 49 ドルかかります。 利用可能な機能は、あなたが支払うすべてのペニーの価値があります.