お問い合わせフォームが、お客様と連絡を取り合うための最も便利な手段の一つであることは、すでにご存知の通りです。
ECサイトであれそれ以外のタイプであれ、お問い合わせフォームはあらゆるウェブサイトに必要とされています。
見た目もプロフェッショナルで、顧客データを収集する優れた方法でもあります。さらに、シンプルなcaptchaボタンを追加すれば、優れたスパム対策にもなります。
そこで本記事では、WordPressのフォームビルダー、プラグイン、HTMLを使って、お問い合わせフォームをすばやく簡単に作成する方法を解説します。これにより、お問い合わせフォームがもたらすあらゆるメリットを存分に活用できるようになります。
それでは、さっそく始めましょう。
このガイドの内容：
表示
.gutentoc-toc-wrap ul li a, .gutentoc-toc-title-wrap .text_open{ color: #0033ff}}
1. フォームビルダーでお問い合わせフォームを作成する
オンラインのフォームビルダーは、HTMLやCSSなどのプログラミング言語の専門知識がない方や、自分で一から作る時間がないほど忙しい方にとって、第一の選択肢となります。
WordPressサイト向けにフォームビルダーでお問い合わせフォームを作成するプロセスはシンプルで、ほとんどの場合5分もかかりません。
最新のフォームビルダーは使いやすいユーザーインターフェースを備えており、設定を直感的に操作しながら、あらゆるフォームをすばやく作成できます。
フォームビルダーのライブラリ内にあるフォームテンプレート、つまりデータ収集のために整理された書式は、あらかじめ設計されています。あとはユーザーが、自分のニーズに合わせてフォームをカスタマイズするだけです。
カスタマイズのプロセスやフォームビルダーが提供する可能性については、この記事の後半で解説します。
それではまず、EmbedFormsを使ってお問い合わせフォームを作成する手順を、ステップバイステップで見ていきましょう。
- まず、アカウントを作成します。
- Contact form（お問い合わせフォーム）テンプレートを選択します。
- 「Publish」（公開）をクリックします。
これで完了です。
フォームを公開すれば、すぐにWordPressのお問い合わせページに埋め込める状態になります。
ユーザーは、まずコードをコピーし、それをフォームを表示したいウェブサイトに貼り付けることで、ページにフォームを実装できます。
このフォームは、フィードバックボタンとして、または専用のお問い合わせページ上の通常のお問い合わせフォームとして埋め込むことができます。
WordPressサイトに埋め込んだお問い合わせフォームが、実際にどのように表示されるかの一例をご紹介します。
フィードバックボタンを選んだ場合は、フォームをサイドバーやページのヘッダーに埋め込むことができ、ユーザーがアクションを起こすと、ポップアップ、フローター、バナーとして表示させることができます。
以上で完了です。これで終わりです。
それでは話を戻して、カスタマイズのオプションと、フォームを編集する場合に何ができるのかについてお話ししましょう。
基本的なお問い合わせフォームには、名前、メールアドレス、メッセージといったいくつかの重要な項目が含まれます。
しかし、ある時点で新しいフォーム項目を追加したり、フォームのデザインを変更したくなることもあるでしょう。
オンラインのフォームビルダーは、こうした作業にも役立ちます。
いずれかの質問をクリックし、左側のメニューから「質問設定」をクリックするだけです。
質問設定メニューでは、段落、メールアドレス用の項目、ラジオボタン、ドロップダウンメニュー、チェックボックスなど、さまざまな項目タイプが用意されています。これらは、注文フォームや登録フォームといった別のフォームを作成する際に役立つこともあります。
さらに、プロのデザイナーが手がけたテーマの一つを選んだり、お問い合わせフォームに写真を添付したり、カスタムCSSのオプションを利用したりして、サイトのデザインに合わせてフォームをカスタマイズすることもできます。
フォームビルダーで利用できるその他のオプションは次の通りです。
- メール通知
- リダイレクトリンク
- フォーム入力後のサンキューメッセージ
- 送信ボタンに独自のコピーを追加
- 必須項目の設定
- すべてのフォーム送信を管理できる整理された一覧画面
- ドラッグ＆ドロップで質問を並べ替えられるインターフェース
- 複数のメールマーケティングアプリやstripeなどの決済システムとの連携
始め方がまだよくわからないという方は、ぜひ当社のチュートリアルをご覧ください。
なぜフォームビルダーを選ぶのか？
フォームビルダーは高い機能性とパワフルな機能を備えていながら、多くの場合は初心者にもやさしく、誰でも希望のオプションをクリックするだけでフォームを作成できます。
最も良い点は、ウェブサイトの速度に影響を与えかねない追加のアドオンをインストールする必要がないことです。
さらに、フォームビルダーはWordPress以外のあらゆるページビルダーやCMSと連携でき、proバージョンの一部では、複数ページフォームやPaypal連携といった高度な機能も提供されています。
2. WordPressプラグインでお問い合わせフォームを作成する
フォームビルダーのプラグインも、WordPressのお問い合わせフォームが必要なときに多くのユーザーが頼る、もう一つの便利なツールです。
市場で人気のあるWordPressプラグインは幅広く存在し、ショートコードで埋め込むシンプルなフォームを実現する無料プラグインから、WordPressと完全に統合されたプラグインまでさまざまです。
そして、どれが最良のWordPressプラグインかは、ユーザーの好みやニーズによって大きく変わります。
とはいえ、よく見かける人気のWordPressプラグインをいくつかご紹介します。
- WPForms Lite
- Formidable Forms
- Contact Form 7
- Gravity forms
- Caldera forms
- Ninja Forms
注：プラグインを探してインストールするには、wordpress.orgを利用する必要があります。
WordPressのお問い合わせフォームプラグインの可能性についてはこの後お話ししますが、まずはアドオンを使ってシンプルなお問い合わせフォームを作成する手順を見ていきましょう。
1. まず、WordPressのダッシュボードに移動し、「Plugins」（プラグイン）をクリックします。
-
お好みのプラグインを検索します。上記で挙げたもののいずれでも、あるいは一番気に入ったものを選んでもかまいません。
-
「Activate」（有効化）をクリックします。
プラグインがWordPressサイトに追加されたら、新しいお問い合わせフォームの作成を始められます。
通常、次に表示されるのはドラッグ＆ドロップ式のフォームビルダーで、ここから必要な項目を選び、自分のニーズに合わせてフォームをカスタマイズできます。
WordPressプラグインによって提供される機能はさまざまで、ファイルのアップロードのような基本的なものもあれば、条件分岐ロジックのような高度なものもあります。
次に、フォームをウェブサイトに埋め込むには、新しいページを作成するか、既存のページを編集する必要があります。
- まず最初に、新規ブロック追加ボタンをクリックしてプラグインを検索します。
- ほとんどのフォームウィジェットは自動的にページに追加されるので、そこからお問い合わせフォームを選択します。
- プレビューをクリックしてフロントエンドでフォームがどのように表示されるかを確認し、公開をクリックします。
プラグインを使うことに決めた場合は、押さえておくべきシンプルかつ重要な機能をいくつかご紹介します。
- 使いやすいインターフェース
- さまざまなWordPressテーマ
- フォーム送信数の無制限
- 簡単なカスタマイズ
- モバイル対応フォーム
- CSVファイルなどのエクスポートオプション
優れたお問い合わせフォームプラグインの中には、無料版を提供しているものもあります。得られる機能に対して料金が見合うかどうか、試して確かめてみたい場合に便利です。
なぜプラグインを選ぶのか？
プラグインは優れた柔軟性を提供し、WordPressのページ上で直接お問い合わせフォームを作成できます。
プラグインを使えば、フォームのスタイルを変更し、ウェブサイトのデザインに合ったフォントや色を使うことができます。
3. HTMLでお問い合わせフォームを作成する
HTMLやCSSなどのプログラミング言語を使ってお問い合わせフォームを作成するのは、本記事で挙げた方法の中でおそらく最も上級者向けの方法です。
とはいえ、マークアップ言語を使ってお問い合わせフォームを作成するのは、多くのサイト運営者が実践している一般的な手法です。
そこで、コードを書き始める前に、名前、メールアドレス、メッセージボックス、送信ボタンといった最も重要な項目に加えて、お問い合わせフォームにどのような入力項目を持たせたいかを考えてみましょう。
次に、HTMLエディタを開きます。NotepadからBracketsまで、どのエディタでもかまいません。ただし、ドキュメントに名前を付けるときにHTMLの拡張子を忘れずに付けてください。
次に、以下のサンプルコードを使えば、ご自身のWEBページ向けに最もシンプルなお問い合わせフォームを作成できます。回答をご自身のメールに受け取れるよう、actionのリンクをあなたのドメインに、メールアドレスをあなたのものに変更してください。
<div class="container">
<form target="_blank" action="https://yourdomain.com/name@email.com" method="POST">
<div class="form-group">
<div class="form-row">
<div class="col">
<input type="text" name="name" class="form-control" placeholder="Full Name" required>
</div>
<div class="col">
<input type="email" name="email" class="form-control" placeholder="Email Address" required>
</div>
</div>
</div>
<div class="form-group">
<textarea placeholder="Your Message" class="form-control" name="message" rows="10" required></textarea>
</div>
<button type="submit" class="btn btn-lg btn-dark btn-block">Submit Form</button>
</form>
</div>ただし、もしスタイリッシュで見栄えの良いものをお求めなら（きっとそうでしょう）、CSSやPHPといった少し高度なプログラミング言語を使う必要があります。
しかし、初心者の方は、まずこれらの言語を学ぶのに多くの時間を費やす必要があります。できるだけ早くウェブサイトにお問い合わせフォームを追加したいのであれば、これは最善の選択とは言えないかもしれません。
結論
お問い合わせフォームの追加はすばやく簡単に行え、お持ちのスキルに応じて、上記で挙げたいずれの方法でもデザインできます。
最も重要なのは、ウェブサイトにはお客様があなたと連絡を取るための手段が必ず必要だということです。これはコミュニケーションを可能にするだけでなく、ビジネスに対する信頼と信用の感覚を生み出します。
