AI要約
無料のElementorお問い合わせフォームを作成しますか?
お問い合わせフォームは、あらゆる種類のウェブサイトに不可欠です。フォームに必要なフィールドを含めることで、リードから必要な情報を正確に収集し、効果的なコミュニケーションを確保できます。
このチュートリアルでは、Elementorページに無料の連絡先フォームを追加する最良の方法を紹介します。このオプションは、すべてのElementorバージョンでうまく機能し、完全に「ノーコード」です!
無料のElementorお問い合わせフォームの作成方法
Elementorを使えば簡単に問い合わせページを作成できますが、それだけでは動作する問い合わせフォームを無料で提供してくれません。フォーム自体を処理するために無料のフォームプラグインと組み合わせる必要があり、セットアップ全体は最初から最後まで約5分で完了します。
2つ目のプラグインが必要な理由はコストにあります。Elementorに組み込まれているフォームウィジェットは有料版のElementor Proの背後にロックされており、無料のElementorには問い合わせフォームが全く含まれていません。
そのため、メッセージを収集するためだけにアップグレードするのではなく、WPFormsを使って無料で追加します。WPFormsはElementorのすべてのバージョンと連携します。詳細な内訳を知りたい場合は、Elementor FormsとWPFormsの比較をご覧ください。
ステップ1:WPFormsをインストールして有効化する
Elementorに問い合わせフォームを無料で追加するには、フォームプラグインと組み合わせます。私がいつも利用するのはWPFormsです。
WordPressで最も初心者向けのフォームビルダーであり、ドラッグアンドドロップビルダーは開いた瞬間に理解できます。
私が最も気に入っているのは、無料版のWPForms Liteがお問い合わせフォームには十分すぎるほど機能することです。WPForms Elementor連携により、作成したフォームをElementorページに直接ドロップできます。
まず最初に行うべきことは、WPFormsプラグインをインストールすることです。これを行うには、WordPressダッシュボードを開き、プラグイン » 新規追加に移動します。

次に、WPFormsを検索し、見つけたらインストールをクリックします。インストールには数秒しかかかりません。

それが完了すると、インストールボタンはアクティブに変わります。有効化を押して、サイトでのWPFormsの設定を完了します。とても簡単です!

素晴らしい!これでWPFormsをサイトで使用する準備ができました。最初のフォームを作成する前に、Elementorをインストールしましょう。
ステップ2:Elementor WordPressプラグインを取得する
Elementorは、上記で説明した手順とまったく同じ手順でインストールできます。単にプラグイン » 新規追加に移動し、Elementorを探してインストールしてください。

インストールが完了したら、次のステップで説明するように、お問い合わせフォームを作成できます。
ステップ3:Elementorお問い合わせフォームを作成する
WPForms » 新規追加に移動することで、すぐにお問い合わせフォームの作成を開始できます。

これにより、数秒でWPFormビルダーが読み込まれます。まず、後で編集する必要がある場合に簡単に見つけられるように、フォームに名前を付けます。

少し下にスクロールすると、フォームテンプレートが表示されます。WPForms Liteを使用している場合は、数十個の無料テンプレートから選択できます。
後で、Proにアップグレードして、2,100以上のWordPressフォームテンプレートをカスタマーサービス、マーケティング、その他のさまざまなカテゴリで利用できます。
お問い合わせフォームが必要なため、無料のシンプルなコンタクトフォームテンプレートが、この記事での目的に最適です。
このテンプレートを検索ボックスで検索し、画面に表示されたらテンプレートを使用ボタンをクリックします。

テンプレートを選択すると、WPFormsビルダーが開きます。WPFormsのユーザーインターフェイスは、誰でも簡単に使用できるように設計されています。
左側には、お問い合わせフォームに追加できるすべてのフィールドが表示されます。右側には、フォームのライブプレビューが表示されます。

