Alex Ruben
Elementorを使ってWordPressでお問い合わせフォームを作成する方法
導入
ウェブサイトにお問い合わせフォームを設置することは、訪問者がメールアドレスを探したりコードをいじったりすることなく、実際に連絡を取れるようにするためには必須です。難しいことではありませんが、Elementorは使い慣れていないと、特に扱いにくい場合があります。そこで、Elementorを使ってWordPressサイトに洗練されたお問い合わせフォームを設置する簡単な方法をご紹介します。操作はドラッグ＆ドロップのみですが、時々少し不安定な動作をしても驚かないでください。WordPressとElementorは扱いにくいものです。
始める前に、以下のものを用意しておいてください:
- 実際に機能するホスティングを備えた WordPress ウェブサイト。
- Elementorプラグインをインストールして有効化してください（フォームウィジェットが必要な場合は、Elementor Proが必須です）。まだ無料プランをご利用の場合は、Proプランにアップグレードするか、回避策を見つける必要があります。
ステップ1：Elementorをインストールする
Elementor がまだインストールされていない場合（または動作がおかしい場合）、簡単に説明します。
- WordPress 管理ダッシュボードにログインします。
- プラグイン>新規追加に移動します。
- Elementorを検索します。ポップアップが表示されたら、「今すぐインストール」をクリックしてから「有効化」をクリックします。
- フル機能を求めるなら、Elementorのウェブサイトがおすすめです。プランを選び、ライセンスを購入し、セットアップの指示に従ってください。ライセンス認証は不安定な場合があるため、有効化に何度か試行しても驚かないでください。
ステップ2：お問い合わせフォーム用の新しいページを作成する
お問い合わせフォームには空白のキャンバスが必要です。簡単な手順は次のとおりです。
- ダッシュボード >ページ>新規追加。
- 「お問い合わせ」のような名前を付けてください。本当に、シンプルにしておきましょう。
- 「下書きを作成」をクリックし、「Elementorで編集」をクリックします。これで楽しい作業が始まります。
ステップ3: 新しいセクションを追加する
Elementor エディター内:
- セクションを追加するには、プラス (+)アイコンをクリックします。
- フォームを中央にきれいに配置したい場合は、1 列のレイアウトを選択します。
ステップ4: お問い合わせフォームウィジェットを追加する
無料版をご利用の場合、フォームウィジェットはPro版のみで利用できるため、ここで少し面倒な点があります。Pro版をご利用の場合は、次の手順に進みます。
- Elementor パネルで、フォームウィジェット (Elementor Pro にあります) を見つけます。
- 新しいセクションにドラッグ アンド ドロップするだけです。簡単ですよね?
Pro をお持ちでない場合は、サードパーティのフォームプラグインが必要になるか、別のサービス (WPForms や Contact Form 7 など) からの連絡フォームを埋め込む必要がありますが、それは別の話です。
ステップ5: フォームフィールドをカスタマイズする
デフォルトのフォームには、名前、メールアドレス、メッセージといった基本的な項目があります。これらの項目は調整可能です。
- 各フィールドをクリックして、ラベルを編集したり、必須かどうかを切り替えたり、プレースホルダー テキストを追加したりできます。
- 他に何かアイデアはありますか？電話番号、件名、オプション用のドロップダウンメニューなどのフィールドを追加できます。必要に応じて新しいフィールドをドラッグするだけです。
ステップ6: フォーム設定を構成する
ここで重要な部分は、ユーザーが送信ボタンを押した後にフォームが実際にどのように動作するかを設定することです。
- 「送信後のアクション」で、アラートを受け取れるように「電子メール」が選択されていることを確認してください。
- 歯車アイコンを押して設定を開き、投稿を受け取りたいメールアドレスを入力してください。入力ミスがあるとメッセージが届かなくなるので注意してください。例えば、 と入力してください
[email protected]。 - 何かおかしなことが起こった場合は、サーバーのメール設定をもう一度確認してください（ホスティング会社がバグを起こしている場合もあります）。一部のホストでは、SMTP設定をしないとWordPressからのメールが不安定になることがあります。必要な場合は、WP Mail SMTPなどのプラグインを検索してください。
- 確認メッセージを追加したり、メッセージを送信した訪問者をサンキューページにリダイレクトしたりすることもできます。共有ホスティングでは、この部分がエラーになる場合もあるので、十分にテストしてください。
ステップ7：お問い合わせフォームのスタイルを設定する
やりすぎずにきちんと見えるようにします。
- 「スタイル」タブで、サイトに合わせて色、フォント、境界線などを調整します。
- 正直なところ、モバイル端末への対応は時々不安定です。Elementorのレスポンシブ表示モード（下部パネルの「レスポンシブモード」 ）を使えば、スマートフォンやタブレットでの見え方を調整できます。
ステップ8：スマートフォンでの表示を確認する
モバイルといえば、フォームが圧縮されすぎたり、読みにくくなったりしていないか確認してください。
- Elementor 内でデスクトップ、タブレット、モバイルのビューを切り替えます。
- 必要に応じて、間隔、フォントサイズ、ボタンサイズを調整してください。すぐにうまくいく場合もあれば、そうでない場合もあります。もちろん、WordPress は必要以上に操作を難しくしているからです。
追加のヒントとよくある問題
私が時々つまずいたいくつかの事柄は次のとおりです。
- フォームからメールが送信されない場合は、WP Mail SMTPなどのSMTPプラグインをインストールしてみてください。ホスティング環境によっては、PHPのmail()が信頼できない場合があるため、この手順は非常に重要です。
- 訪問者の名前を含む動的なメール件名をご利用ですか？メールテンプレートを微調整するか、カスタムフィールド文字列を追加するだけでOKです。なぜうまくいくのかは分かりませんが、メールを整理するのに役立ちます。
- 公開後は必ずテストしてください。機能していると思っていたのに、実際には機能していないことに気づくことほどイライラすることはありません。
結論
ここまでたどり着いた方は、おめでとうございます！見た目も良く、通知も届く、ちゃんと機能するお問い合わせフォームが完成しました。Elementorは、ホスティングの問題やプラグインの競合など、予期せぬトラブルを起こすこともありますが、通常は少し調整するだけで解決します。もし何かがうまくいかない場合は、メール設定、プラグインの競合、ホスティングの制限などを確認してください。
よくある質問
お問い合わせフォームを作成するためにElementorの無料版を使用できますか?
いいえ、そうではありません。無料版にはフォームウィジェットが含まれていないので、外部プラグインや埋め込みコードに頼る必要があります。それはまた別の話です。
誰かがフォームを送信したときに通知を確実に受け取るにはどうすればよいですか?
フォーム設定でメールアドレスが正しく、メールアクションが有効になっていることを確認してください。それでも問題が解決しない場合は、メールホスティングが不安定な場合があるため、WP Mail SMTPなどのSMTP設定を検討してください。
お問い合わせフォームからメールが送信されない場合はどうすればいいですか?
多くの場合、サーバーの問題かメールの設定が原因です。SMTPプラグインをインストールすると解決することがよくあります。また、受信者のメールアドレスがスパムメールに入っていないか、ブロックされていないかを確認してください。