[コピペでOK！]Contact Form7のデザインを綺麗にカスタマイズ

Contact Form7とは

WebとくにWordPressでブログやサイトを運営していく歳に問い合わせページは必須です。しかし、サンクスページや自動返信メールなどの仕組みがある問い合わせを作成しようとすると、Webの専門的な知識とスキル、または有料のサービスを申し込まないと難しいです。

しかし、WordPressのプラグインであるContact Form7を利用すれば、初心者の方でも「無料」で「簡単」にお問い合わせフォームを作成出来ます。

Contact Form7の設定方法は別の記事を参考にして頂ければと思います。

簡単に設置できるContact Form7ですが、そのまま使うとなんだか見た目が格好悪く今時ではありません。
折角簡単に設置できるのに見た目が悪いというのは非常にもったいないです。

今の時代、UI/UXは非常に重要でこれは製品だけではなくこういった些細なところにも関係してきます。
そこで今回は、コピペでできるデザインカスタマイズをご紹介します。

と言いましても、既に公開しているIN The COM様のサイトをほぼ参考にしています。非常に便利かつ有用でしたのでご紹介させていただきます。

デザインカスタマイズコード〜ほぼコピペでできる〜

早速コードの紹介をします。このコードを用いることで以下のことが実現出来ます。

・無料なのに企業のようなキレイなフォームができる
・郵便番号入力で自動で住所が入力される(Ajaxコード）
・レスポンシブ対応

コードは、HTMLとCSS、それとHTMLに追加するAjaxのコードがあります。
難しくないので、コピペしてまずはどんな仕上がりになっているか確認しながら実装して行きましょう。
コードは少し長く、解説は後述します。それではコードです↓

<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>

<tr>

<th>必須お名前</th>

<td>[Text* your-name akismet:author watermark"例：山田　太郎"] </td>

</tr>

<tr>

<th>必須メールアドレス</th>

<td>[email* your-email akismet:author_email watermark"例：×××@×××.com"]</td>

</tr>

<tr>

<th>必須郵便番号</th>

<td>[Text* zip id:zip watermark"例：840-0015"] </td>

</tr>

<tr>

<th>必須都道府県</th>

<td>[Text* pref id:pref watermark"例：佐賀県"]</td>

</tr>

<tr>

<th>必須ご住所</th>

<td class="address-100">[Text* addr id:addr watermark"例：佐賀市木原２丁目２５-１０ UTビル２F東号室"]</td>

</tr>

<tr>

<th>必須お電話番号</th>

<td>[Text* text-17 watermark"例：0952-60-6240"]</td>

</tr>

<tr>

<th>必須ご相談内容</th>

<td>[radio radio-256 use_label_element "月額3,000円HP" "月額9,800円HP" "ウェブ広告代行" "その他のご相談"]</td>

</tr>

<tr>

<th>必須メッセージ本文</th>

<td class="message-100">[textarea* your-message watermark"業種・目的・デザインイメージなど"]</td>

</tr>

</table>

[submit class:btn class:btn-success class:btn-lg "送信する"]

次にCSSです。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;
}
}

/***** コンタクトフォーム *****/

.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;

}

そして、郵便番号を入力すると自動で住所が埋まるように次のコードを使います。
記載する場所はhtmlファイル中のheader.phpの中のの最後に記述します。

<!-- 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>