テンプレートをカスタマイズしたい場合は、左側のパネルからフォームフィールドを右側のフォームにドラッグするだけです。
ドロップダウンリストや複数選択式の質問を追加したり、フィールドをドラッグアンドドロップしてフォーム上で並べ替えたりできます。
フィールド設定を開きたい場合は、ビルダー内でフィールドを一度クリックしてください。設定は左側のパネルのフォームプレビューの横に表示されます。
各フィールドをクリックして、希望どおりに設定してください。完了したら、上部にある保存をクリックします。

代わりにサインアップフォームを作成しますか?カスタムElementorサインアップフォームの作成に関する別のチュートリアルがあります。
WPFormsでは、さまざまな便利な機能をご利用いただけます。例えば、ElementorフォームとGoogleスプレッドシートを連携させるためのゲートウェイとしても使用できます!
ステップ4:Elementorお問い合わせフォームの確認メールとメッセージを設定する
次に、フォームが送信されたときに送信されるメッセージを確認しましょう。フォームビルダーで設定をクリックし、次に左側の通知メニュー項目をクリックします。
右側には、フォームが送信されたときにあなたに送信される通知メールが表示されます。必要に応じて、ここでメールをカスタマイズできます。

メールが{admin_email}に送信されることに気づきましたか?これはWordPressの管理者メールアドレスのプレースホルダーです。
{admin_email}を削除して、ここにビジネスメールアドレスを入力するか、間違っている場合はWordPressで管理者メールアドレスを変更できます。
次に、確認をクリックします。この画面では、フォームが送信されたときにフロントエンドに表示されるメッセージをカスタマイズできます。
これはオプションですので、デフォルトのメッセージで問題なければそのままにしておいてください。

これで完了です!上部にある保存ボタンをクリックする時間です。フォームビルダーウィンドウの右上にあるXをクリックして、フォームビルダーを閉じることができます。
素晴らしい!Elementorフォームの準備ができました。公開してライブにし、情報を収集し始めるには、公開するだけです。
ステップ5: Elementorのお問い合わせページを作成する
このステップでは、Elementorを使用してカスタムのお問い合わせページを作成します。WordPressダッシュボードから、ページをクリックし、次に新規追加ボタンを押します。

上部にお使いのページタイトルを入力してください。その後、青いElementorで編集ボタンをクリックします。
これによりElementorページビルダーインターフェイスが起動し、お問い合わせフォームを追加したり、ページの他の要素をカスタマイズしたりできます。

Elementorがお使いのブラウザに読み込まれるまで数秒お待ちください。左側には、ページに追加できるさまざまな要素が表示されます。
「基本」セクションの下にあるWPFormsブロックを探してください。これは、以前に作成したフォームを追加するために使用できます。

WPFormsブロックをお使いのページにドラッグアンドドロップし、ドロップダウンをクリックして、作成したばかりのフォームを選択してください。

フォームを選択するとすぐに、ページに表示されます。素晴らしい!フォームビルダーの使用はこれで完了です。今やるべきことは、お問い合わせページを公開することだけです。
ステップ6: Elementorのお問い合わせページをスタイル設定して公開する
Elementorを使えば、お問い合わせページの公開は簡単です。しかし、ElementorのWPFormsブロックオプションを使用してフォームをスタイル設定できることをご存知でしたか?
そうするには、ページ上の埋め込みフォームの周りの領域をクリックして、左側のペインでブロックオプションを開きます。次に、スタイルタブをクリックします。

このタブの下には、背景画像、色、その他のスタイリングオプションがすぐに利用できる、提供されている多くのテーマが表示されます。

または、その下のオプションを使用して、フィールド、ラベル、またはボタンのスタイルを個別に変更することもできます。
例えば、ボタンのスタイル設定を使用して、数回のクリックでボタンのサイズ、境界線の半径、色を増やしました。

詳細設定タブをクリックすると、さらに高度なオプションにアクセスできます。これには、フォームのレイアウト、モーションエフェクト、ページの背景などの設定が含まれます。

フォームのスタイルのカスタマイズが完了したら、フォームを発行する時間です。下部ツールバーの発行ボタンをクリックするだけです。

