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

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

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

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

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

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

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

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

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

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

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

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

お問い合わせフォームを設置(旧エディタ)

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

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

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

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

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

ページに挿入

WordPressの新エディタ(ブロックエディタ)でお問い合わせフォームを設置する方法を紹介します。

まずは左上の「＋」をクリックしてブロック一覧から「コンタクトフォーム」ブロックを選択をします。

ブロックをクリックすると記事にフォームが挿入されます。

各部分を選択して右上の歯車アイコンをクリックすると「必須入力項目」のON／OFFなどの切り替えができます。

確認

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

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

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

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

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

当サイトではお問い合わせフォームの見た目を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;
} 

ブロックエディタのコンタクトフォームブロックで設置したコンタクトフォームも上記のCSSで見た目を変えられます。

ただし、送信ボタンは上記のCSSでは適用されません。送信ボタンの文字色、背景色を変更するにはボタンを選択して左上の歯車アイコンをクリックして変更してください。

CSSで送信ボタンの見た目を変える場合

CSSでも送信ボタンの見た目を変更できます。CSSで変更する場合は、ボタンにクラス名を付けて上記のCSSの26行目と35う行のセレクタを以下のように変更ししてください。

/*送信ボタン*/
(クラス名) button{
    border:2px solid gray;
    border-radius:30px;
    background:#ff;
    padding:5px 10px;
    font-size:16px;
}

/*送信ボタン ホバー時*/
(クラス名) button.pushbutton-wide:hover {
    background:#ff6893;
    color:#fff;

※(クラス名)をボタンに付けたクラス名に変更してください。(例：submit-btn)

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

/*送信ボタン ホバー時*/
.submit-btn button.pushbutton-wide:hover {
    background:#ff6893;
    color:#fff;

最後に

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

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

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

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