手作りアクセサリーを売りたい! ブログ運営(WordPress)

wordpressの問い合わせフォームをCSSカスタマイズしよう!AFFINGER流

更新日:

Contact Form 7」は、wordpressブログに欠かせない問い合わせメールフォームが作れるwordpress用のプラグインである。

今回はテーマにAFFINGER4を使っている方をメインにお届けできる、Contact Form 7を使ったCSSカスタマイズ方法です。

プラグインの導入方法やお問い合わせフォームの設置方法についての記事はこちらです。

Contact Form 7でお問い合わせフォームを作る

便利なプラグインを手に入れた! スポンサーリンク 目次1 Contact Form 7のプラグインデータ2 Contact Form 7を手に入れる2.1 プラグイン「Contact Form 7」の ...

続きを見る

スポンサーリンク

今回のContact Form 7のカスタマイズ

さて、Contact Form 7をどんな風にカスタマイズできるか、まとめてみました!

カスタマイズポイント

  • PC、スマホに合わせてテーブルデザインが変化するレスポンシブ対応デザイン
  • 郵便番号を入力するだけで、住所を自動入力してくれるAjaxzipを実装
  • スパム自動投稿の防止策としてGoogleの技術「reCAPTCHA」を導入
  • 問い合わせフォーム以外にも、アイデア次第でテーブルCSSとして幅広く使える

Contact Form 7をCSSを使ってこんな風にカスタマイズしちゃうのだ!

まずは説明に移る前に、このContact Form 7のCSSを使ったカスタマイズ方法について参考にさせてもらったブログがあるので感謝の意を込めてここに紹介させていただきます。

 

では、早速、実際のお問い合わせフォームを見てみよう。

これから紹介するContact Form 7を使ったサンプル問い合わせフォームは、PCなら左側、スマホなら右側のような画面になっているはずだ。

contact-form-7-customize1

 

実際のサンプル問い合わせフォームがこちら

ブラウザを縮小すればスマホ用画面に切り替わりますよ。郵便番号を入力したり、reCAPTCHAなど、いろいろいじってみてね。
必須 お名前
必須 メールアドレス
必須 テキストエリア【必須】
必須 テキストエリア【必須なし】
必須 ドロップダウンメニュー【必須】 どれを選ぶ?
必須 チェックボックス【横並び】【1つのみ選択可】 選択1選択2選択3
必須 チェックボックス【横並び】【複数選択可】 選択1選択2選択3
必須 チェックボックス【縦並び】【1つのみ選択可】 選択1選択2選択3
必須 チェックボックス【縦並び】【複数選択可】 選択1選択2選択3
必須 郵便番号
必須 都道府県
必須 ご住所
必須 メッセージ

この内容でよろしければ、チェックを入れてください。

このサンプルフォームから、あなたが使いたい項目やいらない項目をピックアップしてカスタマイズしていきましょう。

 

このサンプル問い合わせフォームのソースコードはこちら

WordPress管理画面

「お問い合わせ」⇒「コンタクトフォーム」を選択、作成した「コンタクトフォームの編集画面」のフォーム欄に、下記コードをコピーして貼り付けましょう。

