コメントエリアをお問い合わせ専用フォームにカスタマイズする方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

本日はウェブサイトから気軽にお問い合わせを受け付ける方法を解説いたします。ワードプレスの投稿ページ内にある「コメントを書き込める機能」はご存知でしょうか?コメント機能はウェブサイトの設計によっては使用していないパターンもあるので存在を知らない方もいるかもしれません。

コメント機能をコメント欄としてそのまま使うのも、コメント機能をお問い合わせフォームとして使うのもワードプレスでは自由なのでお好みに応じて使用できます。

本日はコメント欄をお問い合わせ仕様に変更するカスタマイズをしていきましょう。

コメントエリアをお問い合わせ専用フォームにカスタマイズする方法

テーマは「Twenty Twenty-One」を例で使用いたします。以下がノーマル状態です。

国内最大級の広告サービスでエンジニア職

⇒ 今すぐ募集内容をチェック - 株式会社ファンコミュニケーションズ【AD】 -

ではカスタムしていきましょう。今回は「Comment Form Builder」を使います。

インストールをしたら「有効化」をクリック。コメントに「Comment Forms」が追加されました。

フォーム作成画面に入ると項目を自由に追加できるようになっています。

項目は以下の通りです。

・Text
・Textarea
・Radio
・Checkbox
・Dropdown
・Multi Select
・Url
・Email

たとえば「Text」をクリックするとフォームが追加されます。

ちなみにHTMLも追加できます。

- 超快速なワードプレスを運営しませんか?【AD】-

HTMLのボックスを追加すると以下が差し込まれます。

HTMLには「ショートコード」も差し込めるので「Contact Form 7」の埋め込みもOK。差し込んだ各フォーム項目はマウスの操作で自由に順番を入れ替えられます。直感的な操作ができて使いやすいですね。

コメント欄をカスタマイズできました。

ただ「Twenty Twenty-One」ではチェックボックスとラジオボタンが崩れています。

以下がCSSで変更を加えた見た目です。

Twenty Nineteenであれば元からレイアウトが整っていました。

念のため「Twenty Twenty」も試しました。

コメント欄をカスタマイズしたので全ページにお問い合わせフォームを一斉導入できました。各フォーム内に表示される透かし文字(Placeholder text)もカンタンに設定可能なので手軽にカスタマイズできます。

フォームは固定ページ側にも差し込む設定ができます。

フォームを手軽にカスタマイズできるプラグインは便利ですね。

固定ページは個別設定ができるので管理もカンタン。

まとめ

本日はコメント欄をカスタマイズするプラグインをご紹介いたしました。

プラグインは現在ワードプレスの管理画面内からはインストールできませんが利用する方法は残されています。コメント欄周りのカスタマイズは手間がかかるのでこの手のプラグインはとても助かりますね。

コメントをお問い合わせフォーム化すれば過去の履歴もすべて管理画面内で管理できます。コメントがすぐに公開されないように「設定 > ディスカッション」の設定を変更しておくとより安心かもしれません。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください