'contact form 7'에 해당되는 글 2건

만들어진 폼의 크기가 작고 좁고 아름답지 못합니다. 약간의 스타일을 수정하여 크고 아름답게 만들어야 합니다.

컨텍트 폼으로 가서 "폼" 항목을 다음과 같이 수정합니다. 클래스를 추가하는 것입니다.

<p>이름 (필수)<br ⁄>
    [text* your-name class:cf01-size] <⁄p>

<p>이메일 (필수)<br ⁄>
    [email* your-email class:cf01-size] <⁄p>

<p>제목<br ⁄>
    [text your-subject class:cf01-size] <⁄p>

<p>메시지<br ⁄>
    [textarea your-message class:cf01-msgsize] <⁄p>

<p>스팸방지<br ⁄>
    [captchac captcha-241]
    [captchar captcha-241] <⁄p>

<p>[submit "보내기"]<⁄p>

그리고 관리자에서 "외모 - Theme Editor"로 이동하여, custom.css 를 선택하여 열고, 아래의 내용을 추가합니다.

⁄* 폼메일 사이즈 *⁄
.cf01-size {
  width: 50%;
  height: 2em !important;
}
.cf01-msgsize {
  width: 100%;
}

워드프레스로 만들어진 홈페이지를 보면 대부분 Contact 항목이 있습니다.

일반적으로 사용자 이름, 이메일, 전화번호, 내용, 전송버튼 으로 이루어진 이것은 폼메일을 보내는 플러그인을 통해 만들어지고 어떤 프로젝트의 의뢰라든가 문의를 받는 용도로 많이 사용되고 있습니다.

하지만 KBoard를 사용해서 의뢰나 문의를 받는다면 거의 필요가 없지 않을까...라고 생각하는데 굳이 만드는 이유는 홈페이지의 심미적인 면에서 있으면 뭔가 좀 그럴 듯 해보이는 느낌이 있어서...랄까요.

우선 새로운 페이지를 만들고 저장합니다. 페이지 제목은 "콘텍트", 슬러그는 "contact"이고, 상위 페이지로 고객지원을 설정했습니다. 토론 항목은 모두 비활성화 합니다.

관리자에서 "플러그인 - 플러그인 추가하기"를 통해 "Contact Form 7"을 검색하여 설치하고 활성화합니다.

관리자 - Contact 에서 현재 만들어져 있는 "컨텍트 폼 1"의 단축코드 아래의 내용을 클릭하여 선택하고 복사합니다.

관리자에서 "페이지 - 모든 페이지"를 클릭한 후 콘텍트 페이지를 열고, 복사한 코드를 [ctrl+v]로 붙여 넣고, [업데이트]를 클릭한 후 수정된 페이지를 확인해 봅니다.

테스트로 내용을 작성해서 발송해 봅니다. 이메일 주소는 워드프레스를 설치할 때 설정된 관리자 메일 주소로 자동 설정됩니다. 메일이 제대로 발송되면 아래쪽에 메시지가 출력됩니다.

메일이 제대로 수신된 것을 확인할 수 있습니다...(왜 배경이 핑크하트...? 언제 바뀐거지;;;)

작성된 콘텍트 페이지를 통해 혹시 모를 스팸 메일이 유입될 수 있으므로, CAPTCHA 기능을 추가합니다.

Contact Form 7 의 경우 Really Simple CAPTCHA 플러그인을 통해 간편하게 문자입력 방식의 스팸 방지 기능을 붙일 수 있습니다. 플러그인 검색을 통해 "Really Simple CAPTCHA"를 설치하고 활성화합니다.

관리자의 "Contact" 항목에서 "컨텍트 폼 1"을 편집합니다.

[태그생성]을 클릭하고, CAPTCHA를 선택합니다. 이름 항목이 랜덤으로 생성된 것을 확인할 수 있습니다. 

나머지 항목은 우선 빈칸으로 그냥 두고 기본값(default)으로 출력되게 하겠습니다. 아래쪽에 생성된 코드 두 개를 왼쪽 "폼" 항목에 추가하고 [저장하기]를 클릭합니다.

아래쪽에 스팸 방지를 위한 문자열 입력창이 추가되었습니다. 문자를 입력하지 않고 [보내기]를 클릭하면, 에러 메시지가 출력됩니다. 문자를 제대로 입력하면 메일이 발송됩니다.