WordPress お問い合わせフォームのプラグインのいずれかであるQuformは、数値入力フィールド（number field）が提供されません。 数値フィールドを追加したい場合text入力フィールドを追加した後、jQueryを使用してtextプロパティをnumber属性に変更することができます。
WordPress Quformプラグインの数の入力フィールド
WordPress コンタクトフォーム Quformプラグインはまだ数値入力フィールドが提供されません。 代わりに、テキストフィールドを追加し、少しの調整を介して数字のみを入力するようにすることができます。 次は、Quform開発者が提案するXNUMXつの方法があります。
Digits検証を追加する
最初の方法では、フィールドの設定の Advanced（詳細） タブに移動し、「Digits」検証を追加します。 その後、フォームの送信を押すと、そのフィールドに数字以外の値が入力されている場合、エラーメッセージが出力され、フォームが送信されません。
様々な検証を追加し、そのフィールドに入力可能な値を詳細に設定することができます。 右の設定アイコン（車輪のアイコン）をクリックすると、追加の設定が可能です（例えば、空白を許可するかどうか）。 Validatorを使用して入力する値の最小サイズ、最大サイズなど、さまざまな制限を設定することができます。
jQueryを使用してtext型をnumberタイプに変える
フィールドタイプを type = "number" フィールドに切り替えたい場合、簡単なjQueryを使用して 数 タイプに変えることができます。
WordPress 伝言板で Forms> Settings> Custom CSS＆JS タブに移動し、 Custom JavaScript（カスタムジャバスクリプト） セクションで カスタムJavaScript フィールドに以下のコードを追加します。
jQuery(function ($) {
$('.quform-field-1_66').attr('type', 'number');
});上記のコードでは1_66は、そのフィールドの固有のIDに置き換えてください。
この方法でテストしてみると、フィールドの type 属性が テキストから 数に変更されていることを確認することができました。 また、該当するフィールドには、数字のみを入力可能で、スマートフォンなどのモバイル機器で、そのフィールドをタップすると、テンキーが表示され、数字を入力することができます。
複数のフィールドの型属性を 数に変更する場合は、選択者カンマで区切って追加することができます（ "jQuery multiple elements Selector」を参照）。
$('.quform-field-1_1, .quform-field-1_3').attr('type', 'number');
Contact Form 7でnumberの入力フィールドを追加する
numberフィールドは、数値入力のためのフィールドとして、Contact Form 7プラグインの3.4以降のバージョンでは、数値フィールドに 数와 範囲 のXNUMX種類のform-tagをサポートします。
例：
[number* your-number min:10 max:99 step:3 class:required "40"]詳しい使い方は、Contact Form 7の 数値フィールド 文書を参照してみてください。
最後に、
以上で Quformプラグインで数字のみを入力できるようにするフィールドを設定する方法について説明しました。 inputフィールドのタイプ属性をnumberに切り替えしたい場合は、上記提示した方法を利用することができます。 jQueryを活用すると、フィールドの入力値を計算して表示するなど、さまざまな操作が可能です。 例：
jQuery(function ($) {
var calculate = function () {
var total = 0;
// Check the selected option of a select menu
// select 메뉴의 선택된 옵션 체크
var val1 = $('.quform-field-1_3').val();
if (val1 == 'Option 1') {
total += 15;
} else if (val1 == 'Option 2') {
total += 20;
} else if (val1 == 'Option 3') {
total += 25;
}
// Check the selected options of a multi select menu
// 다중 select 메뉴의 선택된 옵션 체크
var val2 = $('.quform-field-1_4').val();
if (val2) {
if ($.inArray('Option 1', val2) > -1) {
total += 40;
}
if ($.inArray('Option 2', val2) > -1) {
total += 80;
}
}
// Check if a checkbox is ticked
// 체크박스가 선택되었는지 확인
if ($('.quform-field-1_5_1').is(':checked')) {
total += 5;
}
// A second checkbox
// 두 번째 체크박스
if ($('.quform-field-1_6_1').is(':checked')) {
total += 105;
}
// A radio button
// 라디오 버튼
var val3 = $('.quform-field-1_7:checked').val();
if (val3 == 'Option 1') {
total += 100;
} else if (val3 == 'Option 2') {
total += 200;
} else if (val3 == 'Option 3') {
total += 250;
}
// A text input field with numeric value
// 숫자값으로 된 텍스트 입력 필드
var val4 = $('.quform-field-1_8').val();
if (val4 && val4.length && $.isNumeric(val4)) {
total += parseFloat(val4);
}
// Display the result to the user (optional)
// 결과를 ユーザー에게 표시 (선택 사항)
$('#form-total').text('Total: $' + total);
// Set the value of the hidden field (optional)
// 숨김 필드의 값 설정 (선택 사항)
$('.quform-field-1_9').val('$' + total).triggerHandler('change');
};
// Calculate on page load
// 페이지 로드 시 계산
calculate();
// Recalculate when these select menus are changed
// 다음 select 메뉴가 변경되는 경우 다시 계산
$('.quform-field-1_3, .quform-field-1_4').on('change', calculate);
// Recalculate when these checkboxes/radio buttons are clicked
// 다음 체크박스/라디오 버튼을 클릭하는 경우 다시 계산
$('.quform-field-1_5, .quform-field-1_6, .quform-field-1_7').on('click', calculate);
// Recalculate when these text input fields are changed
// 다음 텍스트 입력 필드가 변경되는 경우 다시 계산
$('.quform-field-1_8').on('keyup blur', calculate);
});
コメントを残す