Contact Form 7でフリガナ自動入力に対応

 2015/10/27 

 - IT・Web

3008912290_bcbba5268e_b

jquery.autoKana.jsを使って、Contact Form 7での自動カナ入力の実装が簡単にできます。

スポンサーリンク

1. jquery.autoKana.jsをダウンロード

GitHubから「jquery.autoKana.js」をダウンロードします。

スポンサーリンク

2. headタグにコードを追加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_url') ?>/js/jquery.autoKana.js"></script>
<script>
$(document).ready(function(){
$.fn.autoKana('#name', '#kana', {katakana:true});
});
</script>

katakana:trueでカタカナ入力
katakana:falseでひらがな入力
になります。

3. Contact Form 7に記述

以下のように記述します。

お名前:[text name id:name]
ふりがな:[text kana id:kana]

これで完成です。
コンバージョン率もアップすると良いですね。

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

 - IT・Web