워드프레스 Quform 플러그인 숫자 입력 필드

워드프레스 문의폼 플러그인 중 하나인 Quform에는 숫자 입력 필드(number field)가 제공되지 않습니다. 숫자 필드를 추가하고 싶은 경우 text 입력 필드를 추가한 후 jQuery를 사용하여 text 속성을 number 속성으로 변경할 수 있습니다.

워드프레스 Quform 플러그인의 숫자 입력 필드

워드프레스 컨택트 폼 Quform 플러그인에서는 아직까지 숫자 입력 필드가 제공되지 않습니다. 대신 텍스트 필드를 추가한 다음 약간의 조정을 통해 숫자만 입력하도록 할 수 있습니다. 다음은 Quform 개발자가 제안하는 두 가지 방법입니다.

Digits 유효성 검사기 추가하기

첫 번째 방법으로는 필드 설정의 Advanced(고급) 탭으로 이동하여 "Digits" 유효성 검사기를 추가합니다. 그러면 양식 제출을 누르면 해당 필드에 숫자 이외의 값이 입력되어 있으면 오류 메시지가 출력되면서 양식이 제출되지 않습니다.

워드프레스 Quform 플러그인 숫자 입력 필드- 숫자 유효성 검사기

다양한 유효성 검사기를 추가하여 해당 필드에 입력 가능한 값을 상세하게 설정할 수 있습니다. 오른쪽의 설정 아이콘(바퀴 모양의 아이콘)을 클릭하면 추가적인 설정이 가능합니다(예: 공백을 허용할 것인지 여부). Validator를 사용하여 입력하는 값의 최소 크기, 최대 크기 등 여러 가지 제한을 설정할 수 있습니다.

jQuery를 사용하여 text 타입을 number 타입으로 바꾸기

필드 타입을 type="number" 필드로 전환하고 싶은 경우 간단한 jQuery를 사용하여 number 타입으로 바꿀 수 있습니다.

워드프레스 Quform 플러그인 숫자 입력 필드 - text 속성을 number로 전환

워드프레스 알림판에서 Forms > Settings > Custom CSS & JS 탭으로 이동한 다음, Custom JavaScript(커스텀 자바스크립트) 섹션에서 Custom JavaScript 필드에 아래의 코드를 추가합니다.

jQuery(function ($) {
    $('.quform-field-1_66').attr('type', 'number');
});

위의 코드에서 1_66은 해당 필드의 고유한 ID로 대체하시기 바랍니다.

이 방법으로 테스트해보니 필드의 type 속성이 text에서 number로 변경되는 것을 확인할 수 있었습니다. 또한, 해당 필드에는 숫자만 입력 가능하고, 스마트폰 등 모바일 기기에서 해당 필드를 탭하면 숫자 키패드가 표시되면서 숫자를 입력할 수 있습니다.

여러 필드의 타입 속성을 number로 바꾸려는 경우 선택자를 콤마로 구분하여 추가할 수 있습니다("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 이상 버전에서 숫자 필드로 numberrange 등 두 가지 유형의 form-tag를 지원합니다.

예시:

[number* your-number min:10 max:99 step:3 class:required "40"]

자세한 사용법은 Contact Form 7의 Number fields 문서를 참고해보세요.

마치며

이상으로 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);
});

참고


댓글 남기기

* 이메일 주소는 공개되지 않습니다.