• RSS

[WP]ブログに簡易メールフォームを設置するなら「Jetpack コンタクトフォーム」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

WordPress で運用しているブログ内に、ちょっとしたお問い合わせメールフォームを設置したい時に便利な「Jetpack コンタクトフォーム」。

固定ページや投稿記事からお問い合わせメールを作成し、そのショートコードを記事に貼付けるだけの使い方なので簡単にメールフォームを導入することができますし、
また、受信したお問い合わせの一覧は「フィードバック」というメニューで管理画面から確認することができます。

Jetpack のコメントフォームの有効化

管理画面左メニューの「Jetpack」リンクをクリックします。
ブログに簡易メールフォームを設置するなら「Jetpack コンタクトフォーム」

Jetpack プラグインのインストールと設定については、以前に紹介させていただいた↓の記事も合わせて参考にしてみてください。


Jetpack の設定が完了した時点でコンタクトフィームが有効になり、左メニューに「フィードバック」のメニューが追加されるようになります。
ブログに簡易メールフォームを設置するなら「Jetpack コンタクトフォーム」
※フィードバック画面については、本記事の最終章「フィードバック」をご確認願います。


Jetpack コメントフォームの作成

記事投稿画面に「お問い合わせフォームを追加」ボタンが追加されますので、クリックします。
ブログに簡易メールフォームを設置するなら「Jetpack コンタクトフォーム」

「お問い合わせフォーム追加」ウィンドウが表示されますので、「新規フィールドを追加」リンクをクリックします。
ブログに簡易メールフォームを設置するなら「Jetpack コンタクトフォーム」

テキストフォームを設置する場合はフィールドの種類から「テキスト」を選択し、ラベルに文字列を入れ、オプションで「必須項目ですか?」にチェックを入れて「このフィールドを保存」ボタンをクリックします。
ブログに簡易メールフォームを設置するなら「Jetpack コンタクトフォーム」

フィールドの種類には「テキスト」の他にも、「チェックボックス」「ドロップダウン」「メールアドレス」「名前」「ラジオボタン」「テキストエリア」「ウェブサイト」があります。
ブログに簡易メールフォームを設置するなら「Jetpack コンタクトフォーム」

今回は試しに「名前」「メールアドレス」「テキストフォールド」「テキストエリア」の4 つのフィールドを用意しましたが、不要なフィールドは「ー」マークをクリックすることで除去できます。
ブログに簡易メールフォームを設置するなら「Jetpack コンタクトフォーム」

記事本文にフォームを設置

「このフォームを投稿に追加ボタンをクリックすると、
ブログに簡易メールフォームを設置するなら「Jetpack コンタクトフォーム」

記事本文にショートコードが添付されます。
ブログに簡易メールフォームを設置するなら「Jetpack コンタクトフォーム」

※「投稿に追加」とボタンには書かれていますが、もちろん固定ページでも使えます。


フロント画面にフォームを出力

ショートコードを貼付けた状態で記事を「公開」にすると、フロント画面にこのようなフォームが出来上がります。
※今回は、CSSで一部デザイン補正しています。
ブログに簡易メールフォームを設置するなら「Jetpack コンタクトフォーム」

必須項目をスキップすると、ページ更新後にエラーメッセージを表示します。
ブログに簡易メールフォームを設置するなら「Jetpack コンタクトフォーム」

フィードバック

管理画面左メニューの「フィードバック」より、受信したお問い合わせメールの一覧を確認することができ、
ブログに簡易メールフォームを設置するなら「Jetpack コンタクトフォーム」

スパム判定や削除などの操作の他、フィードバックをCSV としてエクスポートすることもできます。
ブログに簡易メールフォームを設置するなら「Jetpack コンタクトフォーム」



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください