Contact Form 7 개요

Contact Form 7은 방문자로부터 질문, 견적 문의 등을 받을 수 있는 워드프레스 폼메일 플러그인입니다. 현재 많은 테마에서 Contact Form 7이 기본적으로 함께 설치하도록 권장하고 있을 만큼 널리 사용되고 있습니다.

Contact Form 7 - 워드프레스 플러그인

이 글에서는 Contact Form 7에서 새로운 폼을 만들어 적용해보는 방법을 살펴보겠습니다.

새로운 필드 추가

Contact Form 7이 설치되면 워드프레스 관리지 페이지(대시보드)에 Contact라는 항목이 생깁니다. Contact > 새로 추가를 선택합니다. (한글화도 잘 되어 있네요.)

Contact Form 7 - 워드프레스 플러그인

그러면 다음 화면과 같이 기본 폼이 표시됩니다.

Default Form - Contact Form 7 워드프레스 폼메일 플러그인

기본 양식을 그대로 사용해도 되지만, 사용자가 원하는 필드를 추가할 수 있습니다. 추가하는 방법은 크게 두 가지를 생각해볼 수 있습니다.

첫 번째 방법 – 폼 버튼 사용

첫 번째 방법은 폼 버튼을 이용하는 것입니다. 예를 들어, 전화번호를 새로 추가하고 싶은 경우 폼 버튼 중에 “text” 또는 “tel” 필드 중 하나를 선택합니다. (tel 타입을 사용하면 지원되지 않는 브라우저에서는 자동으로 text 필드로 바뀐다고 하네요.)

Contact Form 7 새 필드 추가 - 워드프레스

위와 같이 입력할 경우 <p>전화번호<br />…</p>를 수동으로 추가해주면 됩니다. 즉 아래와 비슷하게 코드를 수정하도록 합니다.

Contact Form 7 - 새 필드 추가

두 번째 방법 –  코드를 복사하여 붙여넣기

두 번째 방법은 다른 필드의 코드를 복사하여 아래에 붙여넣기 하는 것입니다. 이 방법은 텍스트 필드를 추가할 때 유용합니다. 다른 필드는 폼 버튼을 눌러서 추가하거나 Contact Form 7 설명서 사이트에서 예시로 나와 있는 코드를 복사하여 수정해도 됩니다(저는 주로 두 번째 방법을 사용하게 되네요). 설명서 사이트는 여기를 방문하시기 바랍니다.

Contact Form 7에서 새로운 필드 추가위의 그림과 같이 다른 필드의 코드를 그대로 복사하여 원하는 위치에 붙여넣고 적절히 수정합니다.

메일 탭 구성하기

새로운 필드를 추가했다면, 사용자가 제출하는 메시지를 받는 양식을 구성해야 합니다. 두 번째 탭인 “메일” 탭을 클릭합니다.

Mail Tab - 워드프레스 Contact Form 7 메일 탭

  1. “To” 섹션에는 사용자가 제출하는 메시지를 수신할 이메일 주소를 기재합니다.
  2. “From” 섹션은 사용자의 문의 이메일의 “보내는 사람” 필드에 표시될 형식을 지정합니다. 위와 같이 수정해도 되고, 기본 설정을 그대로 사용해도 됩니다. (추가: From 섹션에는 해당 도메인의 이메일을 추가하는 것이 좋습니다. 가령, 홈 주소가 example.com인 경우 admin@example.com을 추가할 수 있습니다. 실제로 없는 주소라도 상관 없습니다. 이렇게 하면 알림 메일이 전송되지 않는 문제가 줄어듭니다.)
  3. “제목” 섹션은 말 그대로 전송되는 메시지의 제목입니다. 적절히 수정하도록 합니다.
  4. Message Body는 메일의 본문 형식을 지정할 수 있습니다. 위의 그림에서는 앞에서 추가한 필드를 your-phone 필드가 추가되어 있습니다.

페이지에 숏코드 붙여넣기

이제 “메일” 탭을 구성했다면 숏코드를 복사하여 페이지에 붙여넣기 해야 합니다. 숏코드는 편집 화면에서 제목 바로 아래에 표시되어 있으며, 대시보드에서 “Contact” > “Contact Form”을 눌렀을 때 나타나는 폼 목록에서 원하는 폼의 숏코드[쇼트코드, 단축코드]를 복사할 수 있습니다.

Contact Form 7 숏코드

위의 그림에서 박스로 표시된 부분을 그대로 복사하여 “페이지” > “새 페이지 추가”를 클릭하여 새로운 페이지에 붙여넣거나 기존 페이지에 추가할 수도 있습니다. 브라우저에서 페이지를 로드하면 다음과 같이 문의 양식이 표시됩니다.

Contact Form 7 in action

추가 수정

위와 같은 형식을 그대로 사용해도 되지만, 입력 필드의 길이를 조정하는 등의 작업을 수행할 수 있습니다. 이런 작업을 위해서는 반드시 설명서 페이지를 참고하는 것이 좋습니다.

예를 들어 텍스트 필드에서는 다음과 같은 옵션을 사용할 수 있습니다.

Contact Form 7 text field options위의 옵션을 살펴보면 필드에 크기뿐만 아니라 클래스, ID 등 다양한 옵션을 추가할 수 있습니다. 크기를 조정하려면 size:50과 같은 형식으로 괄호([…]) 안에 추가하면 됩니다.

Contact Form 7 - 필드 크기 지정하지만 아바다와 같은 일부 테마에서는 size 옵션이 작동하지 않을 수 있습니다. 이 경우에는 class나 id를 추가하고 CSS 스타일시트를 통해 필드 크기를 조정해야 합니다. (워드프레스에서 CSS 코드를 스타일시트에 추가하는 방법은 여기를 참고하시기 바랍니다.)

Contact Form 7 클래스 추가 - 워드프레스

위와 같이 class:클래스이름 형식으로 class를 추가할 수 있습니다.

특수 메일 태그

이외에도 Contact Form 7에서는 발신자의 IP 주소 등을 전송할 수 있는 특수 태그도 지원합니다. 자세한 내용은 이 페이지를 참고하시기 바랍니다.

추가 사항

워드프레스 사이트에서 폼 메일을 전송할 경우 간혹 알림 메일을 받지 못하는 경우가 발생할 수 있습니다. 이 문제는 Contact Form 자체의 문제가 아니라 웹호스팅 서버의 문제입니다. 특히 Cafe24 등에서는 스팸 차단 정책 때문인지 메일이 제대로 들어오지 않는다는 불만이 많습니다. 메일 수신량이 많지 않으면 이 글에서 설명하는 방식을 통해 어느 정도 문제를 해결할 수 있습니다.  또 다른 방식으로 Flamingo라는 애드온 플러그인을 설치하여 관리자 페이지에서 문의 메일을 확인하는 방법이 있습니다.

추가: 플러그인 번역

이 글을 작성할 시점에는 Contact Form 7의 UI가 한글이었지만 최근 Contact Form 7의 경우 한국어 사이트에서도 UI가 영어로 표시되네요.

만약 UI를 한국어로 바꾸고 싶은 경우 Loco Translate라는 플러그인이나 Poedit라는 PC 프로그램을 사용하여 언어 파일(po)을 번역할 수 있습니다. 자세한 내용은 “Loco Translate를 사용하여 워드프레스 테마/플러그인 번역하기“를참고해보세요.

참고: