Elementorを使ったフォームの作成方法

ビジネス用ウェブサイトにフォームは欠かせません。フォームを設置することで、サイト訪問者が気軽に問い合わせできるようになり、大切な情報やフィードバックを送信することもできるようになります。とは言え、フォームの作成は一筋縄ではいきません。

シンプルでわかりやすい方法をお探しなら、Elementorが答えです。美しさと使い勝手を兼ね備えたこの人気のページビルダーでは、さまざまなフォームを作成することができます。

この記事では、Elementorでフォームを作成するメリットをご紹介します。それから、フォーム作成手順、役立つアドオンとトラブルシューティングのヒントもみていきます。では、早速始めましょう！

Elementorを使ったフォームの作成方法について動画での解説もご用意しています。

Elementorでフォームを作成するメリット

WordPressサイトにフォームを作成することには、さまざまなメリットがあります。まず何より、ユーザーが簡単に問い合わせできる手段を提供できること。また、リードジェネレーション、ユーザーから重要な情報を受け取るのにも有用になります。

さらに、ユーザー登録や支払いの受け付けもフォームで行えます。WordPressサイトにフォームを作成する場合には、プラグインまたはElementorのようなページビルダーを使用します。

Elementorを使えば、一行もコードに触れることなく、ドラッグ＆ドロップ式エディタを使って、ブランディングやサイトの外観に合わせたレスポンシブなフォームを作成できます。

フォームにはいくつか種類があります。

• Contact Forms─お問い合わせ用のベーシックなフォームの作成が可能
• Gravity Forms─Gravity Formsウィジェットで柔軟なフォームの編集やデザインの変更が可能
• Register Forms─ユーザー登録フォームの作成が可能

各フォームには特定の使用用途があり、うまく活用することで、サイトの機能性を高めることができます。次に、Elementorを使用してお問い合わせフォームを構築する方法をみていきましょう。

WordPressとElementorでお問い合わせフォームを作成する方法（6ステップ）

Elementorでフォームを作成すべき理由が分かったところで、フォームの作成手順をご紹介していきます。なお、サイトでElementorがインストール、有効化されていることが前提です。

Elementorには、無料で使える機能と有料プラグインがあります。フォームの作成には、有料版が必要です。

ステップ1. Elementorのフォームウィジェットを追加

はじめに、お問い合わせフォームを挿入したいページまたは記事に移動します。画面上部にある「Elementor で編集」ボタンをクリックしましょう。

Elementorのエディタインターフェースが出現します。左側のウィジェットの中から、「フォーム」ウィジェットを選択してください。

次に、ウィジェットをページ上にドラッグ＆ドロップします。これで、基本となるお問い合わせフォームの挿入が完了です。

ステップ2. お問い合わせフォームのフィールドを編集

お問い合わせフォームをページ上に配置したら、次にフォームのフィールドを編集していきましょう。

デフォルトの設定を変更したい場合、基本的なフォームフィールドは、ウィジェットをクリックしてテキストを編集すればOKです。フィールドを追加したい場合には、「項目を追加」をクリックして追加します。

ドロップダウンリストから、追加するフィールドの種類を選択できます。次に、フォームフィールドの名前となる「Label」に任意の名前を入力します。この名前がユーザーに表示されます。

その下の「Placeholder」は、情報を入力する前にフィールドに表示されるテキストです。入力例を示すために有用になります。

さらに、「Required」（入力必須項目）を有効にしたり、「カラム幅」の調整も。「Bottons」タブでは、フォームボタンの見た目を変更することができます。フォントや色はもちろん、サイズ変更も可能です。

ステップ3. フォーム送信の設定

フォームフィールドの編集が終わったら、次はフォーム送信の設定です。エディタ内の「Email」タブに移動しましょう。

たとえば、「To（送信先）」フィールドに自分のメールアドレスを入力すれば、そのメールアドレス宛にユーザーからのメッセージが届くようになります。また、メールアドレスは複数設定することができます。

また、「Subject（メッセージの件名）」や「Message」も編集可能です。すべての設定が終わったら、変更を保存するのをお忘れなく。

ステップ4. お問い合わせフォームメッセージを編集

さらなる詳細設定として、任意のメッセージを設定することもできます。「追加オプション」タブを選んで、「Custom Messages」のトグルスイッチを「はい」に切り替えましょう。

変更できるメッセージの種類は以下の4つです。

• Success Message（成功）─フォームが無事送信されると表示されるメッセージ
• Error Message（エラー）─送信中に何らかの問題が発生した場合に表示されるメッセージ
• Required Message（必須）─特定のフィールドが未入力である場合に表示されるメッセージ
• Invalid Message（無効）─何らかの入力項目が無効だった場合に表示されるメッセージ

各メッセージは、ブランドやサイトのスタイルに合わせて変更できるため、表現に個性を出すこともできます。

ステップ5. お問い合わせフォームの外観を編集

