2017.11.21

contact form 7の使い方＆CSSのデザインカスタマイズ方法は？

ひつじ

contactform7

簡単にお問い合わせフォームを作れるプラグイン「contact form 7」についてです。

ひつじくん

このプラグインを使えば、お問い合わせページを簡単に作ることができるよ！

おおかみくん

・・・お問い合わせなんて必要なのか？？

サイト作成において、お問い合わせフォームを搭載しておくことはやはり重要です。ユーザーの質問を受け付けたりすることができるのはもちろん、ASPや広告主からの直接依頼をいただけることもあるので、お問い合わせフォームは必ず作っておきたいところですね。

そこで今回は「contact form 7」を使って簡単にお問い合わせフォームを作る方法をご紹介しましょう！あわせてCSSのデザインカスタマイズ方法もお伝えしますので、よろしければご利用ください！

ブログデザインを想いのままに！

Contents

contact form 7のインストール方法
contact form 7の初期設定＆使い方
contact form 7のCSSデザインカスタマイズ
- コンタクトフォームのCSSカスタマイズ
- コンタクトフォームが完成
まとめ

contact form 7のインストール方法

contactform7

WordPress管理画面からプラグイン新規追加

プラグインを新規追加

まずはcontact form 7をインストールするために、WordPress管理画面>プラグイン>新規追加と進んでください。

contact form 7を検索する

プラグインを検索

そして、検索窓で「contact form 7」と入力して、検索をしましょう。そうするとプラグインが見つかるはずです。

contact form 7をインストール

インストール

contact form 7が見つかったら、「今すぐインストール」のボタンを押しましょう。インストールは10秒ほどで完了します。

contact form 7を有効化

有効化

インストールが完了したら、そのまま「有効化」のボタンを押しましょう。

これでcontact form 7は有効化されました…が、もう少しだけ必要な設定を進めていきましょう！！

contact form 7の初期設定＆使い方

contact form 7問い合わせ

ひつじくん

あとは簡単なcontact form7の使い方を説明しておくよ！

contact form7はインストールすると、初期設定不要でそのまま使っていくことが可能です。

お問い合わせフォームの作成方法

お問い合わせフォーム

ではお問い合わせフォームの作成に移りましょう。

WordPress管理画面から「お問い合わせ」>「コンタクトフォーム」と進んでください。そうするとすでに「コンタクトフォーム1」というお問い合わせフォームができていると思いますので、これを選択してすすみましょう。

ショートコードをコピペするだけ！

コピペするだけ

基本的にはこのショートコードをコピペするだけでオッケーです！

この問い合わせが通知されるメールアドレスはWordPressに登録しているものとなりますが、これを変更したいなら、「メール」のタブを開いて「送信先」の項目を変更するようにしましょう。

必要とあらば「url」や「電話番号」の入力場所をタグで作ることができますが、普通のサイトであればそれらは不要でしょう。

コンタクトフォームが出来上がる

コンタクトフォーム

先ほどのコードを記事にコピペするだけで、このようなコンタクトフォームが出来上がります。

とはいっても、ちょっとこのままだと質素な感じがしますよね。

AFFINGER4などのテーマでは最初からコンタクトフォーム用のCSSが入っているので、カスタマイズの必要はないのですが「賢威」等はCSSが用意されていないため、自身でデザインをしないといけません。

contact form 7のCSSデザインカスタマイズ

デザイン

コンタクトフォームのCSSカスタマイズ

先ほどのコンタクトフォームを綺麗にカスタマイズしましょう！

カスタマイズはとっても簡単で、以下のCSSをスタイルシート（賢威の場合はbase.css）の最下部に貼り付けるだけで完了します！

スタイルシートに追加する

/*contact7フォーム*/

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
width: 100%;
padding:10px;
border-radius: 4px;
border: 1px solid #ddd;
}

/*contact7送信ボタン*/

.wpcf7-submit {
width:100%;
padding:15px;
border-radius:10px;
-webkit-border-radius: 10px;  
-moz-border-radius: 10px;
border: none;
box-shadow: 0 3px 0 #ddd;
background: #eee;
transition: 0.3s;
}
 
.wpcf7-submit:hover {
background: #ddd;
transform: translate3d(0px, 3px, 1px);
-webkit-transform: translate3d(0px, 3px, 1px);
-moz-transform: translate3d(0px, 3px, 1px);

}