파일을 다운로드하고 PHP 이메일로 보낼 수 있는 피드백 양식을 만드는 방법. HTML과 PHP를 사용하여 이메일로 데이터를 보내는 가장 간단한 형태
안녕하세요 친구! 양식에서 이메일로 데이터를 전송하기 위한 범용 스크립트를 여러분께 소개하고 싶습니다. 이 스크립트는 랜딩 페이지, 명함 사이트 등과 같은 사이트에 이상적입니다. 우리의 피드백 양식 스크립트는 한 페이지의 다양한 필드와 무제한의 양식을 연결할 수 있고 여러 수신자에게 편지를 보낼 수 있다는 점에서 인터넷의 다른 스크립트보다 돋보입니다.
그래서. 시작하자. 스크립트의 기능부터 시작해 보겠습니다.
스크립트는 라이브러리를 기반으로 작동하므로 가장 먼저 해야 할 일은 라이브러리를 연결하는 것입니다. 이를 위해서는 Google 호스팅 라이브러리를 사용하는 것이 좋습니다.
나머지 파일에 대해 더 자세히 이야기해 보겠습니다.
Feedback.js는 AJAX 양식 제출을 담당하는 기본 스크립트 파일입니다.
jquery.arcticmodal.js,
jquery.arcticmodal. - 모달 창에 양식을 표시하는 기능을 제공합니다.
jquery.jgrowl.js,
jquery.jgrowl.css - 페이지에 알림을 표시할 수 있습니다(페이지 상단 모서리에 있는 블록).
모든 양식 요소에 대한 필수 속성은 name="" 속성입니다. 이는 후속 양식 구성에 필요합니다.
버튼(type="button")의 경우 class="feedback" 을 지정해야 합니다. 또한 "피드백" 클래스가 있는 HTML 태그는 모두 버튼 역할을 할 수 있다는 사실에 주목하고 싶습니다. 모달 창에서 양식 호출 모달 창에서 양식을 호출하려면 먼저 작업을 정의해야 합니다. 예를 들어 modal_btn 클래스가 있는 div와 같은 태그를 클릭하려면
모달 창에서 양식 호출 $(document).ready(function() ( $(document).on("click", ".modal_btn", function())( $("#small-modal").arcticmodal (); )));
양식은 모달 창에서만 표시되어야 하므로 style="display: none;" 속성을 사용하여 div에 배치하여 숨겨야 하며, 모달 창의 스타일을 지정하기 위해 두 개의 표준 div에 래핑되어야 합니다.
엑스
그래서 우리는 양식을 이메일로 보내기 위한 스크립트를 연결하기 위한 기본 설정을 알아냈습니다. 이제 내부를 살펴보고 필드, 알림 및 기타 모든 항목을 구성하는 방법을 알아 보겠습니다.
하나의 양식에 대한 설정 예 모든 양식에 대한 설정은 Feedback\index.php 파일에 저장됩니다.$form["form-1"] = array("fields" => array("name" => array("title" => "이름", "validate" => array("preg" => "%%) ", "minlength" => "3", "maxlength" => "35",), "messages" => array("preg" => "필드 [ %1$s ]에 오류가 있을 수 있습니다.", "minlength " => "최소 필드 길이 [ %1$s ]는 허용된 것보다 작습니다 - %2$s", "maxlength" => "최대 필드 길이 [ %1$s ]는 허용된 것보다 깁니다 - %2$s", )), "tell " => array("title" => "전화", "validate" => array("preg" => "/^((8|\+)[\- ]?)?(\ (?\d( 3)\)?[\- ]?)?[\d\- ](5,10)$/", "minlength" => "5",), "messages" => array( "preg" => "필드 [ %1$s ]에 오류가 있을 수 있습니다.", "minlength" => "필드 [ %1$s ]의 최소 길이가 허용된 길이 - %2$s보다 작습니다.",) ),), "cfg" => array(" charset" => "utf-8", "subject" => "이메일 제목", "title" => "이메일 본문의 제목", " ajax" => true, "validate" => true, "from_email" = > " [이메일 보호됨]", "from_name" => "noreply", "to_email" => " [이메일 보호됨], [이메일 보호됨]", "to_name" => "noreply1, noreply2", "geoip" => true, "referer" => true, "type" => "html", "tpl" => true, "antispam" => "email77 ", "antispamjs" => "address77", "okay" => "메시지 전송됨 - OK", "fuck" => "메시지 전송됨 - 오류", "spam" => "스팸 로봇", "알림" => "color-modal-textbox", "usepresuf" => false)); // 다음 양식 $form["form-2"] = array("fields" => array(.....
새 양식에 대한 설정을 추가하려면 $form["form-1"] 배열의 예를 따라 $form[""] 새 배열을 만들어야 합니다.
필수 name="" 속성에 대해 제가 말한 것을 기억하시나요?
이제 왜 그것이 여전히 필요한지 말할 때가 왔습니다.
name=""은 배열의 영숫자 키이며 $form[""] 배열에 대해 고유해야 합니다.
명확성을 위한 예제 HTML 코드
이제 배열과 배열이 필요한 이유를 이해해 보겠습니다.
$form["form-1"] = 배열();
$form["form-2"] = 배열(); 등.
다음은 다음을 포함하는 각각의 새 양식에 대한 기본 배열입니다.
- "이름" => 배열(); - 다양한 설정이 있는 양식 요소 설정 배열(예: 입력 이름="이름" 유형="텍스트")입니다.
- "title" => "귀하의 이름" - 오류가 있거나 템플릿에 있는 경우 양식 요소의 이름이 표시됩니다.
- "확인" => 배열(); - 배열, 양식 요소 유효성 검사 규칙 포함
- "preg" => "%%" - 정규식
- "minlength" => "3" - 최소 필드 크기
- "maxlength" => "35" - 최대 필드 크기
- "substr" => "35" - 항상 N자로 자릅니다.
- "메시지" => 배열(); - 검증 메시지를 포함하는 배열, 즉:
- "preg" => "양식 요소가 정규식과 일치하지 않습니다."
- "minlength" => "필드 [ %1$s ]의 최소 길이가 허용 가능한 길이보다 작습니다. - %2$s" - 유효성 검사 오류, 키(preg)가 유효성 검사 키와 일치하지 않습니다.
- "maxlength" => "필드의 최대 길이 [ %1$s ]가 허용 제한 - %2$s을(를) 초과했습니다." - 유효성 검사 오류, 키(preg)가 유효성 검사 키와 일치하지 않습니다.
- "charset" => "utf-8" - 인코딩
- "제목" => "편지의 제목", - 편지의 제목
- "title" => "편지 본문의 제목", - 편지 본문의 제목
- "ajax" => true, - Ajax TODO 형식입니다(필요하지 않은 경우 false로 설정).
- "validate" => true, - (true) 서버에서 양식의 유효성을 검사하려면 js 유효성 검사를 "ajax" => true로 바꿉니다. 끄면(false) 유효성 검사 필드 설정을 지정할 필요가 없습니다. 할 것
- "from_email" => "myemail", - 보낸 사람, 필드 이름(name = "myemail")을 지정하고 사용자의 이메일이 필요하지 않은 경우 스텁 [이메일 보호됨]
- "from_name" => "myname", - 보낸 사람, 필드 이름(name="myname")을 지정하고 사용자 이름이 필요하지 않은 경우 No-reply 스텁
- "to_email" => " [이메일 보호됨]", - 수신자의 이메일입니다. 여러 주소로 보내려면 쉼표로 구분하여 나열하세요. 예("to_email" => " [이메일 보호됨], [이메일 보호됨], [이메일 보호됨]",)
- "to_name" => "noreply1", - 수신자 이름. 여러 주소로 보내는 경우 수신자 이름을 쉼표로 구분하여 나열하세요. 예("to_name" => "noreply1, noreply2, noreply3",)
- "geoip" => true, - TODO 유형을 사용하여 위치 찾기
- "referer" => false, - 양식이 전송된 페이지의 URL을 추가합니다.
- "type" => "plain", - 문자 유형 - 일반, html(html 태그를 사용하는 경우)
- "tpl" => false, - 편지 템플릿을 사용합니다. true인 경우 폴더의 양식 이름(name="form-1")에 따라 템플릿 파일이 연결되고 파일(feedback/tpl/form-1.tpl)이 처리됩니다. 그렇지 않으면 모든 것이 처리됩니다. 있는 그대로 전송되며 각 필드는 새 줄에 추가됩니다.
- "antispam" => "email77", - 스팸 방지 방법은 숨겨진(표시:없음) 필드를 기반으로 하며 로봇만이 자동으로 채워서 자신을 드러냅니다.
- "antispamjs" => "address77", - 스팸 방지 방법은 숨겨진(display:none) 필드를 기반으로 하며 처음에 채워져 페이지가 로드될 때 자동으로 자바스크립트를 지웁니다. 심지어 스마트 로봇도 이를 예상할 수 없습니다. 막힌.
- "okay" => "Message to the user", - 양식이 성공적으로 제출되면 사용자에게 보내는 메시지가 표시됩니다. html 태그를 사용할 수 있습니다.
- "fuck" => "Message to the user", - 사용자에게 보내는 메시지, 양식 제출 시 오류가 발생할 때 표시되는 html 태그를 사용할 수 있습니다.
- "spam" => "사용자에게 보내는 메시지", - 사용자에게 보내는 메시지, 스팸 로봇이 의심되는 경우 표시되며 html 태그를 사용할 수 있습니다.
- "notify" => "color-modal", - 표시할 알림 유형, 텍스트 상자 - 페이지 상단 모서리의 블록, color - 양식의 색상 강조, modal - 페이지 중앙의 모달 창, 없음 - 장애를 입히다. 예를 들어 색상 모달 - 강조 표시로 필드를 채울 때 발생하는 오류와 TODO 모달 창의 텍스트 전송 상태를 결합할 수 있습니다.
- "usepresuf" => false - 제목이나 편지 제목에 사용자 정의 추가가 사용되는지 여부, 작은 변경의 경우 %%cfg.title.suffix%%와 같이 지정할 수 있습니다. 양식의 숨겨진 필드, 자세한 내용은 f -qiu presuf()를 참조하세요.
먼저 양식을 템플릿으로 보내려면 양식 설정에서 템플릿 파일 사용을 활성화해야 합니다. - "tpl" => true ,
둘째, 양식 이름(name="form-1" )에 따라 폴더(feedback/tpl/)에 *.tpl 확장자를 가진 템플릿 파일을 만들어야 합니다.
예: (feedback/tpl/form-1.tpl)
| 이메일 본문의 제목 | |
| %%이름.제목%% | %%이름.값%% |
| %%tell.title%% | %%tell.value%% |
이름, 말 등 - 사용자가 입력하는 필드의 속성(name="")입니다.
title - 양식 요소 설정 배열에 설정된 양식 요소의 이름입니다.
값 - 양식 요소의 값입니다.
오늘은 여기까지입니다. 하지만 스크립트가 확실히 완벽하지는 않으므로 버그에 대한 의견과 설명을 환영하며 향후 버전에서 수정될 예정입니다.
추신 스크립트는 팀에서 개발했습니다.
사이트에서 가장 인기 있는 기능 중 하나는 신청서 또는 주문 양식으로, 이 양식에서 나온 데이터는 이메일을 통해 사이트 소유자에게 전송됩니다. 일반적으로 이러한 양식은 간단하며 데이터 입력을 위한 2~3개의 필드로 구성됩니다. 그러한 주문 양식을 작성하는 방법은 무엇입니까? 이를 위해서는 HTML 마크업 언어와 PHP 프로그래밍 언어를 사용해야 합니다.
HTML 마크업 언어 자체는 간단합니다. 특정 태그를 어디에 어떻게 넣을지 알아내기만 하면 됩니다. PHP 프로그래밍 언어를 사용하면 상황이 좀 더 복잡해집니다.
프로그래머에게는 이러한 양식을 만드는 것이 어렵지 않지만 HTML 레이아웃 디자이너에게는 일부 작업이 어려워 보일 수 있습니다.
HTML로 데이터 제출 양식 만들기첫 번째 줄은 다음과 같습니다
이는 형태의 매우 중요한 요소입니다. 여기에는 데이터가 전송되는 방법과 파일이 표시됩니다. 이 경우 모든 것은 POST 메소드를 사용하여 send.php 파일로 전송됩니다. 이 파일의 프로그램은 그에 따라 데이터를 수신해야 하며, 이는 포스트 배열에 포함되어 지정된 이메일 주소로 전송됩니다.
다시 형태로 돌아가자. 두 번째 줄에는 성명을 입력하는 필드가 포함됩니다. 다음 코드가 있습니다:
양식 유형은 텍스트입니다. 즉, 사용자는 키보드에서 여기에 텍스트를 입력하거나 복사할 수 있습니다. name 매개변수에는 양식 이름이 포함됩니다. 이 경우 사용자가 이 필드에 입력한 모든 내용이 이 이름으로 전송됩니다. 자리 표시자 매개변수는 설명으로 이 필드에 기록될 내용을 지정합니다.
다음 줄:
여기서는 거의 모든 것이 동일하지만, 해당 필드의 이름은 이메일이고 설명은 사용자가 이 양식에 자신의 이메일 주소를 입력한다는 것입니다.
다음 줄은 "보내기" 버튼입니다:
그리고 양식의 마지막 줄이 태그가 됩니다.
이제 모든 것을 하나로 묶어 보겠습니다.
이제 양식의 필드를 필수로 만들어 보겠습니다. 다음 코드가 있습니다.
이것은 send.php라는 파일이 될 것입니다.
파일의 첫 번째 단계에서는 포스트 배열의 데이터를 받아들여야 합니다. 이를 위해 두 가지 변수를 만듭니다.
$fio = $_POST["fio"];
$email = $_POST["이메일"];
PHP의 변수 이름 앞에는 $ 기호가 붙고 세미콜론은 각 줄 끝에 배치됩니다. $_POST는 양식의 데이터가 전송되는 배열입니다. html 형식에서는 전송 방법을 method="post"로 지정합니다. 따라서 html 형식의 두 변수가 허용됩니다. 귀하의 사이트를 보호하려면 이러한 변수를 여러 필터(php 함수)를 통해 전달해야 합니다.
첫 번째 함수는 사용자가 양식에 추가하려고 하는 모든 문자를 변환합니다.
이 경우 PHP에서는 새로운 변수가 생성되지 않고 기존 변수가 사용됩니다. 필터가 수행할 작업은 문자 "