
ブログやホームページを開設したらお問い合わせページを作成しましょう。お客様からのお問い合わせや、アドセンスの申請でも必要になってきます。
ちなみに今回紹介するのはブロガー向けの簡単なお問い合わせフォームになります。企業などのお問い合わせフォームに関しては、もう少し凝った方が良いかもしれません。
お問い合わせフォームの作成
今回は「Contact Form 7」というプラグインになります。お問い合わせフォーム作成プラグインでは有名で、多くの方がこのプラグインで作成しています。
お問い合わせフォームの項目としてはこの四つになりますが、カスタマイズもできるので、自分の好きな項目を入力することが可能です。
- お名前
- メールアドレス
- 題名
- お問い合わせ内容
作成方法を解説

管理画面から「プラグイン」→「新規追加」から「Contact Form 7」と入力。出てきたら「今すぐインストール」をクリックします。

インストールすると管理画面左に「お問い合わせ」という項目が出てくるので、クリックするとContact Form 7のページに。すでに「コンタクトフォーム1」という項目があるので、それをクリックします。

このフォームの名前を決めます。デフォルトでは「コンタクトフォーム1」となっていますが、別にそのままでも構いません。私は「お問い合わせ」に変更しています。
ますはフォームの編集から。といってもデフォルトで写真のような氏名・メールアドレスなどが入力されているので、このままでも全然使えます。
ちなみにこのまま使うとこんな感じになります。

これでよければこのまま使っても大丈夫です。そのままでよければ右上の「保存」をクリック。青い部分に書かれたコードを全てコピーします。

固定ページから「お問い合わせ」を作成。「HTMLを編集」というブロックを選択し、その中に先程コピーしたコードを入力します。
後はパーマリンクなどを設定したら「公開」をクリック。これで一通りの設定が完了しました。
ちなみに先程の感じだと左に寄っていたり、テキストエリアの大きさがばらばらだったりと見栄えが悪いので、少しカスタマイズしていこうと思います。それは後程解説。
編集方法
何か追加したい時や編集したい時は、フォーム上にある「テキスト」や「メールアドレス」の項目を使います。
例えば上の「テキスト」というボタンをクリックすると、このような画面が出てきます。これは氏名や題名などの一行のテキスト項目を作りたい時に使用します。

まずは一番上の項目タイプ。必須にチェックを入れれば、お問い合わせフォームで何かを入力しないと送信できないようになります。その時は入力してくださいという表示が出ます。
名前はそのままでも変えても大丈夫です。
デフォルト値は、入力しておけば、お問い合わせフォームを入力する時に、すでにデフォルト値に登録されている文字が入力された状態になります。
その下にある「このテキストを項目のプレイスホルダーとして使用する」にチェックをいれると、項目に薄い字ですでに入力された状態になります。
デフォルト値と違って文字を入力し始めると消えるので、状況次第でどちらか選ぶといいでしょう。
その下のAkismetという項目。これはアンチコメントやスパムメールを除外してくれる機能になります。ただ設定に関してはAkismetプラグインを導入しないといけないなど…少しややこしいので、詳しくは調べてみて下さい。
ID属性やクラス属性は、細かくカスタマイズしたい時に使います。この後ちょっとカスタマイズするので、詳しく解説していきます。
設定が完了したら「タグを挿入」をクリック。するとカーソルがある場所に[○○]が挿入されます。
見た目をカスタマイズ
先程の感じではちょっと…という方に向けてカスタマイズしていきたいと思います。ちなみに完成形はこちら。

変更した部分は…
- 入力ボックスの幅を画面幅いっぱい
- ボックスと文字の間隔を広げる
- 送信ボタンのカスタマイズ
input {
width: 100%;
margin-bottom: 10px;
}
textarea {
width: 100%;
}
.submit-1 {
width: 200px;
height: 50px;
cursor: pointer;
background-color: #1B224C;
color: #FFFFFF;
border-radius: 10px;
display: block;
text-align: center;
font-size: 16px;
font-weight: bold;
margin: 48px auto 0 auto;
}
input[type=submit] {
-webkit-appearance: none;
border-radius: 0;
}

inputが一行入力のボックスになります。widthを100%にしているので、スマホでもパソコンでも画面幅いっぱいに広がります。
その下のtextareaは複数行ボックスになります。お問い合わせ内容のボックスの部分ですね。そこもinputと同じく画面幅いっぱいにするコードです。
その下のsubmit-1ですが、ここだけはお問い合わせフォームの編集部分で入力してもらいたい項目になります。

フォーム画面ではこのような形になります。

一番下のinput[type=submit]ですが、これはiPhone等でボタンの周りが勝手に丸くなるのを防ぐコードになります。別に気にしなければそのままでもいいんですけどね。
プラグイン | 主な機能 |
---|---|
backWPUp | 自動でバックアップ |
Yoast Duplicate Post | 記事の複製&再投稿 |
Google XML Sitemaps | サイトマップの作成 |
SEO SIMPLE PACK | インデックス等の設定 |
Custom Taxonomy Order | タグの並び替え |
Optimize Database after Deleting Revisions | リビジョンの最適化 |
codoc | noteのような有料記事の作成 |
Admin Columns | 管理画面のカスタマイズ |
関連記事

コメント