フォームのテキストとフィールドの編集が完了したら、もちろんブランディングに合わせた外観に変更したいはず。次は、お問い合わせフォームのデザインの編集に取りかかりましょう。
ウィジェットエディタの上部にある「スタイル」をクリックします。

「スタイル」画面では、お問い合わせフォームのデザインを変更する様々な設定が行えます。例えば、余白の調整や、色、サイズ、ラベル、ボタンを変更することができます。

ステップ6. フォームを保存して公開する

お問い合わせフォームのデザインと内容の編集が完了したら、あとは編集を保存して公開するだけ。画面の左下にある「更新」ボタンをクリックするとフォームが公開されます。

以上です！この後は、フロントエンドからお問い合わせフォームにアクセスして、変更通りの外観になっていることを確認しましょう。

Elementorフォームにおすすめのプラグイン

Elementorには、WordPressサイトのフォーム作成に役立つ機能が豊富に用意されていますが、機能をさらに拡張するためにプラグインの追加もできます。ここからは、いくつかおすすめのプラグインをご紹介します。

Master Addons for Elementor

Master Addons for Elementorは、ページビルダーの機能を強化して、ひいてはサイトのパワーアップにもつながる便利機能が揃ったフリーミアムプラグインです。以下のような機能があります。

• ヘッダー、フッター、コメント欄のフォームビルダー
• メガメニュービルダー
• 画像のホバー機能
• 表示条件の設定

また、Contact Form 7、Ninja Forms、WP Forms、Caldera Formsなど、多くのフォームプラグインと互換性があります。すべての機能を利用するには、年間39ドルで利用可能なプロ版の購入が必要になります。

The Plus Addons

Elementorで使用できるもう1つの優れたプラグインは、Plus Addons。このプラグインには、8,000以上のカスタマイズ設定と300以上のユーザーインターフェース（UI）ブロックが搭載されており、ページやフォームを簡単に作成、デザインすることが可能です。

使用できる機能は、以下の通り。

• アイコンボックス
• マップセクション
• フォーム
• 価格表

また、18種類以上のテンプレートも利用可能で、Web制作会社、レストラン、美容室など、特定のタイプのビジネスを想定して特別に設計されています。

無料版もありますが、便利な機能をフル活用するために、年間39ドルで利用可能な有料ライセンスを購入することをおすすめします。

フォーム作成のヒント

有料ライセンスを購入せずに、WordPressサイトにElementorのお問い合わせフォームを追加したいとお考えの方に朗報です。お金をかけずに作成することができます。ページビルダーをWPFormsやFormidable FormsなどのWordPressのフォームプラグインと組み合わせる方法です。

ここでは、Formidable Formsを使うことにします。インストールして有効化したら、「Formidable」＞「Forms」＞「Add New」に移動します。

次に、設定の一覧から「Contact Form」を選択して、複数のテンプレートの中から好きなものを選びます。フォームの作成を終えたら、フォームを配置したいページを開き、Elementor のエディタインターフェースを開きます。

左側のパネルから「Formidable Forms」ウィジェットを選びましょう。必要に応じて、フォーマット、色、ボタン、テキストなどを調整することができます。

完了したら、変更を保存して公開しましょう。この方法は、Elementor Proを使うよりも時間と手間が必要になりますが、費用は節約することができます。

Elementorフォームのトラブルシューティング

Elementorのお問い合わせフォームは、非常にシンプルで使いやすく設計されていますが、時には問題が発生することも。最も一般的なのは、メッセージの未送信です。

Elementorでは、メッセージの送信にwp_mail関数が使われており、これはサーバー経由でメッセージが送信されることを意味します。

ところが、一部のサーバーではメッセージ送信に使用されるPHP関数が無効になっている場合があり、これが問題の原因になります。解決策として、使用しているサーバーに連絡して、send_mail関数の有効化を依頼することをお勧めします。

もしくは、SMTP（Simple Mail Transfer Protocol）サーバーを使用する手もあります。SMTPは、Gmailなどの外部サービスを利用して、フォーム内のメッセージを利用者の受信トレイにルーティングするメールサーバーです。これによって、メッセージがスパムフォルダに入る確率を減らすことができます。WP MAIL SMTPのようなプラグインで、SMTPを設定することができます。

まとめ

フォームはサイトにおいて非常に重要な役割を担っています。フォームがあれば、ユーザーが問い合わせたり、アカウントに登録したり、支払い情報を送信したり、様々なことが可能になります。とは言え、サイトのデザインに合わせた美しいフォーム作りは簡単ではありません。幸い、Elementorを使えば簡単です。

Elementorのフォームウィジェットをページに追加して、フィールドを設定し、フォームの編集を行いましょう。また、ブランディングに合わせて、フォームのデザインも変更可能です。

WordPressでのElementorフォーム作成についてご不明点はございますか？以下のコメント欄でぜひお聞かせください。