Quform 컨택트 폼 플러그인, 단계별로 양식을 입력할 수 있는 다중 페이지 기능 추가

이 블로그에서는 워드프레스 컨택트 폼 플러그인 중 하나인 Quform을 오랫동안 사용해 왔습니다. Quform 플러그인은 단계별 양식을 입력할 수 있는 기능과 로직 기능 등이 추가되면서 기능성이 향상되었습니다.

현재 이 블로그의 서비스 문의 페이지가 Quform으로 만들어졌으며, 사용자가 선택하는 항목에 따라 특정 필드를 표시/숨기는 기능이 적용되었습니다. 예를 들어, 문의 페이지에서 사용자가 선택하는 분류 옵션에 따라 표시되는 필드가 다르게 설정되어 있습니다.

[ 이 글은 2022년 6월 16일에 최종 업데이트되었습니다. ]

Quform 컨택트 폼 플러그인, 단계별로 양식을 입력할 수 있는 다중 페이지 기능 추가

Quform이 2017년 9월경에 버전 2로 업데이트되면서 UI(사용자 인터페이스)와 기능이 많이 변경되었습니다. 특히 단계별로 양식을 입력할 수 있는 다중 페이지 기능이 추가되었습니다.

UI를 살펴보면 위의 그림과 같이 필드를 추가할 수 있는 툴바가 상단에 위치해 있습니다((1) 부분). 툴바에서 원하는 필드를 끌어다가 놓거나 클릭하면 필드가 추가됩니다. 이전보다 사용이 편리하게 바뀐 것 같습니다.

그리고 단계별로 입력 항목을 받을 수 있도록 여러 개의 페이지를 만들어서 각 페이지에 원하는 필드를 배치할 수 있는 기능이 추가되었습니다. 아마 이 기능을 요구하는 사용자가 많았던 것 같습니다. 저도 이 기능에 대해 문의한 적이 있는데, 이전 버전에서는 jQuery를 사용하여 단계별로 입력할 수 있는 방법을 안내하고 있었습니다. 하지만 jQuery를 사용하여 구현하기가 쉽지 않았고 생각처럼 깔끔하지 않았습니다.

이외에도 둘러보니 많은 변화가 있네요. 특히 사이트 속도에 영향을 최소화하도록 스크립트를 특정 페이지에서만 로드하도록 하는 기능과 캐시 기능이 추가되었습니다.

워드프레스 관리자 페이지에서 Forms > Settings > Performance를 클릭하면 스크립트를 로드하는 방법을 지정할 수 있습니다. "Only on specific pages"(특정 페이지에서만)를 선택하면 페이지를 선택할 수 있는 옵션이 제공됩니다.

그리고 Combine scripts 기능을 통해 페이지 로딩 속도를 높일 수 있습니다. 또, 서드파티 스크립트를 비활성화할 수 있는 옵션도 제공됩니다.

Font Awesome을 사용하지 않는다면 비활성화하는 것이 좋을 것입니다. 또, 파일 업로드 기능을 사용하지 않는 경우 jQuery File Upload 자바스크립트를 비활성화할 수 있고, Datepicker, Timepicker도 사용하지 않으면 비활성화하면 로딩 속도에 도움이 될 것입니다.

Permissions(권한) 탭에서는 역할(Role)에 따라 플러그인의 각 기능(예: 폼 추가)에 접근할 수 있는 권한을 설정할 수 있습니다.

참고로 이전 버전에서 제공되던 후크(액션/필터)와 클래스는 버전 2에서 일부 변경되었습니다. 변경된 클래스는 다음 표를 참고하세요(참고).

설명	이전 버전 (1.x)	새 버전 (2.x)
Outermost form wrapper (모든 폼)	`.iphorm-outer`	`.quform`
Outermost form wrapper (특정 폼 ID)	`.iphorm-outer-1`	`.quform-1`
<form> 태그 (모든 폼)	`.iphorm`	`.quform-form`
<form> 태그 (특정 폼 ID)	`.iphorm-1`	`.quform-form-1`
Form inner wrapper (모든 폼)	`.iphorm-inner`	`.quform-form-inner`
Form inner wrapper (특정 폼 ID)	`.iphorm-inner-1`	`.quform-form-inner-1`
Wrapper around all elements (모든 폼)	`.iphorm-elements`	`.quform-elements`
Wrapper around all elements (specific form ID)	`.iphorm-elements-1`	`.quform-elements-1`
Element wrapper (모든 폼)	`.iphorm-element-wrap`	`.quform-element`
Element wrapper (특정 요소 ID)	`.iphorm_1_1-element-wrap`	`.quform-element-1_1`
Element wrapper type	`.iphorm-element-wrap-text`	`.quform-element-text`
Element spacer	`.iphorm-element-spacer`	`.quform-spacer`
Element input wrapper	`.iphorm-input-wrap`	`.quform-input`
Element field class (of the same type)	`.iphorm-element-text`	`.quform-field-text`
Element field class (특정 요소 ID)	`.iphorm_1_1`	`.quform-field-1_1`

마치며

워드프레스에서는 무료 컨택트 폼으로 Contact Form 7을 사용할 수 있습니다. 베스트셀링 테마인 아바다를 비롯하여 일부 테마에서는 Contact Form 7을 이용한 Contact 페이지를 데모에서 제공하기도 합니다.

Contact Form 7의 경우 다양한 애드온 플러그인이 있어서 기능을 확장할 수 있습니다. 가령 다중 페이지 기능도 Contact Form 7 Multi-Step Forms이라는 서드파티 플러그인을 사용하면 구현이 가능합니다.

그리고 Contact Form 7에서는 조건부 로직을 구현하려면 외부 플러그인을 추가로 설치해야 하지만 Quform에서는 기본적으로 이 기능이 제공됩니다. ("워드프레스 컨택트 폼에서 조건부 필드 만들기" 참고)

Contact Form 7의 경우 기능을 추가하려면 서드파티 플러그인을 설치하는 방식이라서 아무래도 사이트 성능에 좋지 않은 영향을 미칠 수 있습니다. (기본적인 기능을 이용할 경우 Contact Form 7이 무난한 것 같습니다.)

Quform은 버전 2에서 UI가 이전보다 편리하고 세련되게 업그레이드되었고, 단계별로 양식을 작성할 수 있는 기능과 역할별 퍼미션 지정 외에 다양한 기능이 추가되었고, 페이지 로딩 속도 향상을 위해 서드파티 기능을 비활성화할 수 있는 기능과 캐시 기능 등이 추가되어 이전보다 기능과 성능면에서 향상된 것 같습니다.

Quform 컨택트 폼 플러그인, 단계별로 양식을 입력할 수 있는 다중 페이지 기능 추가

마치며

참고

6 개 댓글

Leave a Comment 응답 취소