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

IT・Web

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