[워드프레스] Contact Form에서 필드를 2열로 표시하기

워드프레스 정보를 제공하는 블로그 Avada 2018. 1. 21. 17:32 • 댓글:

얼마 전에 컨택트 폼에서 2열로 필드를 표시하는 작업을 한 적이 있습니다.

비교적 쉽게 하려면 HTML 테이블을 이용하여 2열을 만들면 되지만, 이 경우 모바일에서는 반응형이 되지 않아서 단점이 있습니다.

Div Table Generator 사이트를 활용하여 2컬럼으로 표시하는 것도 한 방법인 것 같습니다. 예: http://divtable.com/generator/ 

Contact Form 7 플러그인(무료)에서는 문의 양식을 만들 때 HTML 코드로 레이아웃을 짤 수 있습니다. 막코딩에 익숙한 경우 이 방법이 편할 것입니다.

Contact Form에서 필드를 2열로 표시하기 (Quform)

만약 HTML과 CSS에 익숙하지 않으면 Quform 플러그인을 사용해도 괜찮을 것 같습니다.

위의 그림은 Divi 테마에서 제공하는 무료 레이아웃 팩에 Quform 숏코드를 추가하여 컨택트 폼을 만든 것입니다(실제 작동 데모).

별 작업 없이 Quform에서 제공하는 기능만을 사용하면 쉽게 필드를 2열로 표시할 수 있습니다.

다만, 라벨(레이블) 텍스트의 크기나 색상 등은 CSS를 통해 조정해야 할 수 있습니다.

큐폼은 특히 최근 업데이트되면서 특정 페이지에만 로드하도록 하는 기능을 제공하여 사이트에 미치는 영향을 최소화하고 있습니다.

Forms > Settings > Performance에서 When to load scripts/styles(스크립트/스타일을 로드하는 시점) 옵션을 Always(항상), Autodetect(자동 감지), Only on specific pages(특정 페이지에서만) 중에서 선택할 수 있습니다.

Quform은 깔끔하고 군더더기가 없는 컨택트 폼 플러그인 같습니다.

참고: