워드프레스 컨택트 폼에서 필드를 2개의 열로 표시하기

2017. 12. 17. 11:08 | 댓글 0

어제 Contact Form 7을 사용하여 2개의 열로 컨택트 폼을 표시하고 각 입력 필드 안에 아이콘을 넣는 작업을 의뢰받았습니다.

Contact Form 7을 사용하여 비교적 쉽게 2개의 열로 표시가 가능하지만(구글에 검색하면 2열로 표시하는 다양한 코드를 찾을 수 있습니다.) 입력 필드 안에 아이콘을 넣으니 필드 크기 조정이 쉽지 않네요. 가령, 브라우저 창 크기를 줄여보면 입력 필드 크기가 변하면서 원하는 형태로 나오지 않았습니다.

혹시나 해서 워드프레스 유료 컨택트 폼 플러그인 중 하나인 Quform을 가지고 테스트해보니 더 깔끔하고 입력 필드 안에 아이콘을 넣더라도 브라우저 창이 줄어들면서 크기가 흐트러지지 않고 유지되네요.

모바일에서 1열로 표시되도록 반응형에 대해 신경을 쓰지 않아서 좋은 것 같습니다.

우선 테스트로 첫 번째 라인의 두 입력 필드에 아무 아이콘을 넣어서 만들어 보았습니다. 실제로 보면 괜찮게 보이지만 스크린샷을 뜨니까 흐려보이네요.

아래는 Divi 테마의 무료 레이아웃 팩을 응용하여 Quform 컨택트 폼을 추가한 모습니다(데모).

Quform에서는 입력 필드를 2컬럼, 3컬럼 등 여러 컬럼(열)으로 쉽게 표시할 수 있습니다.

참고:

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">