<table class="respStyle">
<tr>
<th><span class="required-srt">必須</span> <span class="title-srt">お名前</span></th>
<td>[text* your-name akismet:author watermark"例:役弐 立郎"] </td>
</tr>
<tr>
<th><span class="required-srt">必須</span> <span class="title-srt">メールアドレス</span></th>
<td>[email* your-email akismet:author_email watermark"例:×××@×××.com"]</td>
</tr>
<tr>
<th><span class="required-srt">必須</span> <span class="title-srt">テキストエリア【必須】</span></th>
<td>[text* text-1 watermark"コメント入れてください。"]</td>
</tr>
<tr>
<th><span class="unrequired-srt">必須</span> <span class="title-srt">テキストエリア【必須なし】</span></th>
<td>[text text-2 watermark"コメント入れてください。"]</td>
</tr>
<tr>
<th><span class="required-srt">必須</span> <span class="title-srt">ドロップダウンメニュー【必須】</span></th>
<td>どれを選ぶ?[select* menu-1 include_blank "選択1" "選択2" "選択3"]</td>
</tr>
<tr>
<th><span class="required-srt">必須</span> <span class="title-srt">チェックボックス【横並び】【1つのみ選択可】</span></th>
<td>[checkbox* checkbox-1 exclusive "選択1" "選択2" "選択3"]</td>
</tr>
<tr>
<th><span class="required-srt">必須</span> <span class="title-srt">チェックボックス【横並び】【複数選択可】</span></th>
<td>[checkbox* checkbox-2 "選択1" "選択2" "選択3"]</td>
</tr>
<tr>
<th><span class="required-srt">必須</span> <span class="title-srt">チェックボックス【縦並び】【1つのみ選択可】</span></th>
<td>[checkbox* checkbox-3 exclusive class:list-block "選択1" "選択2" "選択3"]</td>
</tr>
<tr>
<th><span class="required-srt">必須</span> <span class="title-srt">チェックボックス【縦並び】【複数選択可】</span></th>
<td>[checkbox* checkbox-4 class:list-block "選択1" "選択2" "選択3"]</td>
</tr>
<tr>
<th><span class="required-srt">必須</span> <span class="title-srt">郵便番号</span></th>
<td>[text* zip id:zip watermark"郵便番号を入力で、住所が自動で入力"] </td>
</tr>
<tr>
<th><span class="required-srt">必須</span> <span class="title-srt">都道府県</span></th>
<td>[text* pref id:pref watermark"例:○○県"]</td>
</tr>
<tr>
<th><span class="required-srt">必須</span> <span class="title-srt">ご住所</span></th>
<td>[text* addr id:addr watermark"例:○○市○○町1丁目2-3 ○○メゾン101号室"]</td>
</tr>
<tr>
<th><span class="required-srt">必須</span> <span class="title-srt">メッセージ</span></th>
<td>[textarea* your-message watermark"ご記入ください。"]</td>
</tr>
</table>
この内容でよろしければ、チェックを入れてください。
<span class="recaptcha">[recaptcha]</span>
[submit class:soushin "送信する"]

 

CSSコードはこちら

WordPress管理画面

「外観」⇒「テーマの編集」を選択して、スタイルシート(style.css)に以下のコードを貼り付けよう。

ボクの場合、プラグイン「カスタムCSS」に設定しています。

子テーマと一緒に使いこなすと便利なSimple Custom CSSのプラグイン

なんと!プラグインの宝箱を拾った。 スポンサーリンク 目次1 Simple Custom CSSをどうして使うのか?1.1 プラグイン「Simple Custom CSS」のインストール&有効化1.1 ...

続きを見る

/* Contact Form 7カスタマイズ */
/* テーブル セル2つ */
@media screen and (max-width: 480px) { /* ▼480:iPhone6+縦 */
.respStyle th, .respStyle td { display:block; }
.respStyle th {
    border-bottom: none;
    padding: 10px 0px 4px 8px;
}
}

.respStyle th {
	text-align: left;
    font-size: 14px;
	color: #333;
}

.respStyle td {
    font-size: 12px;
}

/* 必須ピンク */
.required-srt {
	font-size: 8pt;
	padding: 5px;
	background: #DE8686;
	color: #fff;
	border-radius: 3px;
	margin-right: 3px;
}

/* 必須グレー */
.unrequired-srt {
	font-size: 8pt;
	padding: 5px;
	background: #BDBDBD;
	color: #fff;
	border-radius: 3px;
	margin-right: 3px;
}

/* Contact Form 7のラジオボタンを縦並びに class:list-blockをclass指定する */
.list-block .wpcf7-list-item {
	display: block;
}

.recaptcha { /* recaptchaに余白 */
	margin: -10px 0 20px 0;
}

 

Contact Form 7 受け取りメール編集

Contact Form 7では質問者から送られてくる問い合わせメールの内容をあなた好みに編集して受け取ることができます。

