Contact Form 7 개요
Contact Form 7은 방문자로부터 질문, 견적 문의 등을 받을 수 있는 워드프레스 폼메일 플러그인입니다. 현재 많은 테마에서 Contact Form 7이 기본적으로 함께 설치하도록 권장하고 있을 만큼 널리 사용되고 있습니다.
이 글에서는 Contact Form 7에서 새로운 폼을 만들어 적용해보는 방법을 살펴보겠습니다.
워드프레스 폼메일 플러그인 Contact Form 7 사용법
새로운 필드 추가
Contact Form 7이 설치되면 워드프레스 관리지 페이지(대시보드)에 Contact라는 항목이 생깁니다. Contact > 새로 추가를 선택합니다. (한글화도 잘 되어 있네요.)
그러면 다음 화면과 같이 기본 폼이 표시됩니다.
기본 양식을 그대로 사용해도 되지만, 사용자가 원하는 필드를 추가할 수 있습니다. 추가하는 방법은 크게 두 가지를 생각해볼 수 있습니다.
첫 번째 방법 – 폼 버튼 사용
첫 번째 방법은 폼 버튼을 이용하는 것입니다. 예를 들어, 전화번호를 새로 추가하고 싶은 경우 폼 버튼 중에 “text” 또는 “tel” 필드 중 하나를 선택합니다. (tel 타입을 사용하면 지원되지 않는 브라우저에서는 자동으로 text 필드로 바뀐다고 하네요.)
위와 같이 입력할 경우 <p>전화번호<br />…</p>를 수동으로 추가해주면 됩니다. 즉 아래와 비슷하게 코드를 수정하도록 합니다.
두 번째 방법 – 코드를 복사하여 붙여넣기
두 번째 방법은 다른 필드의 코드를 복사하여 아래에 붙여넣기 하는 것입니다. 이 방법은 텍스트 필드를 추가할 때 유용합니다. 다른 필드는 폼 버튼을 눌러서 추가하거나 Contact Form 7 설명서 사이트에서 예시로 나와 있는 코드를 복사하여 수정해도 됩니다(저는 주로 두 번째 방법을 사용하게 되네요). 설명서 사이트는 여기를 방문하시기 바랍니다.
위의 그림과 같이 다른 필드의 코드를 그대로 복사하여 원하는 위치에 붙여넣고 적절히 수정합니다.
메일 탭 구성하기
새로운 필드를 추가했다면, 사용자가 제출하는 메시지를 받는 양식을 구성해야 합니다. 두 번째 탭인 “메일” 탭을 클릭합니다.
- “To” 섹션에는 사용자가 제출하는 메시지를 수신할 이메일 주소를 기재합니다.
- “From” 섹션은 사용자의 문의 이메일의 “보내는 사람” 필드에 표시될 형식을 지정합니다. 위와 같이 수정해도 되고, 기본 설정을 그대로 사용해도 됩니다. (추가: From 섹션에는 해당 도메인의 이메일을 추가하는 것이 좋습니다. 가령, 홈 주소가 example.com인 경우 admin@example.com을 추가할 수 있습니다. 실제로 없는 주소라도 상관 없습니다. 이렇게 하면 알림 메일이 전송되지 않는 문제가 줄어듭니다.)
- “제목” 섹션은 말 그대로 전송되는 메시지의 제목입니다. 적절히 수정하도록 합니다.
- Message Body는 메일의 본문 형식을 지정할 수 있습니다. 위의 그림에서는 앞에서 추가한 필드를 your-phone 필드가 추가되어 있습니다.
페이지에 숏코드 붙여넣기
이제 “메일” 탭을 구성했다면 숏코드를 복사하여 페이지에 붙여넣기 해야 합니다. 숏코드는 편집 화면에서 제목 바로 아래에 표시되어 있으며, 대시보드에서 “Contact” > “Contact Form”을 눌렀을 때 나타나는 폼 목록에서 원하는 폼의 숏코드[쇼트코드, 단축코드]를 복사할 수 있습니다.
위의 그림에서 박스로 표시된 부분을 그대로 복사하여 “페이지” > “새 페이지 추가”를 클릭하여 새로운 페이지에 붙여넣거나 기존 페이지에 추가할 수도 있습니다. 브라우저에서 페이지를 로드하면 다음과 같이 문의 양식이 표시됩니다.
추가 수정
위와 같은 형식을 그대로 사용해도 되지만, 입력 필드의 길이를 조정하는 등의 작업을 수행할 수 있습니다. 이런 작업을 위해서는 반드시 설명서 페이지를 참고하는 것이 좋습니다.
예를 들어 텍스트 필드에서는 다음과 같은 옵션을 사용할 수 있습니다.
위의 옵션을 살펴보면 필드에 크기뿐만 아니라 클래스, ID 등 다양한 옵션을 추가할 수 있습니다. 크기를 조정하려면 size:50과 같은 형식으로 괄호([…]) 안에 추가하면 됩니다.
하지만 아바다와 같은 일부 테마에서는 size 옵션이 작동하지 않을 수 있습니다. 이 경우에는 class나 id를 추가하고 CSS 스타일시트를 통해 필드 크기를 조정해야 합니다. (워드프레스에서 CSS 코드를 스타일시트에 추가하는 방법은 여기를 참고하시기 바랍니다.)
위와 같이 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를 사용하여 워드프레스 테마/플러그인 번역하기“를참고해보세요.
처음엔 저 그림이 무언가 했어요
플러그인에서 보면서 이 산이 무얼 말하는지 처음엔 몰랐어요
그러다 옆에 사람들 뒷 모습을 보면서 감이 왔어요
그리고 제작자 이름을 보면서 확신했어요
후지산이군요
후지산을 보는 사람들이고요
이 플러그인을 지우고 WPForms을 설치했어요
날 욕하지마요
안녕하세요, 이동삼님. Contact Form 7은 미요시 타카유키라는 일본인이 만든 컨택트 폼 플러그인입니다. 아마 일본의 상징을 세계 사람들에게 알리고 싶어서 후지산 그림을 배너로 사용한 것 같습니다. Contact Form 7은 무료이고 많이 사용되지만 그리 바람직하지 않은 플러그인일 수 있습니다. 사이트 속도에 부정적일 수 있고, 그리고 무엇보다 보안 문제가 자주 발견됩니다. 그러므로 이 플러그인을 사용하는 경우에는 항상 최신 버전을 사용하는 것이 보안상 안전합니다. WPForms가 좋은 대안일 수 있습니다. WPForms가 속도면에서 더 유리하다는 의견도 있습니다. 그리고 사용도 편리하고요.
컨택폼에 좌측에는 이름이나 전화번호 이메일 넣고 바로 옆인 우측에 메세지넣는 칸을 넣고싶은데 어디서 변경하는건가요?
컨택트 폼 7에서는 HTML과 CSS를 사용하여 원하는 대로 컨택트 폼을 만들 수 있습니다.
HTML과 CSS로 레이아웃을 조정해보시기 바랍니다.
안녕하세요, 혹시 메일받는 주소를 2개 이상 설정할수 있을까요? 실험해보면 마지막껄로 메일이 오더라구요..ㅠㅠ 동시에 다른 메일도 받을수 있을까요?
네. 가능합니다. Contact Form 7과 Quform에서 여러 명의 수신자 이메일 주소를 설정하는 방법에 대한 다음 글을 참고해보세요.
https://www.thewordcracker.com/basic/contact-form-7-quform%EC%97%90%EC%84%9C-%EC%97%AC%EB%9F%AC-%EC%88%98%EC%8B%A0%EC%9E%90%EC%97%90%EA%B2%8C-%EC%95%8C%EB%A6%BC-%EB%A9%94%EC%9D%BC-%EB%B3%B4%EB%82%B4%EA%B8%B0/
메일이 가지 않는다면 세팅을 잘못했거나 웹호스팅 문제일 가능성이 있습니다.
이름 / 이메일 등… 보여주는 텍스트의 글자 색상과 폰트는
바꾸는 방법이 있는지 알고 싶습니다.
Contact Form 7에서는 컨택트 폼을 만들 때 HTML 태그를 사용할 수 있습니다.
클래스(class)를 추가하고 CSS로 색상, 폰트 등을 쉽게 지정할 수 있습니다.
HTML과 CSS에 대한 기본적인 지식이 있으면 가능할 것입니다.
참고:
텍스트 색상: https://www.w3schools.com/css/css_text.asp
폰트: https://www.w3schools.com/css/css_font.asp
워드프레스에서 CSS를 추가하는 방법은 다음 글을 참고해보세요:
https://www.thewordcracker.com/basic/how-to-add-css-in-wordpress/
안녕하세요, 질문 있어 글 남깁니다.
사용해보니 기본 셋팅은 빈칸에 문의사항을 적고 보내기 버튼을 누르면
정해져있는 문구로 보내기가 완료되었다고 뜹니다.
이 방법 말고 보내기 버튼을 누르면 화면을 다른곳으로 넘길 수 있는 방법은 없을까요? 예를들면 작은 팝업창이 뜨며 “성공적으로 전송되었습니다” 라는 메세지와 확인버튼이 뜨고 버튼을 누르면 메인화면으로 자동 이동되는 방법이요…
안녕하세요?
다음 글을 참고해보세요.
https://www.thewordcracker.com/intermediate/contact-form-7quform%EC%97%90%EC%84%9C-%EC%96%91%EC%8B%9D-%EC%A0%9C%EC%B6%9C-%ED%9B%84-%EB%8B%A4%EB%A5%B8-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A1%9C-%EC%9D%B4%EB%8F%99%EC%8B%9C%ED%82%A4%EA%B8%B0/
https://www.thewordcracker.com/intermediate/how-to-diplay-contact-form-7-success-message-pop-up-in-wordpress/
작성된 내용들이 데이터베이스에 저장되나요? 기록된값을 다시 불러오고 싶을땐 어떻게 해야해요?
Contact Form 7에서는 제출된 글이 DB에 저장되지 않습니다.
별도의 플러그인을 사용해야 합니다.
Contact Form 7 플러그인 개발자가 만든 Flamingo라는 플러그인을 사용할 수 있습니다.
https://www.thewordcracker.com/basic/manage-contact-form-7-messages/
아뇨 전체적으로 기본언어 사용하기(대한민국)이 안나와서 모든것이 영어로 나와서요 ^^; 워드프레스 설정 일반에도 한국어로 설정이 되있는데 왜 이 플러그인은 이런지.. ㅠㅠ
어떤 문제인지는 직접 보기 전에는 말씀드릴 수가 없을 것 같습니다.
우선 My Profile에서 언어가 한국어로 지정되어 있는지 한 번 확인해보시기 바랍니다.
http://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EA%B4%80%EB%A6%AC%EC%9E%90-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%96%B8%EC%96%B4-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0/
안녕하세요. 저는 설치하니 한글이 아닌 영문으로 나오는데 한글은 어떻게 적용해야 할까요? ^^
안녕하세요?
Messages 탭에서 에러 메시지 문구를 바꿀 수 있습니다.
라벨은 폼을 만들면서 한글로 지정하시면 됩니다.
참고로 플러그인 UI를 한글로 번역하고 싶으시면 Loco Translate 같은 플러그인을 사용하시거나 Poedit 같은 Windows 프로그램을 사용할 수 있습니다.
http://www.thewordcracker.com/basic/how-translate-wordpress-po-file-using-loco-translate/
WPML 같은 다국어 사이트용 플러그인을 사용하는 것도 가능합니다.
http://www.thewordcracker.com/basic/wpml%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%ED%85%8C%EB%A7%88-%EC%9C%84%EC%A0%AF-%EB%AC%B8%EC%9E%90%EC%97%B4-%EB%B2%88%EC%97%AD%ED%95%98%EA%B8%B0/
이제 보니 어떤 책도 끝까지 이야길 안했군요. 토요일 도움을 받습니다.
안녕햐세요?
블로그를 방문해주셔서 감사합니다. 책은 지면이 제한되어 있으므로 중요한 부분만 언급하고 넘어가지 않을까 생각됩니다.
질문 하나 드려도 될까요?
제조사: 현대/기아/르노/쌍용
배기량: 1,000이하/1,300이하/1,500이하/~~
색상: 흰색/검정/은색/빨강
~
~
일반적으로 쇼핑몰에서 이런식의 조합을 통해 최종 선택을 하면 가격이 나오는 폼이 있는데, 이런것도 컨택폼7으로 가능한가요? 아니면 다른 방법이 있을까요? 자료는 가능하다면 엑셀로 올릴려고 합니다.
감사합니다…
안녕하세요?
우커머스용 견적서 관련 플러그인을 사용하시면 됩니다. http://www.thewordcracker.com/basic/some-useful-information-on-wordpress-woocommerce/ 글을 참고해보시기 바랍니다.
안녕하세요..!
워드프레스를 배우고 있는데요 문의하기에서 메일을 저에게 보냈는데
메일이 안오는거같아요.
TO. 에 제메일을 잘썼는데..
왜이럴까요. 여러번시도해봤는데 계속 안오네요 ㅜㅜ
도와주세요
안녕하세요?
혹시 카페24 호스팅 서비스를 사용하시나요? 국내의 일부 웹호스팅 업체의 경우 스팸 필터 등의 이유로 제대로 메일이 들어가지 않습니다.
이 경우 Easy WP SMTP 등과 같은 플러그인을 사용하여 SMTP 서버를 지메일(Gmail) 등으로 설정해주면 어느 정도 문제가 해결될 수 있지만, 근본적인 해결책은 되지 않습니다. 이 방법에 대해서는 http://www.thewordcracker.com/basic/when-you-cannot-receive-notification-emails-in-wordpress/ 글을 참고해보시기 바랍니다. 그리고 이 글에 소개된 Flamingo라는 플러그인을 설치하면 이메일 수신이 되지 않더라도 대시보드(관리자 페이지)에서 메시지를 확인할 수 있습니다.
오오! 답변 감사합니다!!~
초보라 바보같은 질문인가 걱정했는데…
친절하게 답변해주셔서 감사합니다~!!
안녕하세요?
워드프레스 관련 질문이 있으면 언제든지 여기에 올려주셔도 됩니다.
그럼, 즐거운 하루되세요.
Contact Form 7 만 쓰면 메일을 받을수없어 Flamingo설치했는데 메일은 받을수있는데 파일포함하면 파일을 열수가 없네요.혹시 다른 방법뭐가 있을까요?
안녕하세요?
Contact Form 7에서는 파일이 서버에 저장되지 않고 메일로 전송됩니다.
메일로 전송되도록 설정하는 방법은 다음 글을 참고해보세요.
https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-contact-form-7%EC%97%90%EC%84%9C-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C%EC%B2%A8%EB%B6%80-%EA%B8%B0%EB%8A%A5-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0/
그래도 안되네요. 상대방이 파일포함한 메일 보내면 메일내용,보낸 파일 이름만 확인 할수있네요. 파일을 열수가 없어요.
수신 메일을 바꾸어서도 한 번 테스트해보시면 어떨까요?
그리고 첨부 파일을 다양한 형식(예: zip, jpg 등)으로 하여 테스트하여 특정 파일 형식에서만 그런지 여부도 확인해보시면 어떨까 생각됩니다.
메일은 여러개 바꿔보았고 파일은 png,gif,jpeg로 해봤는데 안됩니다.Contact form 7 로 직접 메일 보내면 조겠는데 이것도 안되고 호스팅업체에 문의하면 될까요?
안녕하세요?
이 부분을 테스트해보았는데 잘 되네요.
아마 미세한 부분에서 오류가 발생했을 수도 있으니 하나씩 잘 체크해보시기 바랍니다.
파일 이름을 한글을 포함할 때와 그렇지 않을 때를 나누어서 테스트해보시기 바랍니다.