CONTACT FORM 7 : 워드프레스 폼메일(Form mail) plugin

폼메일(Form mail)

웹사이트에 폼(양식)을 탑재해서 간단히 메일을 보낼 수 있도록 하는 모듈을 폼메일(Form mail)이라고 합니다. 웹사이트에서 폼메일 없이 이메일 주소만 안내한다면 방문자가 자신의 이메일 시스템에 로그인해서 메일을 작성해야 하는 번거로움이 있지만, 폼메일을 사용하면 폼에 내용을 입력하고 전송 버튼만 클릭하면 간편하게 메일을 보낼 수 있습니다. (출처 :  Do it! 쉽게 만드는 워드프레스 웹사이트 )

폼메일모듈은 일반적으로 PHP 언어로 프로그래밍하는데, 워드프레스에서는 플러그인이나 테마를 이용하여 쉽게 사용할 수 있습니다.

 

Contact Form 7 plugin

Contact Form 7 플러그인은 WordPress 디렉토리에서 가장 인기있는 무료 WordPress 문의 양식 플러그인입니다.  이 플러그인은 강력하고 100 만 개 이상의 웹 사이트에서 완벽하게 실행되고 있으며 문의 양식에는 Ajax 기반 양식 제출, Google Captcha ReCaptcha 및 Akismet 스팸 필터 옵션과의 통합과 같은 멋진 통합 기능이 포함되어 있습니다.

Contact Form 7에는 WordPress 웹 사이트의 무제한 연락처 양식을 만들 수있는 단축 코드 빌더가 함께 제공됩니다. 설치 및 사용자 정의가 쉽고 세부 사항 문서 및 전문 기술 지원과 함께 제공됩니다.

 

[플러그인 추가하기]하여 설치하고 활성화해줍니다.

폼메일 플러그인 contact-form-7_1
폼메일 플러그인 contact-form-7_1

 

사용법

Add New(새로추가)

[Contact] -> [새로 추가]

contact-form-7_2

 

Form Tab

Form Tab은 1. Form, 2. Mail, 3. Messages, 4. Additional Settings 으로 구성됩니다.

1. Form

기본적으로 이름, 이메일, 제목, 메시지(본문)필드가 만들어져 있습니다. [드롭다운(drop-down menu)] 메뉴를 추가하면 “문의내용”을 선택할 수 있습니다.

contact-form-7_3

[Option] 에  드롭다운(drop-down menu)에 추가할 문의내용의 종류들을 입력하신후 [Insert Tag]해 줍니다.

contact-form-7_4

 

[드롭다운(drop-down menu)]의 제목은 임의로 HTML 코드를 추가해 주어야 합니다.( [checkboxes] 와 [radio buttons] 메뉴도 [드롭다운(drop-down menu)] 메뉴와 동일합니다. )

다른 필드의 HTML을 참조하여 코드 앞에 <p>문의내용<br/>을 입력하고, 뒷부분에는 </p>를 넣어줍니다.

contact-form-7_5

 

[checkboxes] 와 [radio buttons] 메뉴도 [드롭다운(drop-down menu)] 메뉴와 비슷한 기능을 제공하는데 [드롭다운(drop-down menu)] 보다 더 깔끔합니다. 아래의 이미지는 라디오버튼을 실현한 내용입니다.

contact_form_plugin_radio_1

 

contact_form_plugin_radio

Put a label first, a checkbox last : check하시면 라디오버튼이 앞에 생깁니다.
Wrap each item with label element : 이것은 차이를 모르겠습니다.

2. Mail

[메일]탭은 폼메일 전송시 메일 내용을 구성하고 설정하는 곳입니다. [your-name] 과 [your-subject]는 폼에 입력한 이름과 제목을 변수 값으로 전달하는 것이고, 수신 난의 메일 계정에는 워드프레스의 [설정->일반]에 입력한 웹사이트 운영자 이메일이 자동으로 입력됩니다. 필요한 경우, 다른 이메일 계정으로 변경하세요. ( 출처 :  Do it! 쉽게 만드는 워드프레스 웹사이트 )

contact-form-7_6

 

contact-form-7_6

 

설정이 완료되면 화면 오른쪽 상단 또는 아래에 위치한 [저장하기]버튼을 눌러 폼을 저장하고 폼메일 숏코드를 복사하여

contact-form-7_7

 

입력하고자하는 페이지에 숏코드를 붙여넣기 해주시면 됩니다.

 

3. Messages

양식을 제출하는 과정에서 보여주는 각종 메시지들입니다. 한번 잘 작성하신후

contact_form_plugin_message_1

Duplicate(복사하기)하여 사용하시면 편리합니다.

contact_form_plugin_message_2

4. Additional Settings

가입자 전용 모드, 데모 모드, 메일 건너 뛰기, 유효성 확인 승인, 플라밍고 설정 등의 추가 세팅을 할 수 있습니다.

 

Troubleshooting(문제해결)

보내기, 제출하기, 문의하기 와 같은 [submit] menu(버튼)가 안보이는 경우

간혹 Contact Form 7의 보내기(혹은 제출하기) 버튼 색상이 테마의 스타일에 따라 원치 않는 색으로 표시되는 경우가 있습니다. 원치 않는 색이 흰색인 경우, menu(버튼)이 실제로는 있는데 안 보입니다.

이 경우, 아래의 게시글을 참조하시어 해결하세요.

워드프레스 Contact Form 7에서 보내기 버튼 색상 바꾸기

 

[워드프레스] Contact Form 7에서 메일 보내기 실패 오류가 발생하는 경우 해결 방법

https://www.thewordcracker.com/basic/failed-to-send-your-message-in-wordpress-contact-form-7/

 

참고자료 : 1. Do it! 쉽게 만드는 워드프레스 웹사이트

                 2. 5+ Free WordPress Contact Form Plugin

3. 워드프레스 Contact Form 7에서 보내기 버튼 색상 바꾸기

댓글 남기기

This site uses Akismet to reduce spam. Learn how your comment data is processed.