예전에 찜해두었던 Ajax Contact Form을 이용해서 플러그인을 만들어 봤습니다. 만들어 봐야겠다는 생각을 한 지가 오래되어서 그 사이 혹시 누군가 플러그인으로 만들어놓은게 있나 싶어 찾아보니 같은건 아니지만 Ajax로 구현된 intouch라는 플러그인이 있더군요.
테스트 삼아서 설치해봤는데 한글 인코딩문제를 제외하고는 아무 문제 없이 잘 작동은 하는데 헤더(
[spoiler ‘blind”참고 : intouch에서 한글문제 해결법 보기”내용 다시 감추기”3’]”intouch” 플러그인을 한글환경에서 사용하실분께서는
intouch-sajax.php 파일에서 “escape”를 모두 “encodeURIComponent”로 바꿔주시면 됩니다. 만일을 위해 먼저 백업해 두시는것 잊지 마세요 :)[/spoiler]Ajax나 자바스크립트에 전문적인 지식이 없어 새로운 스크립트를 만들기보다는 prototype.js 의 Ajax를 이용해서 간단하게 적용했습니다.
“Name”부분을 한글로 입력했을때 한글이 깨지는 오류는 reric님의 글을 통해 해결 할 수 있었습니다. (감사합니다 ^^)
이미 prototype.js와 moo.fx.js 스크립트를 사용하시는 분들이 생각보다 많아서 설정페이지에서 선택가능하도록 했습니다.
설치 (Install)
- 다운받은 파일의 압축을 풀면 나오는 “ajaxcontact”폴더를 플러그인 폴더에 업로드 합니다. (e.g. “
wp-content/plugins/ajaxcontact“) - 플러그인페이지에서 “AjaxContactForm”을 활성화(activate)시킵니다.
- 설정(Options) – AjaxContact 페이지에서 간단한 설정값을 입력합니다.
- 페이지나 포스트의 원하는 곳에
을 적어 넣어주면 됩니다.
설정 (Configure)
- E-mail: 기본값으로 워드프레스의 관리자메일로 설정됩니다.
- Subject: 이메일의 제목에 표시될 내용입니다. 바로 다음에 보낸이의 이름이 표시됩니다.
- Success: 이메일이 성공적으로 발송되었을때의 메세지입니다.
- Failure: 이메일 발송에 실패했을때 표시될 메세지입니다.
- prototype.js: prototype.js를 플러그인이나 테마에서 사용중이라면 체크를 해제하세요.
- moo.fx.js: moo.fx.js를 플러그인이나 테마에서 사용중이라면 체크를 해제하세요.
- 연락메일폼의 스타일(sytle)을 바꾸시려면 “acf.css”파일을 수정하시면 됩니다. “.acf_good”은 메일전송 성공시의 스타일을 “.acf_error”는 메일전송 실패시의 스타일을 지정합니다.
하고픈 말 (Readme)
- 이 플러그인은 Dustin의ajaxContactform에 기본을 두고 있습니다.
- prototype.js의 Ajax를 moo.fx.js의 효과(opacity)를 사용합니다.
- 사용시 문제가 있거나 개선안이 있으시면 댓글을 남기시거나 메일을 이용해주세요
테스트는 제 블로그의 about페이지에서 가능합니다.
18 responses to “Ajax Contact Form 플러그인”
@jungbim
답변이 늦어졌네요…
제가 jungbim 님 페이지의 소스를 확인해 보니 마이너스 문자(-) 가 단순한 ‘-‘가 아닌 다른 문자이더군요.
어떤 다른 플러그인에서 해당 문자를 변환했을 가능성이 있습니다. 한 번 확인해 보세요.
코드를 그대로 썼더니 안보이네요
[p][!––contact form––]gdgdgdg[/p]
이렇게 써놨습니다 [] 가 아니라 코드쓸때 쓰는 부등호 기호 이구요..
http://jungbim.net/?page_id=20 에 contact 를 설치하려고 하고있습니다 -ㅂ-
page edit 모드에서
gdgdgdg
이렇게 써놨구요
그 담에 아무런 반응이 없습니다.. 도와주세요 ㅎ;
[…] Ajax-ContactForm […]
답변 감사합니다.
저도 ‘스팸아님’ 처리를 여러번 반복해서 해보았는데도 불구하고 계속 스팸으로 오인되는군요. 이런이런…
다음 버전의 플러그인을 기대할께요. 바쁘시겠지만, 힘내주세요!
다음 버전을 준비만 해놓고 아직 공개하지 못한 상태로 계속 쥐꼬리만큼씩 수정하고 있는 중입니다.
다음 버전에서는 워드프레스 2.2 이상일 경우 PHP 의 mail 함수를 직접 사용하지 않고 워드프레스의 wp_mail 함수를 사용하게 됩니다. 이렇게 되면 말씀하신 문제가 사라지지 않을까 합니다.
제 경우 Gmail의 ‘to’ 필터와 ‘subject’ 필터를 사용하긴 하지만 단순히 라벨을 붙이기 위함이고, 그 전에 한 두번인가 ‘not spam’ 처리를 해 줌으로서 다음부터는 스팸으로 분류되지 않더군요.
이 플러그인을 설치하고 사용하려고 몇번의 테스트를 해보았습니다.
이 플러그인을 사용시 지메일 계정으로 메일이 발송되도록 설정 되어있습니다. 발송이 되긴 되는데, 매번 스팸으로 자동분류가 되어버리는군요. 메일클라이언트를 사용중이라 스팸으로 분류된 메일은 메일클라이언트로 읽어들이지 못합니다. 지메일에 직접 접속해서 스팸함에서 스팸해지를 일일히 수동으로 해줘야 되는데요. 이를 자동적으로 스팸아님으로 인식하게 할 수 있는 방법이 있을까요?
참고로, 댓글등록시 메일로 수신토록 설정해두었는데, 그 것을 통해 보내지는 메일은 정상적으로 보내집니다.(스팸으로 인식하지 않습니다.) 또한 메일제목이 기본 설정된 제목으로 보내집니다. 그래서 이 제목을 필터를 이용하여 자동으로 지정된 라벨(카테고리)로 이동하도록 설정을 했지만, 스팸 구분에서 벗어나진 못하는 군요.
답변 기다립니다.
메일발송이 되지 않는것은 사용중이신 호스팅업체에 문의해 보셔야 할겁니다. 댓글이 등록되면 메일로 알려주는 설정을 선택하셨나요? 그렇다면 댓글이 등록될때마다 관리자메일로 알림메일이 전송되었을겁니다. 그런 메일을 받은적이 없다면 계정에서 메일발송을 지원하지 않을 가능성이 큽니다.
안녕하세요 ^^
제 계정에 워드프레스를 설치하고 시험 중에 082님께서 만드신 플러그인도 설치했습니다. 그런데 메일발송이 안됩니다. 이전에 다른 메일폼을 시험해 보았을때에도 안됐는데 혹시 메일을 보내기 위해서는 서버에서 따로 지원하는 기능이 필요한가요?
어떤게 지원되어야 하고, 지원이 되는지 확인하는 방법이 있다면 알려주십시오.
is_page()부분은 개인적 용도로 넣었던 부분인데 실수로 지우지 않았었네요. 다음 공개할 판(verison)에서 수정하도록 해야겠습니다.수정하는김에 다른 의견들도 능력이 되는 한 반영해 보도록 하겠습니다.
좋은 의견 감사합니다
덧) 올려주신 댓글 중에서 코드가 포함된 부분을 code 태그로 감쌌습니다.
참, 버튼을 여러 번 눌러버리면 메일이 계속 가네요.
한 번 메일보내기 버튼을 누르면 다음에는 몇 초(분) 뒤에 활성화되거나
뭐,, 이렇게 악의적인 목적으로 계속 보내는 것을 방지할 방법이 있다면
더 좋겠네요.
영팔님~
저도 trendon 님과 같은 문제에 시달렸는데
소스를 열어보고서야 알았습니다.
81번째 줄 –
function add_head() {if (is_page('about')) {
$r = "\n\t" . ''."\n";
$r .= ( $this->prototype == true )?"\t" . 'url.'/js/prototype.js">'."\n":'';
.
.
98번째 줄
// replace placeholder by generated codefunction add_filter( $content ) {
if (is_page('about')) {
if(preg_match('##', $content)) {
.
.
여기에 있는
if (is_page('about'))이것을 보고야 알았습니다.
if (is_page()) {이렇게 바꾸면 모든 page 에서 쓸 수 있네요.. post에도 뜨게 하는 건 모르겠습니다. 어차피, 메일폼은 page로 따로 빼서 쓰니까요… 음..
+
개인적으로.. Website 쓰는 곳에 value=”http://” 값을 줬으면 편하겠네요. 또 하나. Contact Form ][ 이라는 메일 폼에서 봤던 것처럼 메일 보내는 사람에게 복사본을 보낼 수 있는 옵션도 있었으면 좋겠습니다. value 값 주는 건 간단한 것이라 혼자 했지만 복사본 관계된 것은 Contact Form ][ 보면서 어떻게 해보려고 해도… 좀.. 고민 좀 해봐야겠네요.
후..
관리자 화면에서 Activate도 시켰고, 메일 options > AjaxContact 에서 설정도 했는데 아무것도 안되니 미칠 것 같았는데, 해결되어 다행입니다.
어쨌든 이렇게 좋은 소스 주셔서 감사합니다.
덕분에 한글메일 발송에 관계해서 골머리 앓던 문제까지 한꺼번에 해결되었네요
1. trendon님 블로그를 확인해보니 플러그인이 활성화 되지 않은듯 하더군요. 다시 한번 확인해 보시기 바랍니다. 활성화 되었다면 페이지에서 ‘View Source(소스보기)’ 하였을때 <head> </head> 사이에 aj-contact.js를 삽입하는 부분이 있어야 합니다.
2. 쉽지 않더라도 하나 하나 살펴보면서 해결해 보세요. 제 블로그의 tp-guestbook관련 글을 살펴보시기 바랍니다.
3. 페이지 관리(수정)화면에서 오른쪽 사이드바쪽에 보면 page order 부분이 있습니다. 그곳에서 우선순위를 결정한 뒤 wp_list_pages 함수의 설정값에 ‘sort_column=menu_order’ 처럼 sort_column 값을 menu_order로 지정하세요.
글쓰는 창에서 html 수정 모드창을 열고 게시물 작성후 하단에 와 같은 형태로 기입을 하였는데요 아무런 변화가 없네요. 해당 플러그인 활성화 상태 및 권한은 755입니다. 무슨 실수를 하고 있는 것인지….
더불어 이것이 안되면 방명록 플러그인을 하단에 씌우고 싶은데요.
한번 클릭으로 생성되는 플러그인을 활성화 시켜보니 Guestbook 으로 고정되어 페이지가 별도로 생성되더군요. 이것도 한번 해봤는데 영 저에 걸맞는 방식으로 재조정하기가 쉽지 않네요.
그리고 페이지 작성시 알파벳 등등의 순위로 정렬되던데요. 이것을 작성 시점이나 기타 순위를 조정할 수 없나요? 더불어 글과 함꼐 이미지를 서버에 업로드하여 글 중간에 함께 게시하고 싶은데. 이미지가 원본과 많이 다르게 나오네요. ㅠ..ㅠ
trendon// rich editor를 사용중이시라면 html 창에서 위 코드를 입력해 보세요. 주석형태로 들어가더라도 생략되거나 하지는 않습니다
안녕하세요. 글이나 페이지에 활용을 하려고 하는데요.
에디터에서 별도의 버튼으로 기능을 제공하고 있지는 않을 것 같습니다.
이 코드를 글의 내용이 들어가는 곳 하단에 넣으면 되는 것인가요? 주석형태로 들어가서 인지 생략이 되는 듯한 느낌입니다. 글을 작성하고 어떠한 형식으로 적용할 수 있는지 조언 바랍니다.
설정 페이지는 워드프레스 관리자화면(wp-admin) – 설정(Options) 페이지의 AjaxContact 탭에 있습니다. 다시한번 확인해 보세요
안녕하세요. wp-ajaxcontact.zip 플러그인을 적용해 보려고 하는데요.
막히는 부분이 있네요. 워드프레스 관리자 모드에서 플러그인 활성화 까지는 되었는데 그 이후에 대해서는 이해를 하지 못하겠습니다. 말씀하시는 옵션은 워드프레스 상의 옵션을 말씀하시는 것인가요? 그것이 맞다면 아무런 변화나 메뉴가 생성되지 않았습니다. 아니면 워드프레스 관리자 모드의 플러그인-플러그인편집기 상의 해당 플러그인 설정 파일을 말씀 하시는 건가요?
죄송하지만 상세한 설명 부탁드립니다.
http://www.trendons.com/?page_id=39 페이지에 삽입을 위한 용도입니다.
매번 질문에 대한 답변 감사합니다.