Jetpackのコンタクトフォーム(お問い合わせフォーム)を取り付ける方法

Jetpackの問い合わせフォームを設定してみた

お問い合わせフォームを設置できるプラグインとしては「Contact Form」が有名である。

ただ、お使いのテーマや他のプラグインとの相性が悪かったりすると、スタイルが崩れてしまうこともある。

プラグインに合わせてスタイルを変更するよりも「Jetpack」で用意されているお問い合わせフォームを利用した方が早いかもしれない。

そこで、レポ部では・・・
Jetpackの問い合わせフォームを取り付ける方法
をレポートしたいと思う。
スポンサードリンク

Jetpackのダウンロードとインストール

Jetpackを導入している方はこの項目を無視してもらいたい。

プラグイン > 新規追加 > Jetpackと入力 > 今すぐインストール > 有効化

JetpackはWordPressの中で認知度が高いプラグインの1つである。

Jetpackを使用することでカスタマイズに必要な拡張機能を追加することができる。

  • SNSとの連携(Twitterなど)
  • コンタクトフォーム(お問い合わせフォーム)
  • スペル&文法チェック
  • 一括検索
  • ギャラリー機能
  • WordPress統計情報(アクセス数をページ毎に分析)

コンタクトフォーム(お問い合わせ)以外にも役に立つ拡張機能を揃えているのがJetpackだ。

Jetpackのコンタクトフォームを設定

先ほど導入したJetpackを設定してコンタクトフォーム(お問い合わせ)を編集する。

Jetpack > 設定 > Contact Form > 有効化

Jetpack内のコンタクトフォームを追加

Contact Formの項目を探し出して「有効化」をクリックして欲しい。

固定ページで問い合わせフォームを作成する

固定ページにお問い合わせページを新規に作成する。

固定ページ > 新規追加 > お問い合わせフォームを追加(本文内)

先ほど、Jetpack設定画面で有効化したコンタクトフォームが、固定ページのメニュー欄に追加されているはずだ。

クリックすることで、固定ページの本文内にコンタクトフォームを追加することができる。

固定ページ内のお問い合わせフォーム

コンタクトフォーム(Jetpack)をカスタマイズしてみる

幅いっぱいに広げてみた

デフォルトのコンタクトフォーム(Jetpack)を見栄え良くする為にカスタマイズをしてみる。

ここではコンタクトフォームの各項目の横幅を幅いっぱいに設定することで窮屈さを無くし、入力範囲を広げている。

以下のソースコードをスタイルシートに追加することで設定することができる。

まとめ

いかがだろうか。

コンタクトフォームを追加するプラグインとしては「Contact Form」が有名だが、Jetpackの拡張機能にもコンタクトフォームが用意されている。

Jetpackを元より利用している方は、新たにプラグインを導入するよりも、Jetpackの拡張機能を利用した方が容量を軽量化することができるかもしれない。

他プラグインと「Contact Form」との互換性に悩んでいる方にも使ってほしいプラグインである。