워드프레스 Quform 플러그인: 필드 계산 양식 만들기

워드프레스 문의 양식에서 사용자가 숫자를 입력하면 자동으로 계산하도록 해야 하는 경우가 있을 수 있습니다. 예를 들어, 고객이 가로, 세로 또는 가로, 세로, 높이 정보를 입력하면 면적이나 부피를 자동으로 계산하여 표시하기를 원할 수 있습니다. 이 경우 자바스크립트(JavaScript)를 사용하여 사용자가 입력한 값을 계산하도록 할 수 있습니다.

워드프레스 Quform 플러그인: 필드 계산 양식 만들기

워드프레스에는 비용 계산 플러그인이 있지만 간단한 계산의 경우 직접 자바스크립트로 만드는 것이 더 편할 수 있습니다.

워드프레스 Quform 플러그인: 비용 계산 양식 만들기

이 글에서는 유료 플러그인인 Quform 플러그인에서 간단한 필드 계산을 하는 방법에 대하여 살펴보겠습니다.

1. 사용자가 가로*세로*높이 값을 입력하면
2. 자동으로 부피 필드에 가로x세로x높이 값이 계산되어 입력됩니다.

최종적으로 다음 영상과 같이 작동하게 됩니다.

먼저 Quform에서 가로, 세로, 높이, 부피 필드를 만들도록 합니다.

부피를 표시하고 싶지 않은 경우에는 hidden 필드로 추가할 수도 있습니다. 또한, 특정 필드 값은 데이터베이스(DB)에 입력되지 않도록 설정하는 것도 가능합니다. 단순히 프런트엔드에서 표시만 하고 값으로 전달받지 않고 싶은 경우에 유용합니다.

여기에서 각 필드의 name 값을 파악합니다. 각 필드의 설정 아이콘(기어 모양의 아이콘)을 클릭합니다.

Advanced 필드에서 고유 ID를 확인합니다. 위의 그림에서는 고유 아이디(Unique ID)가 [**1_11**]입니다. 그러면 이 필드의 name 값은 [**quform_1_11**]입니다.

Forms » Settings » Custom CSS & JS (사용자 정의 CSS 및 JS) 탭으로 이동합니다.

Custom JavaScript( 사용자 정의 자바스크립트) 섹션에 아래에 제시된 자바스크립트 코드를 입력합니다.

자바스크립트 코드:

document.addEventListener("DOMContentLoaded", function() {
  // Get input elements by name
  var input1 = document.querySelector('input[name="quform_1_11"]');
  var input2 = document.querySelector('input[name="quform_1_12"]');
  var input3 = document.querySelector('input[name="quform_1_13"]');
  var resultInput = document.querySelector('input[name="quform_1_14"]');

  // Function to update the result input field
  function updateResult() {
    var val1 = parseFloat(input1.value) || 0;
    var val2 = parseFloat(input2.value) || 0;
    var val3 = parseFloat(input3.value) || 0;
    var result = val1 * val2 * val3;
    resultInput.value = result;
  }

  // Attach event listeners to update the result input field when any input changes
  input1.addEventListener('input', updateResult);
  input2.addEventListener('input', updateResult);
  input3.addEventListener('input', updateResult);
});

name 값을 적절히 변경하도록 합니다. [**resultInput**] 변수 값에 부피가 계산되어 입력됩니다.

이제 적절한 페이지(예: 문의 페이지)에 Quform 블록을 추가하거나 숏코드로 입력하여 큐폼 문의폼을 추가합니다.

숏코드를 입력해도 됩니다. 숏코드는 해당 양식 편집 화면에 표시되고 Forms » Forms에서도 확인이 가능합니다.

엘리멘터 페이지 빌더 등에 추가할 때에는 Quform 엘리먼트가 제공되지 않으면 숏코드로 입력하시기 바랍니다.

이제 문의 양식에서 가로, 세로, 높이 값을 입력하면 부피 필드에 자동으로 계산되어 입력됩니다.

자바스크립트 코드는 예시입니다. 적절히 응용하시기 바랍니다.

[요약*비용 계산 양식이나 필드 계산 양식을 만들고 싶은 경우
1. 컨택트 폼 플러그인(예: Contact Form 7, WPForms, Quform 등)에서 입력 필드(예: 가로, 세로, 높이)와 결과 필드를 만듭니다.
2. 자바스크립트를 사용하여 계산을 하는 코드를 만듭니다.
3. 적절한 방식으로 자바스크립트 코드를 추가합니다.*]

상기 방식으로 필드 계산 양식을 만드는 것에 어려움을 겪는 경우 여기에서 서비스를 요청(유료)하실 수 있습니다.

추가: 결과 필드 값을 사용자가 수정하지 못하도록 하기

계산 결과가 표시되는 필드는 사용자가 수정하지 못하도록 설정하는 것이 좋을 것 같습니다.

Quform에서는 필드를 읽기 전용(Read Only)으로 설정하는 옵션이 제공됩니다.

그러면 input 필드에 readonly 속성이 추가되어 사용자들이 이 필드의 값을 수정할 수 없게 됩니다.

<input type="text" id="quform_1_14_d6115d" name="quform_1_14" class="quform-field quform-field-text quform-field-1_14" readonly="">

다른 컨택트 폼 플러그인을 이용하는 경우:

컨택트 폼 플러그인에서 읽기 전용 필드로 설정하는 옵션이 제공되지 않는 경우 몇 가지 방법을 생각할 수 있습니다.

먼저 CSS로 값을 변경하지 못하도록 할 수 있지만, 이 방법은 쉽게 무력화될 수 있습니다. 예시:

.readonly-appearance {
  pointer-events: none;  /* Disables mouse clicks */
  background-color: #f3f3f3; /* Grey background */
  color: #a3a3a3;  /* Grey text */
}

다른 방법으로 자바스크립트로 input 필드에 readonly 속성을 추가하는 것이 가능합니다.

  // Make the result input readonly
  resultInput.setAttribute('readonly', true);

마치며

이상으로 워드프레스 Quform 컨택트 폼 플러그인을 사용하여 간단한 계산식을 구현하는 방법을 살펴보았습니다. 동일한 방식으로 Contact Form 7이나 WPForms, Forminator 등의 컨택트 폼 플러그인에서도 가능합니다.

참고

https://avada.tistory.com/3105

워드프레스 Quform과 케이보드 연동: 이미지 표시

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/2299

GeneratePress 테마로 워드프레스 블로그 세팅 예시 (How to Customize GP)

https://avada.tistory.com/3119

Divi 테마용 무료 베이커리 레이아웃 팩(Bake Shop Layout Pack) 다운로드