投稿画面でフォームを作成してショートコードを貼付けるだけの「Jetpack」コンタクトフォームプラグイン

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

WordPressのお問い合わせメールフォーム用のプラグインには Contact Form 7Trust Form など高機能なものが色々ありますが、

今回紹介させていただくJetpack のコンタクトフォームは、記事や固定ページの投稿画面でフォームを作成してショートコードを貼付けて使用するというシンプルなメールフォーム機能です。

Jetpack のインストール

WordPress管理画面より Jetpack を検索するか、以下のページからプラグインファイル一式をダウンロードします。

※WordPress.com との連携が必要となりますが、連携方法は WordPress.com と連携して Jetpack コメントプラグインを設置する方法 の記事で紹介しておりますので参考にしてみてください。


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

Jetpack をインストールすると、記事や固定ページの投稿画面に新しく「お問合わせフォームを追加」ボタンが増えていますのでクリックします。
投稿画面でフォームを作成してショートコードを貼付けるだけの「Jetpack」コンタクトフォームプラグイン

フォーム作成用のウィンドウが開きます。
「フォームビルダー」と「メール通知」の2つのニューがありますので、順番に設定方法を見ていくことにします。
投稿画面でフォームを作成してショートコードを貼付けるだけの「Jetpack」コンタクトフォームプラグイン

フォームビルダー

まずは「フォームビルダー」メニューですが、ここではテキストフォームやドロップダウン(セレクタ)、テキストエリアなどのフォームを組み立てていきます。


不要なフォームは「ー」ボタンをクリックして削除します。
投稿画面でフォームを作成してショートコードを貼付けるだけの「Jetpack」コンタクトフォームプラグイン

新規にフィールドを追加する場合は「新規フィールドを追加」リンクをクリックします。
投稿画面でフォームを作成してショートコードを貼付けるだけの「Jetpack」コンタクトフォームプラグイン

各フィールドの名称や必須条件の編集を行う場合は「編集」リンクをクリックします。
投稿画面でフォームを作成してショートコードを貼付けるだけの「Jetpack」コンタクトフォームプラグイン

例として「ドロップダウン」を追加してみる

試しに「お問い合わせ件名」というフィールドで「ドロップダウン」のフィールドを追加してみます。

ラベルには「お問い合わせ件名」などの名称を入れます。
投稿画面でフォームを作成してショートコードを貼付けるだけの「Jetpack」コンタクトフォームプラグイン

フィールドの種類で「ドロップダウン」を選択します。
投稿画面でフォームを作成してショートコードを貼付けるだけの「Jetpack」コンタクトフォームプラグイン

オプションで選択肢を選べますので、
投稿画面でフォームを作成してショートコードを貼付けるだけの「Jetpack」コンタクトフォームプラグイン

必須にするかどうかを設定した後、「このフィールドを保存」ボタンをクリックするとフィールドが追加されます。
投稿画面でフォームを作成してショートコードを貼付けるだけの「Jetpack」コンタクトフォームプラグイン

メール通知

続いて「メール通知」メニューですが、ここでは問い合わせメールの受信先メールアドレスとメールの件名を設定します。
投稿画面でフォームを作成してショートコードを貼付けるだけの「Jetpack」コンタクトフォームプラグイン

投稿記事にフォームを挿入

作成したメールフォームを投稿記事に挿入するには「このフォームを投稿に追加」ボタンをクリックします。
投稿画面でフォームを作成してショートコードを貼付けるだけの「Jetpack」コンタクトフォームプラグイン

本文内にショートコードが追加され、記事を公開すると、
投稿画面でフォームを作成してショートコードを貼付けるだけの「Jetpack」コンタクトフォームプラグイン

フロント画面にお問い合わせメールフォームが表示されます。
投稿画面でフォームを作成してショートコードを貼付けるだけの「Jetpack」コンタクトフォームプラグイン

ラベルやボタンなどのデザインは、CSS である程度補正できます。

企業サイトの問い合わせフォームとしては機能面で物足りない感はありますが、ブログにシンプルな問い合わせフォームを付けたい!ということであれば、固定ページ上でフォームを作成できるJetpack のコンタクトフォームは便利かなと思います。

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

この投稿と関連する記事一覧

この記事に関するコメント

コメントを残す