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

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

 

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

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

 

 

 

피드백 양식 만들기

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

- 먼저 클래스 이름이 피드백 인 div를 만듭니다.
- id가 feedback_button 인 div 내에 앵커 태그를 만들고 앵커 텍스트 Feedback을 입력하십시오.
- 그런 다음 폼 클래스를 사용하여 피드백 폼에 대한 div를 만듭니다.
- 양식 div 안에 h2 태그를 사용하여 제목을 추가하십시오.
- 배치 할 양식의 상태에 대한 상태 범위를 추가하십시오.
- 피드백 메시지를위한 텍스트 영역과 버튼을 추가하고 이메일을 제출하십시오.

 

<div class="feedback">
    <a id="feedback_button">Feedback</a>

    <div class="form">
    <h2>Please Send Us Your Feedback</h2>
        <span class="status"></span>
        <textarea id="feedback_text"></textarea>
        <input type="button" value="Send" id="submit_form" />
    </div>
</div>

 

 

 

피드백 버튼 위치

이제 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에서 다시 확인하여 방문자에게 오류 메시지를 표시합니다.