용오름체험휴양마을영농조합법인 / 홍천 용오름캠핑장 팸투어 다녀왔어요.

용오름체험휴양마을영농조합법인 / 홍천 용오름캠핑장 팸투어 다녀왔어요.강원도 홍천 서석면에 위치해있으며 1급수 용오름계곡 바로 옆에 있습니다.홍천군 1등 마을로 마을에서 직접 관리하는 용오름캠핑장,펜션 10개를 운영하고 있으며 각종 모임이 가능하도록 식당,회의실,야외무대가 설치되어 있습니다.홍천군 1등 마을답게 캠핑장,펜션 마을 전지역 wi-fi 사용이 가능하며 매년 봄 팸투어 실시, 여름엔 마을에서 재배한 홉으로 직접만든 맥주축제,마리소리 음악축제 를 열고 있습니다.계곡의 경우 수심이 다양하여 다이빙 포인트가 2곳이 있으며 아이들이 안전하게 물놀이를 할 수 있는 곳도 여러 곳 있습니다.홍천 용오름캠핑장 팸투어 다녀왔어요.요즘은 농산촌체험마을에서 캠핑과 여러프로그램을 같이 하는 곳이 추세더라고요. 아미산이 둘러쌓인 청정계곡이 흐르는 아름다운 용오름체험휴양마을 에서 운영하는 홍천 용오름캠핑장 팸투어 다녀왔어요. 테크 앞 강이...붕어빵 가족의 담너머 세상구경https://m.blog.naver.com/1092119/220711235599가을여행-홍천여행- 홍천 용오름 마을 첫째날여행의 계절 가을입니다. 요즘 저희는 강원도에 꽃힌 상태인지라...카페 행복한 이티씨와 함께하는 홍천 용오름 마을 1박2일 체험에 참가를 하였답니다! 평소 체험 시간보다 조금 늦은 출발을 해서 차가 밀리지 않으려나...귀여운 단지https://m.blog.naver.com/sanguidan/50181593653용오름마을 캠핑장여름휴가의 시즌이다.. 강원도의 계곡과 시원함을 만끽하기 위해 캠핑장을 검색하다 우연히 알게 된 홍천의 용오름 캠핑장.. 성수기라 캠핑장 요금들이 사악하다 용오름캠핑장 옆엔 해미르 캠핑장이 있는데...★살로몬의 잇츠캠핑★https://m.blog.naver.com/freeguy9040/20163628934맥주효모로 만든 용오름맥주마을 바쏘 맥주샴푸와 맥주마스크팩...1988년까지 맥주 원료인 홉을 재배하며 번성했던 강원도 홍천군 서석면 용오름 마을이란 곳이 있었습니다…

PHP, JavaScript, jQuery : 슬라이드 아웃 피드백 양식 작성해서 관리자...

PHP, JavaScript, jQuery : 슬라이드 아웃 피드백 양식 작성해서 관리자...

PHP, JavaScript, jQuery : 슬라이드 아웃 피드백 양식 작성해서 관리자에게 보내는 방법 : 예제, 구현

많은 사이트에서 이것을 보았을 수도 있습니다. AJAX를 사용하여 방문자의 피드백과 함께 웹 사이트 관리자 이메일 주소로 이메일을 보내는 슬라이드 아웃 피드백 양식을 작성하는 방법을 보여 드리겠습니다. 슬라이드 아웃 양식은 방문자에게 피드백을 요청하기에 좋은 곳입니다. 보기에 숨겨져 있기 때문에 사이트 모양과 사람들이 버튼을 클릭하는 것이 실제로 피드백을 주고 싶어하는 마음을 망치지 않습니다.

이 튜토리얼에서는 jQuery와 PHP를 모두 사용합니다. 피드백 버튼의 클릭 이벤트에서 슬라이드 아웃 효과에 jQuery를 사용하고 서버의 PHP 페이지로 전송되어 피드백을 관리자 이메일에 제출합니다. 이 튜토리얼은 피드백에 관한 것이므로 방문자에게 양식으로 메시지를 제공하도록 요청하기 만하면 됩니다. 사람들이 이름이나 이메일 주소를 제공하지 않아도되면 더 많은 사람들이 양식을 제출하게됩니다.

피드백 양식 만들기

코딩을 시작하기 전에 피드백 버튼을 배치할 위치를 결정해야합니다. jQuery가 어떤 방향으로든 상자를 슬라이드 할 수 있기 때문에 페이지의 어느 위치에나 있을 수 있기 때문에 이 튜토리얼을 위해 화면 왼쪽 하단에 피드백 버튼이 배치되고 슬라이더가 위로 이동하여 텍스트 영역과 제출 버튼인 양식을 표시합니다.

- 먼저 클래스 이름이 피드백 인 div를 만듭니다.

- id가 feedback_button 인 div 내에 앵커 태그를 만들고 앵커 텍스트 Feedback을 입력하십시오.

- 그런 다음 폼 클래스를 사용하여 피드백 폼에 대한 div를 만듭니다.

- 양식 div 안에 h2 태그를 사용하여 제목을 추가하십시오.

- 배치 할 양식의 상태에 대한 상태 범위를 추가하십시오.