最後に、見てみるをクリックして、ウェブサイト上の連絡先フォームを確認します。これで完了です!Elementorの連絡先フォームページが公開され、回答を受け取る準備ができました。

Elementorのお問い合わせフォームをスパム対策する
公開されたお問い合わせフォームは、遅かれ早かれスパムを引き付けるため、ボットに見つかる前にロックダウンしておくと、後でクリーンアップする手間が省けます。良いニュースは、すべてのWPFormsフォームにデフォルトで有効になっている組み込みスパム保護が付属していることです。
これには、訪問者に煩わしいパズルを解かせることなく、基本的なボットをキャッチする非表示のアンチスパムハニーポットが含まれています。デフォルトの保護で処理できる以上のスパムがフォームに送信され始めた場合は、別のレイヤーを追加できます。
WPFormsは、有料プランでは最新のアンチスパムトークン、reCAPTCHA、hCaptcha、Cloudflare Turnstileもサポートしているため、オーディエンスに合った方法を選択できます。
初日からその保護があることは、ここでWPFormsを選択する大きな理由です。お問い合わせフォームは、サイト上でボットにとって最も簡単なターゲットの1つであり、ハニーポットはそれらのほとんどをバックグラウンドで静かに処理します。
Elementorユーザー限定ですが、Akismetを使用してElementorフォームでスパムをブロックする方法はこちらです。
Elementor連絡先フォームの作成に関するFAQ
Elementorのコンタクトフォームは、コメントやサポートリクエストでよく取り上げられます。読者が最もよく尋ねる質問への回答を以下に示します。
Elementorにはコンタクトフォームがありますか?
はい、ただし有料版のみです。ElementorのフォームブロックはElementor Proの一部であるため、無料プラグイン単体ではコンタクトフォームを作成できません。
良いニュースは、代わりにWPFormsブロックを使用して無料で追加できることです。Elementorでページを編集しながらWPFormsブロックにアクセスするには、WPFormsとElementorの両方をインストールする必要があります。
Elementorでコンタクトフォームを無料で追加するにはどうすればよいですか?
Elementorの無料バージョンを使用してコンタクトフォームを追加するには、WPFormsのようなプラグインを統合します。まず、WordPressダッシュボードからWPFormsプラグインをインストールしてアクティブ化します。アクティブ化したら、WPFormsビルダーを使用してフォームを作成し、次にWPFormsブロックをElementorページにドラッグしてフォームを選択します。
Elementorでフォームを作成するにはどうすればよいですか?
WPFormsプラグインを使用すると、Elementorで簡単にフォームを作成できます。WordPressのプラグインセクションからWPFormsをインストールしてアクティブ化します。次に、WPFormsのドラッグアンドドロップインターフェイスを使用して、Elementorページに追加する前にフォームを構築します。
Elementorでカスタム連絡先フォームを作成するにはどうすればよいですか?
WPFormsは、その柔軟性と使いやすさから、Elementorでカスタムコンタクトフォームを作成するための優れたオプションです。WPFormsをインストールしてアクティブ化した後、プラグインを開き、「新規追加」を選択してカスタムフォームを作成します。
必要に応じてフィールドを追加または削除してフォームをカスタマイズします。完了したら、フォームを保存します。Elementorで、フォームを配置したいページにWPFormsブロックを追加し、フォームを選択して、ページを公開します。
Elementor連絡先フォームの通知メールを修正する
Elementor連絡先フォームの送信がメールで届かないという問題がありますか?この問題を簡単に修正できるため、常にメール通知を受け取ることができます。Elementor連絡先フォームがメールを送信しない問題を修正するためのこのガイドを確認してください。
Elementor用の追加フォームビルダーについて学びたい場合は、Elementorと連携するのに適したお問い合わせフォームプラグインに関するこの記事をチェックして、フォームでのユーザーエンゲージメントを高め、最終的にはリードジェネレーションを向上させましょう。
フォームの作成準備はできましたか?最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。
