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

ひつじ
<景品表示法に基づく表記> 当サイトのコンテンツ内には商品プロモーションを含みます。

contactform7

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

ひつじくん
ひつじくん
このプラグインを使えば、お問い合わせページを簡単に作ることができるよ!
おおかみくん
おおかみくん
・・・お問い合わせなんて必要なのか??

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

そこで今回は「contact form 7」を使って簡単にお問い合わせフォームを作る方法をご紹介しましょう!あわせて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);

}

コンタクトフォームが完成

お問い合わせ

ひつじくん
ひつじくん
デザインが反映されれば完了だよ!

これでお問い合わせページのデザインが完了です!

もしデザインが反映されていない時には、キャッシュ等が残っている可能性がありますので、ページを更新したりキャッシュ削除をして対処してみてください。

まとめ

contactform7

contact form 7の使い方のまとめでした。

インストールするだけでそのまま使えて、デザインもCSSをコピペするだけなのでとっても簡単だったのではないでしょうか?

おおかみくん
おおかみくん
たしかに簡単だった!!俺でもできたし!

お問い合わせページはアフィリエイトサイトを運営するなら作っておくべきですので、このcontact form 7を使って作成されることをオススメします!

ちなみに当サイトのお問い合わせページはこちらですので、作成時には参考程度にしてみてください。

ABOUT ME
記事URLをコピーしました