カテゴリー: コーディング

WordPressでお問合せフォームといえば、Contact Form 7が有名ですが、
最近はMW WP Formが非常に使い勝手がよく、おすすめです。

主なメリットは以下の点
・確認画面が表示可能
・同一URL・個別URLでの画面変遷が可能
・豊富なバリデーションルール
・問い合わせデータを保存可能

また、郵便番号による住所入力の補完も簡単に実装可能です。
今回はその手順を紹介します。

以下のサイトを参考にさせていただきました。
http://megane-blog.com/2014/08/06/1204

■ajaxzip3を読み込む
head内に下記を記述します。

<script type='text/javascript' src='https://ajaxzip3.github.io/ajaxzip3.js?ver=20140807'></script>

■script実行
name設定が次の場合→郵便番号”zip”、都道府県”area”、市区町村”city”

<script type="text/javascript">
jQuery(function( $ ) {
    jQuery( 'input[name="zip"]' ).keyup( function( e ) {
        AjaxZip3.zip2addr('zip','','area','city');
    } )
	if($('#mw_wp_form_mw-wp-form-xxxx').hasClass('mw_wp_form mw_wp_form_confirm')){
		$(".comments").css('display', 'none');
	}
} );
</script>

■Formのソース

<tr class="address">
<th>郵便番号</th>
<td>[mwform_text name="zip" class="zip" size="40" placeholder="例)123-4557"]</td>
</tr>
<tr>
<th>ご住所</th>
<td>
<p><b>都道府県</b><br />
 [mwform_text name="area" class="area" size="40"]</p>
<p><b>市町村・番地</b><br />
 [mwform_text name="city" class="city" size="40"]</p>
<p><b>建物・部屋番号</b><br />
 [mwform_text name="build" class="build" size="40" placeholder=""]</p>
</td>
</tr>

さらに、MW WP Formには「URL引数を有効にする」オプションもあります。

次回はこのオプションを使ったカスタマイズを紹介します。

自社のサイトリニューアルの際に、メインビジュアルで動画を流すことになったので、
html5のvideoタグと、再生を制御するjavascriptについて解説します。

■HTMLソース

<div id="mainVisual">
  
  <div id="cover"></div>
    <video autoplay id="bgvid">
      <source src="asset/movie/video.mp4" type="video/mp4">
    </video>

</div>
<!-- /mainVisual -->

■css

html, body {
    height: 100%;
}
#mainVisual {
    width: 100%;
    height: 100%;
}
#mainVisual video#bgvid {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
}
#cover {
    background: url(../../asset/movie/cover.jpg) no-repeat;
    background-size: cover;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: 5s;
}
#cover.fade {
    opacity: 0;
}

今回は、動画をフェードインさせる必要があったので、video要素の直前にカバー画像用のdivを作りました。
video自体をjQueryでフェードインさせると、処理が重たくなり再生がスムーズにされなかったので、
フェードイン効果はcss3で実装しています。

■javascript

<script>
$(window).load(function() {
  $('#cover').addClass('fade'); //#coverにクラスを付与
});
$(function() {
        var video = document.getElementById('bgvid');
        //再生位置を秒で設定する
        video.currentTime = 11;
        // 再生速度を変更する
        video.playbackRate = 1;
        // 再生開始
        video.play();
    });
</script>