WordPress無料テーマLuxeritas（ルクセリタス）で問い合わせフォームをかんたんに設置する方法
WordPressでサイト運営をしていて、コメント欄以外で訪問者とコンタクトをとりたい方に向けた記事です。とにかく簡単に設置したいという方におすすめです。
テーマをLuxeritas（ルクセリタス）に絞っていますが、問い合わせページ作成手順はどのテーマでも共通です。
Luxeritas（ルクセリタス）について
Luxeritas（ルクセリタス）とは、WordPressの無料テーマの1つです。
特に、ページの表示速度の速さに定評があります。
今回は、このLuxeritasをベースに問い合わせフォームの設置方法をお伝えしていきます。
念の為、前提情報も記載しておきます。
- WordPress 5.3.2
- Luxeritasバージョン: 3.8.0
- Luxeritas Child Theme（子テーマ）バージョン: 3.0.2
問い合わせフォームを設置する理由
当サイトでは、コメント欄をキャンセルしています。
訪問者の方が連絡を取りたい場合にその手段がありませんので、問い合わせフォームの設置を行います。
直接メールアドレスを表記するよりセキュリティ的に安心・安全です。
ビジネス系のWordPressサイトでも必須機能といっていいのではないでしょうか。
かんたんに問い合わせフォームを設置する方法
問い合わせフォームをかんたんに設置するには、WordPressのプラグインを利用します。
今回使用するプラグインは、「Contact Form 7」です。
このプラグインを使用すれば、驚くほどかんたんにフォームの設置ができますのでオススメです！
Contact Form 7を導入する
Contact Form 7導入までの手順をご紹介します。
まず、WordPressの管理画面のプラグインの中にある新規追加をクリックします。
開いた画面の右に「 Contact Form 7 」と入力し検索してください。
見つかったら、「今すぐインストール」をクリックします。
さらに、有効化をクリック。
これで「Contact Form 7」の導入が完了しました。
次の項目から設置作業をすすめていきます。
問い合わせフォームの設置作業
「Contact Form 7」 を有効化すると、WordPressの管理画面の左に「お問い合わせ」という項目が追加されます。
「お問い合わせ」の、「コンタクトフォーム」をクリックします
今回は、シンプルな問い合わせフォームで充分なので、既に存在している「コンタクトフォーム1」をそのまま使用します。
ショートコードをコピーします。
固定ページの新規追加をクリックし、ページのタイトルを「お問い合わせ」（任意）にして、ショートコードを貼り付けて以下のような状態にして「公開する」をクリックします。
すると以下のような問い合わせページが完成します。
ページは完成しましたが、今の段階ではリンクがはられていないので誰も見つけることができません。
ですから、問い合わせページへのリンクをメニューに追加する作業を行います。
Luxeritasのカスタマイズ（外観）をクリックします。
下の方にあるメニューをクリックします。
さらに、「カテゴリ1」をクリックして展開します。
※環境によってカテゴリ1ではないかもしれません。
「項目を追加」をクリックします。
さきほど作った「お問い合わせ」をクリックします。
そうすると、左に追加されますので「公開」をクリックします。
すると、以下のようにメニューにお問い合わせが追加されました。
以上で、お問い合わせページ設置作業は完了です。
これで必要最低限の状態になりましたので、このまま使用してもOKです。
更に使い勝手や見栄えを良くしたい場合は、読み進めて下さい。
自動返信の設定をする
自動返信は、送信者に内容の控えを渡す意味でも、設定するほうが親切だと思います。
まず、お問い合わせのコンタクトフォームをクリックします。
コンタクトフォーム1をクリック。
メールタブをクリックします。
メール（2）にチェックを入れます。
チェックを入れると画面が更に展開されます。
以下のように、送信者に届く内容を任意で設定し保存します。
※一部情報を隠してします。
これで、自動返信の設定が完了しました。
修正とカスタマイズ
表示の修正
Luxeritasのみかはわかりませんが、スマホで問い合わせフォームを表示した時に、入力欄が右にはみ出てしまう症状がでていました。
以下の画像のような状態です。
この症状を修正していきます。
「コンタクトフォーム1」を開き、cssで修正するためにクラスを付加します。
以下が変更前の状態です。
変更後が以下になります。
それぞれの要素の最後に、「class:cf7」を追記した状態です。
この状態で保存しましょう。
あとは、style.cssに以下の内容を追記してUPします。
筆者の場合は、FTPソフトを使用しているのでローカルで編集をしてFTPソフトで子テーマのディレクトリに直接UPしています。
貼り付けるソースは以下になります。
/*コンタクトフォーム7 プラグインのフォーム調整*/
input.cf7 { width: 100%; }
textarea.cf7 { width: 100%; }Luxeritas の「子テーマの編集」でも同様のことができます。
以下の様にstlye.cssに追記して保存すればOKです。
※初心者の方は最後尾に追記するようにしましょう。
保存後にページを確認すると右端のはみ出しが無くなりました。
以上で修正は完了です。
カスタマイズ
完成した「お問い合わせページ」を見て気づいたことはないでしょうか？
そう、作成日時が表示されています。
記事であれば良いのですが、お問い合わせページに作成日時が表示されるのはかっこ悪いので、削除しようと思います。
先の修正と同じように、style.cssに以下のソースを貼り付けて追記し、保存します。
/* 固定ページの更新日時を非表示*/
.page .meta .fa-clock,
.page .meta .fa-redo-alt,
.page .meta .date {
display: none;
}上記ソースを使用する場合は、Luxeritasのカスタマイズの「Font Awesome」の設定で、「Font Awesome5」を選択している必要があります。
再度、お問い合わせページをみると、日付は消えてますね。
以上で、カスタマイズは完了です。
まとめ
無料テーマLuxeritas（ルクセリタス）を使用した状況下で、問い合わせフォームをかんたんに設置できるプラグイン「 Contact Form 7 」とその設置方法をご紹介しました。
最低限の項目を設置するだけならとても簡単にできますので、一度試してみてはいかがでしょうか。