投稿日:2021年4月21日
標題通りです。
色々な申し込みフォームから登録などを行ってますが、項目が多すぎて面倒くさかったりしますよね。。。
作る側として、少しでもユーザーに優しい入力フォームを作ろう! と日々努力しています。
心掛けていることを数点紹介したいと思います。
メニュー
郵便番号から住所自動入力
▲郵便番号を入力してみてください。
都道府県と住所が自動入力されます。
ajaxzip3 というjQueryを使用します。
上記サイトよりダウンロード、もしくはCDNでajaxzip3.jsを読み込みます。
<script src="js/ajaxzip3.js" charset="UTF-8"></script>
▲ダウンロードした場合。
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
▲CDNの場合。
<form>
<p>郵便番号:</p>
<input type="text" size="200" name="zip" onKeyUp="AjaxZip3.zip2addr(this,'','pref','address1');">
都道府県:<select name="pref">
<option value="">選択してください</option>
<option value="北海道">北海道</option>
<!-- 省略 -->
</select>
<p>住所:</p>
<input type="text" size="200" name="address1"></input>
</form>
▲都道府県のname
属性値のpref
と、住所のname
属性値のaddress1
を郵便番号のinput
のonKeyUp
イベントでターゲットにします。
ふりがな自動入力
▲入力してみてください。
ふりがなが自動入力されます。
※ライブ変換が効いているとうまく入力されません。
autoKana というjQueryを使用します。
上記サイトよりダウンロードし、autoKanaを読み込みます。
<script src="js/jquery.autoKana.js" charset="UTF-8"></script>
<form>
<p>お名前:</p>
<input type="text" size="200" id="name" name="name" >
<p>お名前 ふりがな:</p>
<input type="text" size="200" id="kana" name="kana" >
</form>
▲id値を取得しjQueryで処理します。
$(function() {
$.fn.autoKana('#name', '#kana', {katakana: false});
});
▲bodyの閉じタグの手前に上記を記述します。
2行目のautoKana
のオプション、katakana
はfalse
でひらがな。true
でカタカナになります。
おまけ
先日のWP-MembersとAdvanced Custom Fieldを利用した会員登録制サイトの記事。
会員登録時や記事作成中に名前、住所、電話番号など基本的な項目の入力欄が重複するとかなり面倒くさいですよね?
そこで、WP-Membersで入力した内容をデータベースから取得し、Advanced Custom Fieldで作ったフィールドへ自動入力する仕組みを作ってみました。
▼YouTubeへアップした動画です。
jQueryとPHPのソースコードです。
function admin_func()
{
// ▼▼▼ ログインしているユーザーIDを取得
$user_id = get_current_user_id();
echo '<div> id="userId" hidden>' . $user_id . '</div>';
// ▼▼▼ データベース処理を走らす「情報入力」ボタンのJSを読み込み
echo '<script> type="text/javascript" src="' . get_stylesheet_directory_uri() . '/js/user_details.js"></script>';
// ▼▼▼ ボタンのCSS
echo '<link rel="stylesheet" href="' . get_stylesheet_directory_uri() . '/css/user_details.css" />';
}
add_action('admin_head', 'admin_func');
▲functions.phpへログインしているユーザー名を取得するPHPと「情報入力」ボタンを追加するためのフックを追記。
user_details.js
jQuery(function ($) {
if (!($('#post').length)) {
return;
}
var inputBtn = '';
$('#postdivrich').after(inputBtn);
$('#inputBtn').on('click', function () {
var userId = ($('#userId').text()); //フックで追加したタグからユーザーIDを取得
$.ajax({ //ajax処理
data:{'userId':userId}, //userIdをPHPに渡す処理
type: 'post',
url: 'https://xxxx/xxxx/input.php', //データベース処理をするPHP
success: function (val) { //配列から各項目を取得
var companyName = JSON.parse(val)[0][userId];
var userZip = JSON.parse(val)[1][userId];
var userPref = JSON.parse(val)[2][userId];
var userAddress1 = JSON.parse(val)[3][userId];
var userPhone = JSON.parse(val)[4][userId];
var userMail = JSON.parse(val)[5][userId];
//ACFの項目へ
$('#title-prompt-text').text('');
$('#title').val(companyName);
$('#userZip input').val(userZip);
$('#userPref select').val(userPref);
$('#userAddress1 input').val(userAddress1);
$('#userPhone input').val(userPhone);
$('#userMail input').val(userMail);
}
});
});
});
▲ajaxを使いJSのクリックイベントでPHPを走らすようにしました。
PHPから取得した配列から各項目情報を変数に入れます。
input.php
<?php
// ▼▼▼ 初期化
$sqlCompanyName = null;
$sqlZip = null;
$sqlPref = null;
$sqlAddress1 = null;
$sqlPhone = null;
$sqlMail = null;
$resCompanyName = null;
$resZip = null;
$resPref = null;
$resAddress1 = null;
$resPhone = null;
$resMail = null;
$dbh = null;
try {
// ▼▼▼ データベース接続
$dbh = new PDO('mysql:host=サーバー名; dbname=データベース名; charset=utf8', 'ユーザーID', 'パスワード');
// ▼▼▼ テーブルから取得
$sqlCompanyName = "SELECT * FROM wp_usermeta WHERE meta_key='company_name'"; //会社名
$sqlZip = "SELECT * FROM wp_usermeta WHERE meta_key='billing_postcode'"; //郵便番号
$sqlPref = "SELECT * FROM wp_usermeta WHERE meta_key='pref'"; //都道府県
$sqlAddress1 = "SELECT * FROM wp_usermeta WHERE meta_key='billing_address_1'"; //住所1
$sqlPhone = "SELECT * FROM wp_usermeta WHERE meta_key='billing_phone'"; //電話番号
$sqlMail = 'SELECT * FROM wp_users'; //メールアドレス
$resCompanyName = $dbh->query($sqlCompanyName);
$resZip = $dbh->query($sqlZip);
$resPref = $dbh->query($sqlPref);
$resAddress1 = $dbh->query($sqlAddress1);
$resPhone = $dbh->query($sqlPhone);
$resMail = $dbh->query($sqlMail);
// ▼▼▼ 配列初期化
$companyNameArr = [];
$zipArr = [];
$prefArr = [];
$address1Arr = [];
$phoneArr = [];
$mailArr = [];
$userId = filter_input(INPUT_POST, 'userId'); //userIdでフィルタリング
// ▼▼▼ 各項目取得
foreach ($resCompanyName as $value) { //企業名
$userCompanyName = "$value[meta_value]";
$userId = "$value[user_id]";
$companyNameArr[$userId] = $userCompanyName;
}
foreach ($resZip as $value) { //郵便番号
$userZip = "$value[meta_value]";
$userId = "$value[user_id]";
$zipArr[$userId] = $userZip;
}
foreach ($resPref as $value) { //都道府県
$userPref = "$value[meta_value]";
$userId = "$value[user_id]";
$prefArr[$userId] = $userPref;
}
foreach ($resAddress1 as $value) { //住所
$userAddress1 = "$value[meta_value]";
$userId = "$value[user_id]";
$address1Arr[$userId] = $userAddress1;
}
foreach ($resPhone as $value) { //電話番号
$userPhone = "$value[meta_value]";
$userId = "$value[user_id]";
$phoneArr[$userId] = $userPhone;
}
foreach ($resMail as $value) { //メールアドレス
$userMail = "$value[user_email]";
$userId = "$value[ID]";
$mailArr[$userId] = $userMail;
}
$arrResult = [$companyNameArr, $zipArr, $prefArr, $address1Arr, $phoneArr, $mailArr];
echo json_encode($arrResult);
} catch (PDOException $e) { //エラー処理
echo $e->getMessage(); //接続を切る
die();
}
$dbh = null;
▲wp_usermetaというテーブルにWP-Membersで設定したメタキーが入ってます。
メールアドレスだけテーブルが異なるので注意してください。
※項目の数だけforeach
で処理を行いました。色々検証しましたが、もう少しスマートにできると良いですね。。。
冒頭にも書きましたがユーザーが扱いやすいページを作ることに日々努力してます。
今回はバリデートの話には触れませんでしたが、例えば「その他」を選んだ場合、「その他入力欄」を必須項目にするとか、あまり厳格すぎるのも宜しくないと思います。
この辺のサジ加減も学びつつ、より良いUXを追求できたらと思います。
最後まで読んでくださりありがとうございました。
2022年3月9日 追記
先日、郵便番号から住所自動入力のjQuery、YubinBango.jsという後継があることを教えていただきました。
WordPress Plug-In Contact Form 7に実装した話ですが、記事にしたので、こちらも併せてご覧ください。