Quform 문의폼 선택 필드에서 선택 옵션 개수 제한하기

0

Quform은 유료 워드프레스 문의폼 플러그인으로 이 블로그에도 적용되어 있습니다. 슬림하면서도 강력한 기능을 제공하며 가벼워서 속도면에서 괜찮은 것 같습니다. 문의폼 다중 선택 필드에서 사용자가 선택 가능한 옵션 개수를 제한해야 하는 상황이 있습니다. 이 경우 자바스크립트로 선택 가능한 항목 개수를 제한할 수 있습니다.

Quform 문의폼 선택 필드에서 선택 옵션 개수 제한하기

Quform 문의폼 다중 선택 필드에서 선택 옵션 개수 제한하기

다중 선택 필드에서 선택 가능한 옵션 개수를 제한하는 기능을 제공하는 컨택트 폼 플러그인은 거의 없는 것 같습니다. WPForms, Fluent Forms, Ninja Forms, Forminator 등 몇 가지 인기 문의폼 플러그인을 체크해보니 모두 이 기능은 제공되지 않네요.

Quform에서 선택 필드에서 사용자가 선택할 수 있는 최대 개수를 제한하고 싶은 경우 Quform에서 다음과 같은 jQuery 코드를 제시하고 있습니다.

jQuery(function ($) {
    $('.quform-field-1_3').on('change', function () {
        var $this = $(this),
            value = $this.val();
 
        if (value !== null && value.length > 2) {
            $this.val(this.lastValidValue || null).trigger('change');
        } else {
            this.lastValidValue = value;
        }
    }).trigger('change');
});
  • 위에서 라인 2의 1_3은 다중 선택 필드의 고유한 ID로 대체합니다.
  • 라인 6의 숫자 '2'는 선택 가능한 최대 숫자로 교체합니다.

저는 상기 코드가 잘 작동하지 않는 것 같아서 위의 코드를 응용하여 다음과 같이 코드를 수정했습니다.

document.addEventListener('DOMContentLoaded', function () {
    // 1) 최대 허용 개수
    const MAX = 10;

    // 2) 대상 체크박스 셀렉터 (구조에 맞춰 name으로 고정)
    const BOX = 'input[type="checkbox"][name="quform_1_3[]"]';

    // 3) 변경될 때마다 개수 체크
    document.addEventListener('change', function (e) {
        const t = e.target;
        if (!t.matches(BOX)) return;

        // 같은 그룹 안의 체크된 개수 계산
        const container = t.closest('.quform-element-1_3') || document;
        const checkedCount = container.querySelectorAll(BOX + ':checked').length;

        // 10개 초과 시 방금 변경한 항목을 되돌리고 경고
        if (checkedCount > MAX) {
            t.checked = false;
            alert('You can select up to 10 compaines');
        }
    });
});

상기와 같은 코드를 적용하면 최대 10개까지 선택이 가능합니다. 10개를 초과할 경우 경고 창이 표시됩니다.

Quform 선택 필드 경고

경고 문구는 원하는 대로 수정하시기 바랍니다.

상기 자바스크립트 코드는 최신 Quform 버전에서 잘 작동할 것입니다.

자바스크립트 코드 추가하기

JS 코드는 여러 가지 방법으로 추가할 수 있습니다. Quform의 경우 사이트 속도에 대한 영향을 최소화하도록 커스텀 JS/CSS를 추가할 수 있는 기능을 제공합니다.

Forms » Settings » Custom CSS & JS로 이동하여 Custom Javascript 섹션에 추가합니다.

다른 방법을 WPCode와 같은 플러그인을 사용하여 JS 코드를 추가할 수 있지만, 그리 권장하지는 않습니다.

참고로 Forminator 플러그인의 선택 필드에서는 계산에 활용할 수 있도록 각 옵션에 대하여 숫자 값을 지정할 수 있습니다. 해당 값은 사용자에게 보이지 않고 코딩을 통해 계산을 해야 하는 경우 유용할 것 같습니다.

워드프레스 Forminator 문의 플러그인 선택 필드 계산 값 설정하기

마치며

이상으로 Quform 선택 필드에서 사용자가 선택할 수 있는 옵션 개수를 제한하는 방법에 대하여 살펴보았습니다.

WPForms나 다른 컨택트 폼 플러그인을 사용하는 경우 비슷한 방식으로 접근할 수 있습니다. 자바스크립트를 사용하여 선택 가능한 개수를 제한할 수 있을 것입니다.

Quform의 경우 서버 레벨에서도 선택 가능한 개수를 제한하는 코드를 추가할 수 있습니다.

add_filter('quform_element_valid_1_3', function ($valid, $value, Quform_Element_Multiselect $element) {
    if (is_array($value) && count($value) > 2) {
        $element->addError('You can choose upto two options');
        $valid = false;
    }
 
    return $valid;
}, 10, 3);

이 코드는 Quform에서 제시되는 코드이며 실제로 잘 작동하는지 여부는 확인하지 않았습니다. 폼을 제출하려고 시도할 때 유효성 검사를 하면서 경고 메시지를 출력할 것으로 보입니다. 잘 작동하지 않으면 위의 코드를 적절히 응용하여 상황에 맞게 수정하시기 바랍니다.

참고

댓글 남기기

댓글 남기기