【簡単・初心者向き】コンタクトフォーム７（Contact Form 7）のカスタマイズ方法

コンタクトフォーム７（Contact Form 7）は、ワードプレスで定番のお問い合わせなどのメールフォームプラグインです。

このコンタクトフォーム７を簡単なカスタマイズで見栄えを良くする方法をご紹介します。

Contents

コンタクトフォーム７とは

コンタクトフォーム７（Contact Form 7）は、ホームページにお問い合わせなどのフォームを設置するためのワードプレスのプラグインです。お問い合わせフォームを設置するプラグインは他にもありますが、コンタクトフォーム７は日本製ということもあり、使いやすいのでおすすめです。

コンタクトフォーム７の使い方

インストールの仕方は、「プラグイン」＞「新規追加」で「Contact Form 7」と入力し、Contact Form 7が出てきたら、「今すぐインストール」＞「有効化」してください。

ダッシュボードに「お問い合わせ」の項目が増えるので、「お問い合わせ」＞「新規追加」で新しくフォームが作られます。

すでにある程度項目は設定させていますので、ショートコードをコピーしてページの好きなところに貼り付けるだけで簡単にお問い合わせフォームが完成します。

初期設定のままコンタクトフォームを貼り付けるとこんな感じになります。

これでもいいのですが何となく味気ないですね。それをこちらのようにカスタマイズしていきます。

カスタマイズの方法

「お問い合わせ」＞「コンタクトフォーム」または「新規追加」で、コンタクトフォームの編集のHTMLコード部分を以下のコードに書き換えてください（コピペでOKです）。

<table class="contact1">
<tr>
<th><span class="hissu">必須</span>お名前</th>
<td>[text* your-name]</td>
</tr>
<tr>
<th><span class="hissu">必須</span>フリガナ</th>
<td>
[text* your-kana]</td>
</tr>
<tr>
<th><span class="hissu">必須</span>メールアドレス</th>
<td>[email* your-email]</td>
</tr>
<tr>
<th><span class="ninni">任意</span>電話番号</th>
<td>[text your-tel]</td>
</tr>
<tr>
<th><span class="hissu">必須</span>お問い合わせ用件</th>
<td>[text* your-subject]</td>
</tr>
<tr>
<th><span class="hissu">必須</span>お問い合わせ内容</th>
<td>[textarea* your-message]</td>
</tr>
</table>
[submit "送信する"]

お問い合わせ項目が既定のものから追加してあるので、コンタクトフォームの編集上部の「メール」タブをクリックし、返信されてくるメールのメッセージ内容を修正します。

差出人: [your-name] <[your-email]>
題名: [your-subject]

差出人情報
お名前：[your-name]
フリガナ：[your-kana]
メールアドレス：[your-email]
電話番号：[your-tel]
お問い合わせ用件：[your-subject]
お問い合わせ内容：[your-message]

-- 
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

次に追加CSSで見た目を整えます。

ダッシュボード「外観」＞「カスタマイズ」をクリックし、「追加CSS」をクリックして以下のコードを追加してください（こちらもコピペで大丈夫です）。

.hissu{
 display:inline-block;
 font-size:7px;
 padding:3px 5px;
 background:#ff7f50;
 color:#fff;
 margin-right:5px;
}
.ninni{
 display:inline-block;
 font-size:7px;
 padding:3px 5px;
 background:#4682b4;
 color:#fff;
 margin-right:5px;
}

@media(max-width:500px){
	.contact1 input{
		width:100%;
	}
  .contact1 th,.contact1 td {
    display:block;
  }
}

以上でお問い合わせフォームのカスタマイズの完成です。

まとめ

コンタクトフォーム７はとても使いやすいフォームプラグインで、多くのワードプレスのホームページで使われています。

今回のように少しカスタマイズをして、見た目を整えることでホームページのイメージも変わってくると思いますのでおすすめです。