スポンサーリンク

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

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

  • 2020年11月30日
    『お問い合わせフォームを設置(ブロックエディタ)』と『見た目をプチカスタマイズ』に「ブロックの場合」を追記しました。
  • 2020年4月19日
    『見た目をプチカスタマイズ』を追記

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

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

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

きらり

きらり

どっちが使いやすいの?
結耶

結耶

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

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

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

スポンサーリンク

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

場所Jetpack 設定

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

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

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

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

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

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

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

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

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

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

① 移動/編集

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

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

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

② 削除

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

③ フィールドの追加

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

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

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

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

ページに挿入

④ このフォームを投稿に追加
フォームの設定が終わったら、左下にある「このフォームを投稿に追加」をクリックするとフォームをページに挿入することができます。
結耶

結耶

これでフォームの設置は完了です。あとは設置したページを公開するだけでOKです。

2020年11月30日 追記

お問い合わせフォームを設置(ブロックエディタ

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

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

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

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

確認

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

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

お問い合わせフォームから送信されたお問い合わせは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;
} 
結耶

結耶

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

2020年11月30日 追記

ブロックエディタの場合

ブロックエディタのコンタクトフォームブロックで設置したコンタクトフォームも上記の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のコメントフォームは簡単に設置できるのでお問い合わせフォームを設置しようとお考えの方はぜひ使ってみてください。

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

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM