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

11 Comments

워드프레스에서는 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에서는 다양한 설정을 제공하므로 각 설정을 테스트하면서 원하는 레이아웃으로 조정하시면 될 것 같습니다.

참고:

 

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

11개 댓글

  1. 좋은정보 감사합니다~^^
    contactform7은 에러메세지를 input박스마다 내맘대로 선택이 안되던데... 혹시 이 Quform플러그인은 그게 가능한가요?
    예를 들어 이름 입력창이랑 전화번호 입력창이 있다고 한다면, 이름부분 메세지는 이름을 입력하세요. 전화번호에는 전화번호를 입력하세요. 라고 다르게 설정할수 있나해서요^^

    응답

  2. 안녕하세요!

    폼빌더 플러그인 "Quform" 과 관련하여 두 가지 정도 질문이 있어서 이렇게 글을 남깁니다.

    1. 보내기(send) 버튼을 눌렀을 경우에 로딩중이라는 표시를 어떻게 변경하나요?
    저는 Please wait 라는 영어 텍스트가 나와서 이 부분을 없애고 싶습니다.

    2.required filed를 채우지 않았을 경우 나타나는 에러메시지의 폰트색을 변경하고 싶습니다.
    현재 에러메시지의 폰트색이 검은색으로 나오고 있는데요, 어디에서 에러메시지 폰트색을 변경해야하나요?

    답변 부탁드립니다.

    응답

    1. 안녕하세요?

      1. 언어 파일(po 파일)을 번역하여 원하는 문구로 바꾸시면 될 것 같습니다.
      Loco Translate라는 플러그인을 사용하거나(https://www.thewordcracker.com/basic/how-translate-wordpress-Po-file-using-loco-translate/ ) Poedit라는 PC용 프로그램을 이용할 수 있습니다.

      2. 폰트색은 CSS로 변경해주셔야 합니다. https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%EC%97%90-css%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EA%B8%B0%EC%B4%88/ 글을 참고해보시기 바랍니다.

      응답

  3. 안녕하세요!

    좋은 글 감사합니다.

    Quform을 저희 웹사이트에도 적용해보았는데요, 두 가지 정도 질문이 있어서 이렇게 글을 남깁니다.

    1. 보내기(send) 버튼을 눌렀을 경우에 로딩중이라는 표시를 어떻게 변경하나요?
    저는 "Please wait" 라는 영어 텍스트가 나와서 이 부분을 없애고 싶습니다.

    2.required filed를 채우지 않았을 경우 나타나는 에러메시지가 표시되지 않습니다.
    field 별로 Optional 에서 Error message if required 항목에 각각의 에러메시지를 입력했는데도 표시가 되지 않네요. (그냥 스크롤이 해당 field로 이동하는 것 뿐입니다.)
    이럴경우 어떻게 해야할까요?

    답변 부탁드립니다.
    감사합니다!

    응답

댓글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다