Word Cracker의 잡다한 정보 모음

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

2

이 블로그에서는 워드프레스 컨택트 폼 플러그인 중 하나인 Quform을 오랫동안 사용해 왔습니다. 하지만 테마를 변경하면서 현재 테마에 포함된 애드센스 광고 관리자 플러그인과 Quform이 충돌을 일으켜서 부득이하게 Quform을 삭제하고 Google 설문지로 컨택트 폼을 대체했습니다.

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

Related Posts

2 Comments
  1. 김용훈 says

    사이트 관리에 유용한 기능이 추가되었고 군더더기없어서 더욱 좋습니다.

    1. Word says

      네, 군더더기가 없이 필요한 기능만 제공하는 것 같아서 quform을 한 동안 사용했는데, 얼마 전에 플러그인 충돌 때문에 Google Form으로 바꾸었습니다.

      시간이 될 때 업데이트된 버전으로 테스트해보아야겠습니다.

Leave A Reply

Your email address will not be published.