- 피드백 메시지를위한 텍스트 영역과 버튼을 추가하고 이메일을 제출하십시오.

Feedback Please Send Us Your Feedback

피드백 버튼 위치

이제 CSS를 만들고 방문자에게 올바르게 표시되도록 버튼과 양식의 스타일을 지정해야합니다. 먼저 피드백 상자를 배치해야합니다. 피드백 버튼을 화면 왼쪽 하단에 배치했습니다.

.feedback{ position:absolute; left:0; bottom:0; }

이제 양식은 페이지 왼쪽 하단에 있으며 div 내부의 요소 스타일을 지정할 수 있습니다.

피드백 양식을 슬라이드 아웃하는 데 사용할 피드백 버튼의 스타일을 지정해야합니다. 이 버튼은 페이지에서 눈에 띄어 야하고 눈에 잘 띄도록 커야합니다. 다음 CSS를 사용하여 피드백 양식을 열도록 링크의 스타일을 지정하십시오.

.feedback a { display:block; height:20px; width:100px; text-align:center; background:red; border:2px solid #fff; outline:1px solid #a1a1a1; padding:5px; float:left; cursor:pointer; /*Font*/ color:#FFF; font-weight:bold; font-size:18px; }

이제 양식의 스타일을 만들 수있는 버튼이 있습니다. 먼저 양식으로 시작하여 높이와 너비를 추가하여 큰 텍스트 영역과 양식을 제출할 수있는 버튼을 충분히 확보하십시오. 양식에 다음 CSS를 사용하십시오. 폼에 display : none을 추가하여 숨겨지기 시작하는지 확인하십시오.

.feedback .form{ clear:both; height:300px; width:450px; border:1px solid #000; background:#fff; padding:15px; display: none; } .feedback .form textarea{ height:170px; width:400px; padding:5px; } .feedback .status{ font-size:16px; }

슬라이드 효과 만들기

이제 jQuery를 사용하여 슬라이드 아웃 효과를 만드는 데 필요한 양식과 양식을 만들었습니다. jQuery의 좋은 점은 이미 사용할 수있는 몇 가지 표준 효과가 내장되어 있다는 것입니다. slideToggle () 함수에서 이러한 효과 중 하나는 현재 표시된 반대 방향으로 미끄러집니다. 따라서 div가 숨겨져 있으면 표시되고 현재 표시되어 있으면 div가 숨겨집니다. 이것은 슬라이드 아웃 양식에서 원하는 효과입니다. 클릭 이벤트를 링크에 추가해야 폼이 위로 올라갑니다.

$("#feedback_button").click(function(){ $('.form').slideToggle(); });

Ajax로 피드백 보내기

이제 jQuery를 전송하여 AJAX 요청을 서버에 보낼 수있는 양식과 슬라이드 효과가 있습니다. PHP를 사용하여 웹 사이트 관리자에게 이메일을 보낼 수 있도록 텍스트 영역의 입력을 보내야합니다. 양식 제출 단추의 클릭 이벤트에서 텍스트 영역이 비어 있지 않은지 확인한 후 이메일을 process_email 파일로 전송하는 새 기능을 설정하십시오. 요청이 성공적으로 완료된 경우 피드백이 전송되었음을 알리는 메시지를 표시하려고 합니다. 또한 피드백을 보내지 못한 경우 실패했다는 메시지를 표시하려고합니다.

send_feedback: function(){ $('#submit_form').click(function(){ if($('#feedback_text').val() != ""){ $('.status').text(""); $.ajax({ type: "POST", url: "./process_email.php", data: 'feedback=' + $('#feedback_text').val(), success: function(result,status) { //email sent successfully displays a success message if(result == 'Message Sent'){ $('.status').text("Feedback Sent"); } else { $('.status').text("Feedback Failed to Send"); } }, error: function(result,status){ $('.status').text("Feedback Failed to Send"); } }); } }); }

관리자에게 이메일 보내기

피드백 메시지가 PHP 스크립트로 전송됩니다. 이제 내장 PHP 함수 mail ()을 사용하여 웹 사이트 관리자에게 이메일을 보낼 수 있습니다. POST 요청에서 피드백 메시지를 받으려면 전역 변수 $ _POST를 사용해야합니다.

$to = "admin@email.com"; $subject = "Feedback Form"; $message = $_POST['feedback']; if(mail($to,$subject,$message)) { echo "Message Sent"; } else { echo "Message Not Sent"; }

이메일이 성공적으로 전송되면 Message Sent 메시지가 출력되며 jQuery에서 확인하여 성공 메시지를 사용자에게 표시 할 수 있습니다. 메시지를 보내지 못하면 메시지를 보내지 않았습니다라는 메시지가 표시되며 jQuery에서 다시 확인하여 방문자에게 오류 메시지를 표시합니다.

from http://jjeongil.tistory.com/588 by ccl(A) rewrite - 2020-03-17 19:54:08

댓글

이 블로그의 인기 게시물

용오름체험휴양마을영농조합법인 / 홍천 용오름캠핑장 팸투어 다녀왔어요.

[C언어] 백준 알고리즘 - 숫자의 개수(2577번)

[2020 정보처리기사 실기 - 프로그래밍 언어 활용] 2. 언어 특성 활용...