WPForms로 다중 컬럼 레이아웃 문의 폼 만드는 방법
WPForms는 드래그 앤 드롭 방식으로 쉽게 문의 폼을 만들 수 있는 워드프레스 컨택트 폼 플러그인입니다. 이 플러그인은 현재 400만 개가 넘는 사이트에 설치되어 사용되고 있습니다. WPForms 플러그인으로 2열, 3열 등 다중 컬럼 레이아웃 문의 폼을 만들 수 있습니다.
WPForms로 다중 컬럼 레이아웃 문의 폼 만들기 (2열, 3열 등)
WPForms 컨택트 폼 플러그인을 사용하는 경우 필드를 여러 개의 열로 쉽게 표시할 수 있습니다. 참고로 무료 컨택트 폼 플러그인인 Contact Form 7에서는 HTML과 CSS를 사용하여 다중 컬럼 레이아웃(다단 레이아웃)을 만들 수 있습니다.
다음 동영상 튜토리얼에서 다중 컬럼 레이아웃 폼을 만드는 방법이 설명하고 있으니 참고해보시기 바랍니다.
레이아웃 설정을 열려면 빌더에서 임의의 필드를 클릭하여 Field Options 화면을 실행할 수 있습니다. Field Options 화면에서 Advanced Options를 클릭해야 합니다. CSS 클래스 설정을 사용하여 컬럼(열)을 구성할 수 있습니다.
Show Layouts (레이아웃 표시)를 클릭한 다음 원하는 컬럼 레이아웃을 선택하면 CSS 클래스가 자동으로 추가됩니다.
수동으로 CSS 클래스를 추가하는 것도 가능합니다.
- wpforms-one-half
- wpforms-one-third
- wpforms-one-fourth
- wpforms-one-fifth
- wpforms-one-sixth
- wpforms-two-thirds
- wpforms-two-fourths
- wpforms-two-fifths
- wpforms-two-sixths
- wpforms-three-fourths
- wpforms-three-fifths
- wpforms-three-sixths
- wpforms-four-fifths
- wpforms-five-sixths
수동으로 클래스를 넣는 것보다 비주얼 모드로 레이아웃을 선택하는 것이 쉬울 것입니다.
필드의 너비가 작게 표시되는 경우 Advanced Options (고급 옵션) 섹션에서 Field Size (필드 크기) 옵션을 Small, Medium, Large 중에서 선택할 수 있습니다.
필드 크기가 작으면 Medium 대신 Large를 선택해보시기 바랍니다.
다단 레이아웃으로 설정 시 필드를 클릭할 수 없는 문제가 발생하는 경우
다중 컬럼 레이아웃으로 설정하면 필드가 클릭되지 않는 문제가 발생하는 경우가 있습니다. 이 문제는 스타일 충돌 때문에 발생할 수 있습니다.
이 문제가 발생하면 워드프레스 관리자 페이지 > WPForms > Settings > General 탭으로 이동하여 Include Form Styling (양식 스타일링 포함)을 Base and form theme styling (기본 및 양식 테마 스타일링)으로 바꾸면 클릭이 안 되는 현상이 해결될 것입니다.
Include Form Styling 옵션이 Base styling only로 지정되어 있으면 필드를 클릭할 수 없는 문제가 나타난다고 하는 사용자가 있습니다. Base and form theme styling으로 옵션을 변경하여 문제가 해결되는지 테스트해보시고, 문제가 해결되지 않으면 다른 컨택트 폼 플러그인으로 바꾸는 것을 고려해보시기 바랍니다. 저는 Quform 플러그인(유료 플러그인)을 사용하고 있는데, 이 플러그인을 사용하여 다단으로 필드를 표시할 수 있습니다.
마치며
이상으로 WPForms에서 다단 레이아웃 문의 양식을 만드는 방법에 대하여 살펴보았습니다. WPForms는 무료 버전을 사용하여 심플하고 깔끔한 문의폼을 만들 수 있습니다. 사전 제작된 양식 템플릿, 고급 필드, 다중 페이지 양식, 파일 업로드, 스팸 보호, 조건부 로직, 뉴스레터 양식, MailChimp 등 지원, 페이팔/스트라이프 통합, 양식 랜딩 페이지, 대화식 양식, 설문조사 기능 등 고급 기능을 원하는 경우 WPForms 유료 버전을 사용할 수 있습니다.
무료 컨택트 폼 플러그인으로 가장 인기 있는 Contact Form 7은 현재 500만 개가 넘는 사이트에 설치되어 사용되고 있습니다. 이 플러그인은 HTML과 CSS 코드를 아는 경우 커스텀하기에 좋습니다. CF7은 미요시 타카유키(三好 崇之)라는 일본인 개발자에 의해 만들어졌으며, 일본 후지산 그림이 배너 이미지에 사용되었습니다("워드프레스 문의폼 플러그인 Contact Form 7과 후지산").
