スポンサーリンク

Jetpackでお問い合わせフォームを設置する方法

2019年6月9日便利なプラグイン

  • 2020年4月19日
    『少し見た目を変える』を追記

30種類の機能を使うことができるプラグイン『Jetpack』。
Jetpackを使えばブログに簡単にお問い合わせフォームを設置することもできます。

お問い合わせフォームを作成、設置できるプラグインはいろいろあります。
その中でも『ContactForm7』が有名です。
ContactForm7も簡単にお問い合わせフォームを作成、設置することができます。

実際私も以前はContactForm7を利用していましたが、Jetpackを導入したのでJetpackのコンタクトフォームに変えました。

きらり
きらり
どっちが使いやすいの?
結耶
結耶
どちらも使いやすいけど…私的にはJetpackの方が使いやすいかな? 届いたお問い合わせがWordPressの管理画面で管理できるし、設置もとっても簡単♪

ということで今回はJetpackを使ってお問い合わせフォームを設置する方法をご紹介します。

※Jetpackをインストールしていない方はこちらをご覧下さい。

スポンサーリンク

コンタクトフォームを有効化する

場所Jetpack 設定

1 コンタクトフォームを有効化するにはJetpackのダッシュボードまたは設定ページを開いてください。

2 ダッシュボードまたは設定画面が表示されたら一番下までスクロールしてください。 一番下までいったら右側にある「デバッグ」をクリック

拡大

3 「デバッグセンター」というページが表示されますので一番下までスクロールし、「使いのサイトで使用可能な Jetpackモジュールの全一覧を表示します」をクリックしてください。

拡大

4 使える機能の一覧が表示されますので「コンタクトフォーム」を探して右側の「有効化」ボタンをクリックしてください。

拡大

お問い合わせフォームを設置

有効化すればコンタクトフォーム機能を使えるようになりますので、今度はお問い合わせフォームを作成、設置していきます。

お問い合わせフォームを作成

お問い合わせフォームは固定ページ、投稿どちらでも設置できます。お問い合わせフォームを設置したいページを開くか新規作成をしてください。(一般的にお問い合わせフォームは固定ページで作成します。)

固定ページ、投稿編集画面の上に「お問い合わせフォームを追加」というボタンがあるのでクリックしてください。

クリックすると下のような画面が表示されます。
必要に応じてフォームを編集してください。

拡大
① 移動/編集

移動/編集ボタンはフィールド(枠)をクリックすると表示されます。

移動
移動ボタンをクリックするとフィールドを移動させることができます。
移動させたいフィールドをドラッグ・アンド・ドロップしてください。

編集
編集ボタンをクリックすると「ラベル」「フィールドの種類」「必須にするか」の編集ができます。
※「フィールドの種類」は「③ フィールドの追加」の項で紹介します。

② 削除

フィールドの横の「-」をクリックするとフィールドを削除することができます。

③ フィールドの追加

フィールドの追加をすることができます。クリックすると右側に編集画面が表示されますので、「ラベル」「フィールドの種類」「必須にするか」の設定ができます。

※フィールドの種類は9種類あります。

フィールドの種類

  • チェックボックス
  • 複数の項目のあるチェックボックス
  • ドロップダウン
  • メールアドレス
  • 名前
  • ラジオボタン
  • テキスト
  • テキストエリア
  • サイト

使用したいフィールドを選択して、「ラベルなどの項目も設定したら「このフィールドを保存」を押すとフィールドを追加できます。

ページに挿入

④ このフォームを投稿に追加
フォームの設定が終わったら、左下にある「このフォームを投稿に追加」をクリックするとフォームをページに挿入することができます。
結耶
結耶
これでフォームの設置は完了です。あとは設置したページを公開するだけでOKです。
スポンサーリンク

確認

ちゃんとお問い合わせフォームが使えるか送信テストをしてみましょう。 送信が完了すると「送信が完了しました。」というメッセージが表示されます。

届いたお問い合わせの確認

お問い合わせフォームから送信されたお問い合わせはWordPressに登録しているメールアドレスに届きます。

また、WordPressの管理画面でも届いたお問い合わせを確認することができます。

場所フィードバック フィードバック

フィードバックではお問い合わせの管理やCSV形式でエクスポートもできパソコンなどに保存することもできます。

きらり
きらり
これならHTMLを知らないボクでもお問い合わせフォームを作れそう!
結耶
結耶
でしょ~♪フィードバックで届いたお問い合わせを管理できるのも便利だよ~(*^^*)

2020年4月20日追記

少し見た目を変える

当サイトではお問い合わせフォームの見た目をCSSで以下のようにしています。参考にどうぞ。

CSS
/*------------------------------
 * コンタクトフォーム
 *-----------------------------*/
/*input(名前、メールアドレス)*/
.contact-form input {
	padding:5px;
	border:2px solid gray;
	font-size:14px;
	background:lightpink;
}

/*本文*/
.contact-form textarea {
	padding:5px;
	border:2px solid gray;
	font-size:14px;
	background:lightpink;
}

/*フィールドにフォーカスしたときに背景色を変更*/
.contact-form input:focus,.contact-form textarea:focus {
      background:#fff;
}

/*送信ボタン*/
.contact-form button.pushbutton-wide {
        border:2px solid gray;
        border-radius:30px;
	background:#ff;
        padding:5px 10px;
        font-size:16px;
}

/*送信ボタン ホバー時*/
.contact-form button.pushbutton-wide:hover {
    background:#ff6893;
    color:#fff;
} 
結耶
結耶

どんな風になっているかは『お問い合わせ』を見てください。

最後に

以前ContactForm7を使っていたとき海外からたくさんのスパムが届きました。
そのときに対策として送信前に確認画面を表示するようにしました。

それだけでたくさんきていたスパムは激的に減りました。

Jetpackのお問い合わせフォームも送信ボタンを押すだけで送信できるため、スパムがくる可能性があります。
もしスパムの対策をすり場合はチェックボックスをつけるだけでもスパムを減らす効果はあります。

とにかくJetpackのコメントフォームは簡単に設置できるのでお問い合わせフォームを設置しようとお考えの方はぜひ使ってみてください。

スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。