お問い合わせフォームを作れるプラグインとして有名な「Contact Form 7」。多くのWordPressユーザーがご存知だと思います。HTMLの知識が少しあれば、誰でも簡単にお問い合わせフォームを作れて便利ですよね。今回は、さらに簡単にお問い合わせフォームを制作できるプラグインをご紹介いたします。直感的な操作のみで完成するので、WordPressを始めたばかりという方にもおすすめです。
目次
「Contact Form by WPForms」とは
「Contact Form by WPForms」の特徴は以下の通りです。
- オリジナルの見やすいUIで操作可能
- ほとんどの操作がドラッグ&ドロップのみ
- プレビューを見ながら作成できる
- 別のプラグインから移行できる
直感的な操作のみでお問い合わせフォームが完成します。基本的なお問い合わせフォームの設置のみであれば、HTML、CSSなどの知識は全く不要です。ドラッグ&ドロップで組み立てながら、リアルタイムでプレビューを見ながら作成できます。「Contact Form 7」よりさらに初級者向けという感じですが、プラグイン利用者の数からも信頼度、機能性は申し分ないと思います。
「Contact Form by WPForms 」のインストール
WordPressの管理画面から、プラグインの新規追加をクリックして「Contact Form by WPForms」と検索するか、下記ボタンよりダウンロードできます。
「Contact Form by WPForms」の使い方
機能を拡張できるProバージョン（有料）もありますが、今回は無料で使える範囲内でご紹介したいと思います。操作は以下の3ステップです。
- テンプレート（雛形）を選ぶ
- フィールド（フォームに表示する項目）を追加する
- 通知や送信完了後の画面に設定をする
テンプレートを選ぶ
有効化するとサイドメニューに「WPForms」が表示されているので、そこから操作スタートです。
「新規追加」を押すと、テンプレートを選択する画面が表示されますので、任意のものを選択します。
2020年7月現在デフォルトでは、以下の3種類が用意されています。
- 簡単なお問い合わせフォーム
- メールマガジン登録フォーム
- 提案フォーム
オリジナルで一から作る場合は、空のフォームを選ぶといいでしょう。また、提案フォームもおもしろそうですね。企業サイトに設置して一般ユーザーの方からご提案を募ることができるわけです。自由に意見を書くフォームより、選択肢がある方がハードルが下がりますね。
フィールドを追加する
テンプレートを選択すると自動的にフィールドを追加する画面に移動します。無料版で使える標準フィールドの中から追加したい項目をドラッグ&ドロップするだけです。
右側に表示されているのが、問い合わせフォームのプレビューになります。
一通り必要な項目を追加した後でも、ユーザーが入力しやすいように並び替えることもドラッグ&ドロップのみで完了します。
ドロップダウンの選択式メニューやチェックボックスなどは、汎用性が高く便利ですね。もちろん選択肢の増減やカラム数は以下のように簡単に編集できます。
入力されていなければ送信できなくなるような必須項目の設定も簡単です。項目ごとに下記にチェックを入れるだけで完了します。プレビュー画面に赤い印が表示されているものは必須項目に設定されています。
詳細設定をする
無料版で設定できるのは、下記の3項目です。
- 一般
- 通知
- 確認
一般
一般の設定で編集すべき部分は、基本的にはこの部分ぐらいでしょうか。送信ボタンのテキストをここで変更できます。フォームの種類によってはキャッチーなものに変更したり、英語版サイトなどに設置する場合は、英語に変えたりするといいですね。
「スパム対策ハニーポットを有効化」にはデフォルトのままチェックを入れておきます。ベーシックなフォームの場合は、最後の二つにチェックを入れる必要はありません。
通知（※重要です）
問い合わせの内容を受け取る先のメールアドレスや、ユーザーに届く問い合わせ完了メールの送信元のメールアドレスを設定します。お問い合わせを正確に受け取るための最も重要な設定項目です。
※デフォルトのままでは、問い合わせた側に自動返信（受付完了通知）は届きません。上記デフォルトの画面で入力されている{admin_email}というタグは、WordPressに設定している管理者メールアドレスに送信されるという設定です。
ですので、以下の2点に注意して設定することを推奨いたします。
- 「メールアドレスへ送る」にスマートタグ（メール）を含めておく
- メッセージのデフォルトで表示されているタグ「{all_fields}」は消さずに、受け付けた旨を追記しておく
この2点を設定しておくことで、ユーザーに受付完了通知が届き、問い合わせが完了した旨を伝えることができます。設定例は以下のような感じです。
{field_id=”1″}は、右上の「スマートタグを表示」を選んだ上で、「メール」をクリックすると自動入力されます（フィールドの数によってidは変化します）。ユーザーがフォームに入力したメールアドレスが適用されるタグになります。
メールアドレスを直接入力して、送信先を設定することもできます。注意する点としては、複数のスマートタグや、メールアドレスを必ず「,」で区切ることです。「,」が無いと、どの宛先にも送信されないので注意しましょう。
また、上記の例のようにCC（カーボンコピー）のメールアドレス欄を表示したい場合は、サイドメニューの「WPForms」＞「設定」＞「メール」の最下部にある「カーボンコピー」にチェックを入れると表示されます。
下記箇所は、問い合わせした側にも管理者側にも届くメッセージ欄ですが、このタグを削除してしまうと問い合わせ内容が届かなくなるので、必ず残しておきましょう。
上記の例のように問い合わせを受け付けた旨をタグの上か下に追記しておくといいですね。
確認
最後は確認画面の設定です。問い合わせ完了後のブラウザでのアクションを設定します。
ここで確認タイプを以下から選択できます。
- メッセージ
- ページを表示
- URLに移動（リダイレクト）
ユーザーが問い合わせた後にどんなアクションを行うかです。基本的には「メッセージ」でいいと思いますが、サイト内の別のページを表示させたい時は、「ページを表示」を選択しましょう。また、特定のページを表示させたい場合は、任意のURLを入力してリダイレクトさせることも可能です。
他のプラグインから移行する方法
問い合わせプラグインの乗り換え時にもサイドメニュー「WPFrom」＞「ツール」よりワンタッチでインポート可能です。下記箇所でプラグインを選択してインポートします。
弊社でcontact form 7で作成したフォームをインポートした際は、一部の表示が崩れていたので、インポート後に手動での調整・確認をおすすめいたします。
HTMLやCSSの知識が無くても作れます
「Contact Form 7」 より簡単、直感的にお問い合わせフォームを作成できます。問い合わせた内容が届かない問題や自動返信が来ないなどの問題は、当記事でご紹介したように通知設定をしておけば、解決されるはずです。数種類ある入力フィールドをドラッグ&ドロップで組み合わせてフォームが完成します。HTMLなどの知識は全く不要で、WordPress初心者の方にもおすすめです。無料版でも十分使えると思うので、ぜひチェックしてみてください。
コメント