すべての Web サイトには問い合わせフォームが必要です。お問い合わせフォームは、Web サイトの種類に関係なく、さまざまな目的に役立ちます。リードを生成し、つながりと関係を構築し、ユーザーがサイトの問題を報告できるようにし、その間のあらゆることを行うことができます。
WordPress でお問い合わせフォームを作成するのに技術専門家である必要はありません。 Elementor ページ ビルダーを使用すると、美しい Web サイトをこれまでより簡単に作成できます。
Elementor を使用して連絡先フォームを作成する方法を示すために、さまざまなオプションと、Elementor の連絡先フォームについて知っておくべきことをすべて説明します。
Elementor にはかなり前からフォーム ウィジェットが含まれているため、WordPress Web サイト用のフォームを作成するために他の場所に行く必要がなくなりました。これはありがたいことです。
過去に、利用可能なpluginの一部を使用してフォームを作成するときに問題が発生したことがあるかもしれません。フォームの設計と構成のプロセスは、時間がかかり、イライラする場合があります。幸いなことに、Elementor Form ウィジェットは簡単に操作できます。
Elementor フォーム ビルダーを使い始める前に、その最も重要な機能のいくつかを簡単に見てみましょう。
まず最も特徴的な機能の 1 つは、Elementor インターフェイスに完全に統合されていることです。つまり、Elementor で利用できる多くのデザイン/スタイル/レイアウト オプションにアクセスできることになります。これほど堅牢なデザイン システムを備えたスタンドアロン フォームplugin他にはないと思います。
そこから、最大 18 種類のフィールドを作成できます。
フォームを複数のページに分割して複数ステップのフォームを作成することもでき、これは長い形式のアプリケーションに役立ちます。
Elementor Pro には、人気の電子メール マーケティング サービスや顧客関係管理システムと 12 以上の統合があり、フォームを最大限に活用するのに役立ちます。また、包括的な Zapier 統合もあり、ツールがリストにない場合でも、Zapier プラットフォームで利用可能な何千ものツールのいずれかに接続できます。
他にも興味深い代替案がいくつかあります。amp、誰かがフォームに記入すると、Slack または Discord 経由で通知を受け取ることができます。
通知に関して言えば、自分が受け取る電子メール通知やフォーム送信者が受け取る電子メール通知をカスタマイズすることもできます。ユーザーがフォームを送信した後、作成したカスタムのサンキューページにリダイレクトできます。
まず、Elementor エディターを開いて、フォーム ウィジェットをフォームを構築する場所にドラッグ アンド ドロップします。
Elementor の他のすべてと同様、フォームの作成プロセスは視覚的に実行されます。追加のplugin使用する必要はなく、Web サイトのバックエンドとして機能することも必須ではありません。
フォームを作成したら、最初のステップはそこに含まれる情報を整理することです。どのフィールドが必要ですか?また、フィールドの種類は何ですか?何を探していますか？
Elementor エディターで作業する場合、フォーム フィールドは [コンテンツ] タブから追加および編集します。以下のampでわかるように、フォームにはいくつかのデフォルトのフィールドが含まれています。ドロップダウン メニューから [項目の追加] を選択すると、新しいフィールドを作成できます。
フィールドを複製するには、2 つのドキュメントが前後に並んでいるように見えるアイコンを選択してクリックすることもできます。
単純なテキスト フィールドからパスワード、ReCaptcha、ハニーポット フィールドに至るまで、多くのフォーム フィールド タイプが利用可能です。
フォーム フィールドの動作を変更するには、まずフィールドを選択し、次に [タイプ] ドロップダウン メニューのように、利用可能なさまざまなフィールド タイプを確認します。
この機能を使用すると、列幅の設定を調整することで、同じ行で 2 つのフォーム フィールドを使用できます。ドロップダウン セレクターからウィンドウの幅を選択し、50 パーセントを選択して、ウィンドウの幅を変更します。 2 つの連続するフォーム フィールドでこれを実行すると、それらが同じ行に一緒に表示されることに注意してください。
Elementor 編集インターフェイス内にある [スタイル] パネルに移動して、他のウィジェットのスタイルを設定するのと同じ方法で、Elementor でフォームをスタイル設定します。
フォーム自体、フィールド、ボタン、ステップ、エラー メッセージ、確認メッセージはすべてカスタマイズできます。
すでに Elementor に慣れている人にとって、Elementor フォームのスタイル設定に関して学ぶ必要があることはそれほど多くありません。
Elementor でのフォームの作成に関する説明に続いて、フォームが送信された後に何が起こるかを構成してみましょう。これは、フォーム アクション、または Elementor の「送信後のアクション」で参照されるように、フォーム アクションを通じて実行されます。
フォームが送信されると、システムは電子メールを送信し、ユーザーを別の Web ページにリダイレクトするのが一般的です。もちろん、フォームには必要なだけアクションを含めることができ、それらを自由に組み合わせることができます。ご想像のとおり、コーディングを必要としない特定のセレクター フィールドがあります。
追加した各アクションは、メイン メニューの個別のタブ オプションとして表示されます。現在、[電子メール] のタブ オプションがありますが、[アクションの追加] フィールドにリダイレクトを含めると、以下のampに示すように、タブ オプションにも [リダイレクト] が表示されます。
最後に、フォームに関して最もよく寄せられる質問である電子メールによる送信を受け入れるようにフォームを設定する方法を説明します。
エディターの「コンテンツ」タブから「電子メール」を選択すると、以下の画面が表示されます。ここで、送信元メールと返信メールをカスタマイズしたり、フォームからの送信内容のコピーを受け取る人に CC または BCC を追加したりすることもできます。
多くの人は、Elementor のフォーム エディターが一見したよりも強力であることを知って驚きます。さらに高度な機能の 1 つは、各フォームのメッセージングをカスタマイズできることです。
フォームに記入したエンドユーザーに対して、退屈なロボットのように聞こえるのではなく、よりパーソナライズされたフィードバック プロセスを提供するために、フォーム メッセージをカスタマイズすることが可能です。ただし、具体的には、Elementor の問い合わせフォームでカスタマイズできるメッセージは次のとおりです。
まず、ドロップダウン メニューから [追加オプション] を選択してカスタム メッセージングを有効にし、次に [カスタム メッセージング] のトグル スイッチを [はい] に切り替える必要があります。
カスタムメッセージの追加によるElementorコンタクトフォームウィジェットのカスタマイズ
ご覧のとおり、カスタマイズできるメッセージは次の 4 つです。
フォームを送信し、フォームが正しく入力されたこと (必須フィールドに欠落がないことなど) が確認された後、成功メッセージがエンドユーザーに表示されます。
エラー メッセージ — フォームの送信中に不明なエラーが発生したときにエンドユーザーに表示されるメッセージ。
必須メッセージ — フォームの必須フィールドが入力されていない場合、フォームが送信された場合、またはフォームが完了していない場合に表示されます。
フォーム送信内容に誤りがあるため送信できない場合、「無効なメッセージ」というメッセージがエンドユーザーに表示されます。
メッセージを編集できるため、創造的で風変わりなメッセージを作成したり、企業サイトを運営している場合はよりフォーマルでビジネスライクなメッセージを作成したりすることができます。最も良い点は、完全に編集可能なので、やりたいことを何でもできることです。
Elementor フォーム ウィジェットを使用すると、お問い合わせフォームを簡単に構築できます。直感的なドラッグ アンド ドロップのコンタクト フォーム ビルダーと、市販されている他のコンタクト フォームpluginとは異なる多数のカスタマイズ オプションが付属しています。会社の外観や雰囲気に合わせて、スタイルや配色を簡単にカスタマイズできます。また、その他のさまざまな魅力的なウィジェット、300 を超えるプロフェッショナルなテンプレート、ポップアップ ビルダーが 1 つの便利なパッケージに含まれています。この完全な機能を備えた WordPress ページ ビルダーは、必要なウィジェットと機能をすべて備えているため、Web サイトをさらにカスタマイズするために追加のページ ビルダーを購入する必要はありません。さらに、30 を超えるマーケティング サービスの統合が可能であるため、今日の市場で最もよく購入されているpluginグインの 1 つとなっています。
市場で最も人気のある WordPress テーマの 2 つは、Astra と OceanWP です。プロ…
オンライン ストアのセットアップに関しては、WooCommerce が頼りになるpluginです。それ…