워드프레스 폼메일 플러그인 Contact Form 7 사용법

Contact Form 7 개요

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를 사용하여 워드프레스 테마/플러그인 번역하기“를참고해보세요.

참고:

31 thoughts on “워드프레스 폼메일 플러그인 Contact Form 7 사용법”

  1. 처음엔 저 그림이 무언가 했어요
    플러그인에서 보면서 이 산이 무얼 말하는지 처음엔 몰랐어요
    그러다 옆에 사람들 뒷 모습을 보면서 감이 왔어요
    그리고 제작자 이름을 보면서 확신했어요
    후지산이군요
    후지산을 보는 사람들이고요

    이 플러그인을 지우고 WPForms을 설치했어요
    날 욕하지마요

    응답
    • 안녕하세요, 이동삼님. Contact Form 7은 미요시 타카유키라는 일본인이 만든 컨택트 폼 플러그인입니다. 아마 일본의 상징을 세계 사람들에게 알리고 싶어서 후지산 그림을 배너로 사용한 것 같습니다. Contact Form 7은 무료이고 많이 사용되지만 그리 바람직하지 않은 플러그인일 수 있습니다. 사이트 속도에 부정적일 수 있고, 그리고 무엇보다 보안 문제가 자주 발견됩니다. 그러므로 이 플러그인을 사용하는 경우에는 항상 최신 버전을 사용하는 것이 보안상 안전합니다. WPForms가 좋은 대안일 수 있습니다. WPForms가 속도면에서 더 유리하다는 의견도 있습니다. 그리고 사용도 편리하고요.

      응답
  2. 컨택폼에 좌측에는 이름이나 전화번호 이메일 넣고 바로 옆인 우측에 메세지넣는 칸을 넣고싶은데 어디서 변경하는건가요?

    응답
    • 컨택트 폼 7에서는 HTML과 CSS를 사용하여 원하는 대로 컨택트 폼을 만들 수 있습니다.

      HTML과 CSS로 레이아웃을 조정해보시기 바랍니다.

      응답
  3. 안녕하세요, 혹시 메일받는 주소를 2개 이상 설정할수 있을까요? 실험해보면 마지막껄로 메일이 오더라구요..ㅠㅠ 동시에 다른 메일도 받을수 있을까요?

    응답
  4. 안녕하세요, 질문 있어 글 남깁니다.
    사용해보니 기본 셋팅은 빈칸에 문의사항을 적고 보내기 버튼을 누르면
    정해져있는 문구로 보내기가 완료되었다고 뜹니다.

    이 방법 말고 보내기 버튼을 누르면 화면을 다른곳으로 넘길 수 있는 방법은 없을까요? 예를들면 작은 팝업창이 뜨며 “성공적으로 전송되었습니다” 라는 메세지와 확인버튼이 뜨고 버튼을 누르면 메인화면으로 자동 이동되는 방법이요…

    응답
  5. 아뇨 전체적으로 기본언어 사용하기(대한민국)이 안나와서 모든것이 영어로 나와서요 ^^; 워드프레스 설정 일반에도 한국어로 설정이 되있는데 왜 이 플러그인은 이런지.. ㅠㅠ

    응답
    • 안녕햐세요?

      블로그를 방문해주셔서 감사합니다. 책은 지면이 제한되어 있으므로 중요한 부분만 언급하고 넘어가지 않을까 생각됩니다.

      응답
  6. 질문 하나 드려도 될까요?

    제조사: 현대/기아/르노/쌍용
    배기량: 1,000이하/1,300이하/1,500이하/~~
    색상: 흰색/검정/은색/빨강
    ~
    ~

    일반적으로 쇼핑몰에서 이런식의 조합을 통해 최종 선택을 하면 가격이 나오는 폼이 있는데, 이런것도 컨택폼7으로 가능한가요? 아니면 다른 방법이 있을까요? 자료는 가능하다면 엑셀로 올릴려고 합니다.

    감사합니다…

    응답
  7. 안녕하세요..!

    워드프레스를 배우고 있는데요 문의하기에서 메일을 저에게 보냈는데
    메일이 안오는거같아요.
    TO. 에 제메일을 잘썼는데..
    왜이럴까요. 여러번시도해봤는데 계속 안오네요 ㅜㅜ

    도와주세요

    응답

Leave a Comment