【コピペOK】ContactForm7を企業サイトみたいな感じでカスタマイズする方法

 

・Ajax3をGoogleCodeからGitHubに変更しました
・IEでのtableのwidth不具合を修正いたしました

この記事はbootstrap4導入を前提に記載しています。bootstrap4を導入後、お試し下さい。

ContactForm7は言わずと知れたWordPressで1番有名なプラグインです。

カスタマイズしやすいように、まったく装飾がないのもContactForm7の良いところです。

ただカスタマイズを前提にしてあるため、いちいちフォームをデザインするのは面倒になってきました。

今回は日頃からコピーしているチートシートをお披露目します。

最後まで読んでいただくと↓↓↓こんな企業サイトっぽいメールフォームが出来ます。

このフォームのポイント

• 入力しやすいデザイン
• AjaxZipを実装して郵便番号から自動住所入力
• スマホ対応(レスポンシブに対応しています)

html,cssチートシート

まずContactform7をインストールして、html部分に

以下のTextをtextに変換してご使用ください。

<table class="table table-bordered table-striped table-contactform7">
    <tr>
        <th><span class="required-contactform7">必須</span><span class="title-contactform7">お名前</span></th>
        <td>[Text* your-name akismet:author watermark"例：山田　太郎"] </td>
    </tr>
    <tr>
        <th><span class="required-contactform7">必須</span><span class="title-contactform7">メールアドレス</span></th>
        <td>[email* your-email akismet:author_email watermark"例：×××@×××.com"]</td>
    </tr>
    <tr>
        <th><span class="required-contactform7">必須</span><span class="title-contactform7">郵便番号</span></th>
        <td>[Text* zip id:zip watermark"例：840-0015"] </td>
    </tr>
    <tr>
        <th><span class="required-contactform7">必須</span><span class="title-contactform7">都道府県</span></th>
        <td>[Text* pref id:pref watermark"例：佐賀県"]</td>
    </tr>
    <tr>
        <th><span class="required-contactform7">必須</span><span class="title-contactform7">ご住所</span></th>
        <td class="address-100">[Text* addr id:addr watermark"例：佐賀市木原２丁目２５-１０ UTビル２F東号室"]</td>
    </tr>
    <tr>
        <th><span class="required-contactform7">必須</span><span class="title-contactform7">お電話番号</span></th>
        <td>[Text* text-17 watermark"例：0952-60-6240"]</td>
    </tr>
    <tr>
        <th><span class="required-contactform7">必須</span><span class="title-contactform7">ご相談内容</span></th>
        <td>[radio radio-256 use_label_element "月額3,000円HP" "月額9,800円HP" "ウェブ広告代行" "その他のご相談"]</td>
    </tr>
    <tr>
        <th><span class="required-contactform7">必須</span><span class="title-contactform7">メッセージ本文</span></th>
        <td class="message-100">[textarea* your-message watermark"業種・目的・デザインイメージなど"]</td>
    </tr>
</table>
<p class="text-xs-center">[submit class:btn class:btn-success class:btn-lg "送信する"]</p>

そしてstyle.cssに

/***** コンタクトフォーム *****/
.table-contactform7{
  overflow: hidden;
table-layout: fixed;
}

.required-contactform7{
  padding: 5px;
  background: #DE8686;
  color: #fff;
  border-radius: 3px;
  margin-right: 3px;
}

.unrequired-contactform7{
  padding: 5px;
  background: #BDBDBD;
  color: #fff;
  border-radius: 3px;
  margin-right: 3px;
}

.table-contactform7 th{
  font-weight:bold;
}

.table-contactform7 input,
.table-contactform7 textarea{
  max-width: 90% !important;
  margin: 5px 10px 10px 5px;
}

.address-100 input{
  max-width: 90% !important;
  margin: 5px 10px 10px 5px;
}

.message-100 textarea{
  width: 100%;
  margin: 5px 10px 10px 5px;
}

@media screen and (min-width: 900px){
  .table-contactform7 th{
	width:28%;
  }
	}
	
@media screen and (max-width: 900px){
.table-contactform7{
  display:block;
}	  
	  
  .table-contactform7 tbody,
  .table-contactform7 tr{
	display: block;
	width: 100%;
  }
  .table-contactform7 th{
  width:100%;
  display:block;
  margin: 0 auto;
  border:none;
}
.table-contactform7 td{
  display: list-item;
  list-style-type:none;
  margin:0;
  padding:0;
  width: 100%;
  border-top: none !important;
}
}

これでデザインは完成です。

メッセージを受け取るコードは

差出人: [your-name] <[your-email]>
題名: ホームページからのお問い合わせ

お電話番号
[text-17]

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

ご相談内容
[radio-256]

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

こんな感じで。

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>

をheader.phpに挿入します。駄目だったらfooter.phpの＜/body＞直前にいれてみてください。

 

Contact form 7で迷惑メール対策