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

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

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

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

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

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

コンタクトフォーム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 "送信する"]

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

次に追加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;
  }
}

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

まとめ

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

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

関連記事 Related Articles