これは、メッセージ本文のサンプル例です。
題名は、テキストエリアを使って質問者に入力した内容を題名にしたり、逆にあなたがチェックボックスで題名を選択させる方法もあります。
様々なウェブサイトのお問い合わせフォームを参考にして、あなたが使いやすいお問い合わせフォームを完成させましょう。

WordPress管理画面

「お問い合わせ」⇒「コンタクトフォーム」を選択、作成した「コンタクトフォームの編集画面」のメール欄で編集します。

差出人: [your-name]  <[your-email]>
題名: お問い合わせテキストエリア【必須】
[text-1]

テキストエリア【必須なし】
[text-2]

ドロップダウンメニュー
[menu-1]

チェックボックス【横並び】【1つのみ選択可】
[checkbox-1]

チェックボックス【横並び】【複数選択可】
[checkbox-2]

チェックボックス【縦並び】【1つのみ選択可】
[checkbox-3]

チェックボックス【縦並び】【複数選択可】
[checkbox-4]

郵便番号/ご住所
[zip][pref][addr]

メッセージ本文:
[your-message]

 

スパム自動投稿の防止「reCAPTCHA」の導入方法

reCAPTCHAの導入方法が分かる記事はこちらです。

ブログの問い合わせフォームからスパムを防止!reCAPTCHAの導入方法

問い合わせフォームから問い合わせをもらう時に、気をつけたいのがスパム攻撃。 今までのスパム対策としては、画像に表示されている文字や数字を入力する方式の画像キャプチャ認証でした。 今回は、Googleの ...

続きを見る

 

住所自動入力できるAjaxzipの実装方法

まずは、このコードをコピーします。

<!-- ajaxzip -->
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<script type="text/javascript">
jQuery(function(){
  jQuery('#zip').keyup(function(event){
    AjaxZip3.zip2addr(this,'','pref','addr');
  })
})
</script>

 

WordPress管理画面

AFFINGER4のテーマの場合、コピーしたコードをAFFINGER4管理画面から設定できます。
「AFFINGER4管理画面」⇒「その他の設定」⇒「上級者向け設定」にある
”headに出力するコード~”の欄に、コピーしたコードを貼り付けてください。

その他のテーマは、Wordpressメニューから「外観」⇒「テーマの編集」を選択したら、
画面右側のテンプレートメニューから、header.phpを探して、そこに貼り付けましょう。

最後に、実際のフォームで郵便番号を記入して、確認してみてください。

これでPCにもスマホにも対応したスマートなテーブルデザインのお問い合わせフォームが導入できるかと思います。

 

この記事が気に入ったら
いいね ! しよう

スポンサーリンク

手作りアクセサリー作ってみたい

1

アクセサリーは一体どういう風に作られているのでしょか? あなたがもしこれから手作りアクセサリーの作り方を知って、 自分のオリジナルアクセサリーを作ってみたい、 そしてゆくゆくは販売もしていきたいと考え ...

2

本格的な手作りアクセサリーを作るには、彫金、銀粘土、ロストワックスの3つの方法で作ることが出来る。 もし、あなたが彼女や彼氏に手作りアクセサリーをプレゼントしたいと考えているならば、一体、3つのうちど ...

3

スタッドピアスには必ずストレートのピンが付いています。 ピアスピンと言ったり、ピアス棒、ピアスポストとも呼ばれるこのピンはどうやってピアスデザインとくっついているのか知っていますか? 通常、デザイン部 ...

4

手作りアクセサリーを作るといっても、プロはその作ったものを販売するという視点から作り方を考えていきます。 趣味で作る場合との大きな違いが、この考え方だと言っても過言ではありません。 今回はそんな商売と ...

5

アクセサリーを作るには、地金から作り出す彫金技法やワックスから作り出すロストワックス法があります。 あなたがもし、彫金やロストワックスをはじめたいと考えているのであれば、アクセサリーを作るために必要な ...

-手作りアクセサリーを売りたい!, ブログ運営(WordPress)
-, , , , ,

Copyright© ピアスマップ , 2017 All Rights Reserved.