Contact Form 7 field size adjusted

Contact Form 7 필드 크기 조정하기

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

Contact Form 7 옵션 사용

첫 번째는 “컨택트 폼 편집” 화면에서 직접 크기를 지정하는 방법입니다. 이에 대해서는 Contact Form 7 설명서에 설명되어 있습니다.
Contact Form 7 Text field options
설명서를 살펴보면 크기는 “size:30“과 같은 형식으로 지정이 가능합니다. 이외에도 id, class 등 다양한 옵션이 지원되므로 보다 정교하게 제어가 필요할 경우 활용하시면 되겠습니다.

참고로 다음과 같이 size:30과 size:50을 넣고 테스트를 해보면:
Contact Form 7 Options
실제 워드프레스 사이트에서는 다음과 같이 표시됩니다.
Contact Form 7 - Field Size
크기를 지정하지 않은 필드의 크기는 어떻게 설정되는지 확인해보니 “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 field size adjusted
(워드프레스에서 CSS 코드를 스타일시트에 입력하는 방법은 여기를 참고하시기 바랍니다.)

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

추가

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

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

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.