Contact Form 7 필드 크기 조정하기

워드프레스 플러그인인 Contact Form 7에서 텍스트 필드의 크기를 조정하는 방법으로 두 가지를 살펴보겠습니다.

참고로 무료 문의폼 플러그인인 WPForms Lite를 사용하면 편리하게 레이아웃을 조정할 수 있습니다. "WPForms로 다중 컬럼(2열) 레이아웃 문의 폼 만드는 방법"을 참고해보세요. HTML과 CSS에 익숙한 경우에는 CF7을 사용하여 자유롭게 레이아웃을 조정할 수 있습니다. 초보자인 경우 WPForms가 더 좋은 옵션일 수 있습니다. 보다 다양한 기능을 원하는 경우 Quform과 같은 유료 플러그인도 고려해볼 수 있습니다.

Contact Form 7 필드 크기 조정하기

Contact Form 7 옵션 사용

첫 번째는 "컨택트 폼 편집" 화면에서 직접 크기를 지정하는 방법입니다. 이에 대해서는 Contact Form 7 설명서에 설명되어 있습니다.

Contact Form 7 텍스트 필드 옵션

설명서를 살펴보면 크기는 "size:30"과 같은 형식으로 지정이 가능합니다. 이외에도 id, class 등 다양한 옵션이 지원되므로 보다 정교하게 제어가 필요할 경우 활용하시면 되겠습니다.

참고로 다음과 같이 size:30과 size:50을 넣고 테스트를 해보면:

Contact Form 7 옵션


실제 워드프레스 사이트에서는 다음과 같이 표시됩니다.

Contact Form 7 - 필드 크기

크기를 지정하지 않은 필드의 크기는 어떻게 설정되는지 확인해보니 "size:40"으로 지정되어 있네요.위와 같이 Contact Form 7에서 기본적으로 제공하는 옵션을 통해 크기를 쉽게 조정이 가능합니다.

CSS 사용

어떤 이유로 위의 방법이 잘 되지 않을 경우에는 CSS로 설정이 가능합니다. 제일 위의 화면처럼 각 필드에 contact7-name, contact7-email, contact7-subject를 class로 지정(예: "class:contact7-name")하고 다음 CSS 코드를 테마의 스타일시트에 추가하면:

.contact7-name,
.contact7-email,
.contact7-subject {
width: 50%;
}

다음과 같이 적용됩니다.

Contact Form 7 필드 크기 조정

(워드프레스에서 CSS 코드를 스타일시트에 입력하는 방법은 여기를 참고하시기 바랍니다.)

이상으로 Contact Form 7에서 텍스트 필드의 크기를 조정하는 방법을 살펴보았습니다. 이외의 필드도 마찬가지 방법을 통해 제어가 가능합니다.

추가

Contact Form 7은 무료로 제공되고 문의 기능으로서 강력한 기능을 보여주므로 많은 사용자가 사용하고, 일부 테마에서는 문의 폼을 Contact Form 7을 사용하여 만들어 제공하기도 합니다. HTML과 CSS를 어느 정도 아는 경우 쉽게 커스터마이징이 가능하지만, 그렇지 않은 경우에는 사용이 쉽지 않을 것입니다. 그리고 Contact Form 7을 사용해보니 사이트에 부담을 많이 주는 것 같습니다. 이 점은 이 블로그에서만 확인했기 때문에 다른 사이트에서는 그렇지 않을 수도 있을 것입니다. 또, 어떤 분은 보안상에도 문제가 있을 가능성이 있다는 글을 본 적도 있습니다.

저는 이 CF7을 사용하여 온라인 요청서를 만들었습니다만, 속도가 중요하거나 보다 강력한 기능을 원하거나, 혹은 쉽게 사용하고 쉽게 디자인할 수 있기를 원하는 경우 유료 플러그인을 고려해볼 수 있습니다. 유명한 유료 플러그인으로 Quform이 있습니다. 이 플러그인은 드롭 앤 드롭(Drop & Drop)으로 쉽게 필드를 구성하고, 특히 방문자에게 제출한 문의글을 관리자 페이지에서도 확인할 수 있어 메일 전송 오류로 인해 문의를 받지 못하는 사태를 방지할 수 있습니다. (Contact Form 7의 경우 추가 플러그인을 설치하여 데이터를 DB에 저장할 수 있습니다.)

참고:

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

4개 댓글

  1. [text* your-name placeholder "이름"]

    [tel* your-number placeholder "전화번호"]

    [textarea your-message placeholder "문의내용을 간략히 작성해주세요"]

    이용약관(필수) [checkbox* checkbox-857 "동의"]

    [submit "Send"]

  2. the7테마 사용중인데 콘택트7 폼이 필드 사이즈 조정이 안되네요
    메세지 창이 너무 커서 줄이고 싶은데 방법없을까요?
    알려주신대로 해도 안되네요 ㅠㅠ 그냥 고정입니다 사이즈 자체가

댓글 남기기

* 이메일 주소는 공개되지 않습니다.