Quform - 워드프레스 양식 빌더

워드프레스 프리미엄 폼 빌더 – Quform

워드프레스에서는 Contact Form 7, Visual Form Builder 등 다양한 무료 폼 빌더를 이용할 수 있습니다. Quform은 유료 폼 빌더로서 별다른 설정 없이 깔끔한 레이아웃을 얻을 수 있습니다. 특히 Quform의 경우 사용자가 웹사이트를 통해 제출한 메시지가 관리자 페이지에서 확인할 수 있어 이메일로 알림을 받지 못하는 경우에도 메시지가 소실될 위험이 줄어듭니다.

Quform - 워드프레스 양식 빌더

Quform은 codecanyon에서 구입할 수 있습니다.

Quform은 드래그 & 드롭 방식으로 필드를 이동시켜 문의 폼(Contac Form)을 완성할 수 있어 사용이 매우 쉽습니다.

Quform - 새로운 문의 폼 만들기

위의 그림과 같이 오른쪽의 필드를 끌어다가 왼쪽에 놓으면 필드가 추가됩니다. 사용 가능한 필드로는 …

  • Single Line Text (텍스트 입력 필드)
  • Paragraph Text (Textarea 필드)
  • Email Address (이메일 주소)
  • Dropdown Menu (드롭다운 메뉴)
  • Checkboxes (체크박스)
  • Multiple Choice (다중 선택)
  • Captcha (보안 문자)
  • Group (그룹)

이외에 위의 그림의 오른쪽에서 “More”를 클릭하면 추가로 “파일 업로드”, “reCAPTCHA”, “HTML” 등의 항목을 선택할 수 있습니다.

More fields in Quform

필드를 왼쪽으로 드래그한 후에 “Settings“를 클릭하면 아래와 같이 개별 필드의 설정을 지정할 수 있는 창이 실행됩니다.

Quform Settings

Advanced를 클릭하여 레이아웃을 세부적으로 조정할 수 있습니다.

Quform Advanced Settings

Add a style에서 레이아웃 지정을 원하는 요소(Outer wrapper, Label, Inner wrapper, Text input, Descript)을 추가하여 개별적으로 CSS를 추가할 수 있습니다. CSS는 각 라인마다 세미콜론(;)을 추가하여 구분해줍니다. 가령 위와 같은 CSS 코드를 추가하면 다음과 같이 필드가 2열로 표시됩니다.

Quform Sample - 2 columns

이와 같이 CSS를 조금 알면 보다 효과적으로 문의 양식을 구성할 수 있습니다.

Quform에서는 미리 지정된 스타일도 제공합니다.

Quform Preset Theme

폼 만들기 화면에서 “Settings” > “Style“로 이동한 다음 Theme에서 원하는 테마를 선택하면 됩니다. 예를 들어, iPhorm Dark를 선택해보면 아래 그림과 같이 블랙 테마로 폼이 표시됩니다.

Quform Black Theme

위의 스크린샷은 모바일 화면에서의 모양입니다. (양식을 만들면서 Preview를 누르면 양식이 어떤 모양으로 나타날지를 미리 볼 수 있습니다.)

Quform에서는 다양한 설정을 제공하므로 각 설정을 테스트하면서 원하는 레이아웃으로 조정하시면 될 것 같습니다.

참고:

 



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.