편지 보내기 양식이 포함된 모달 창입니다. Ajax를 사용한 간단한 문의 양식입니다. 지침에 따라 모든 작업을 수행했지만 양식이 작동하지 않습니다. 오류는 어디서 찾아야 합니까?
안녕하세요, 독자 여러분! 이 튜토리얼에서는 JQuery를 사용하여 입력된 주소의 유효성을 검사하여 HTML5 이메일 구독 양식을 만드는 방법을 보여 드리겠습니다. 정규식을 사용하여 확인하고, 입력된 주소를 MySql 데이터베이스에 저장하겠습니다. 이렇게 하면 저장할 때 AJAX가 사용됩니다(즉, 페이지를 다시 로드하지 않고 PHP 스크립트를 호출합니다). 결과는 데모 페이지에서 볼 수 있으며, 소스도 다운로드할 수 있습니다. 시작해 봅시다!
기본 마크업새로운 index.html 파일을 생성하는 것부터 시작해 보겠습니다. 그리고 HTML5를 준수하는 간단한 문서 구조를 만들어 보겠습니다. 또한 CSS 스타일과 라이브러리를 즉시 연결하며 입력된 이메일을 확인할 때 필요합니다.
1 |
|
이제 양식을 만들 준비가 되었습니다!
이메일 구독 양식우리 양식의 목적은 방문자가 입력한 이메일 주소를 확인하고 이를 구독자 목록에 저장하는 것입니다. 이를 위해 편리하게 주소를 처리하고 데이터베이스나 파일에 저장하는 버튼을 사용하여 일반 양식을 만듭니다. 이번 강의에서는 데이터베이스에 데이터를 저장하는 방법을 살펴보겠습니다. 이는 더 명확해질 것이며, 입력된 주소의 정확성을 확인하는 데 중점을 둘 것입니다. 구독 양식은 다음과 같습니다.
1 |
구독하다 |
주소를 저장한 후 양식을 접을 수 있도록 양식을 #completeform div 블록으로 래핑해 보겠습니다.
또한 입력 필드에 몇 가지 새로운 속성을 사용합니다. 필드 유형은 모바일 브라우저가 적절한 키보드를 표시할 수 있도록 "이메일"로 설정됩니다. Chrome 및 일부 WebKit 브라우저는 이를 사용하여 사용자가 주소를 입력했는지 확인합니다. 자동 수정 및 자동 대문자화 속성은 모바일 브라우저용으로 특별히 설계되었습니다.
id 오류가 있는 Span은 처음에 숨겨져 있으며 값이 none인 표시 속성이 이에 대한 책임이 있습니다. 이를 스타일 파일에 기록했습니다. 이에 대해서는 나중에 자세히 설명합니다. 그러나 사용자가 범위에 잘못된 이메일 주소를 입력하면 즉시 경고 메시지가 표시됩니다.
jQuery 유효성 검사기 및 AJAX 요청간단한 이메일 주소 확인 기능부터 시작해 보겠습니다. 정규식 문자열을 사용하여 텍스트 문자열이 표준 이메일 구문과 일치하는지 확인한 다음 부울 값 true를 반환하고 그렇지 않으면 false를 반환합니다.
CompleteInviteForm() 함수를 살펴보겠습니다. 주소 입력 양식이 혼동되는 것을 방지하기 위해 400밀리초 동안 fadeOut 효과를 사용하겠습니다. 그리고 콜백으로 $.ajax() 함수를 호출해서 save.php 파일을 호출하고 입력된 주소를 데이터베이스에 저장해보자. 아래에 save.php 파일의 소스 코드를 제공하겠지만 지금은 $.ajax() 함수를 살펴보겠습니다.
$.ajax - HTTP 요청을 사용하여 원격 페이지를 로드합니다. $.ajax() 함수에는 요청을 초기화하고 관리하는 데 사용되는 키/값 쌍으로 구성된 객체가 전달됩니다. 이 경우에는 다음 개체를 사용합니다.
- type:'POST' - 파일에 대한 요청 유형을 선택합니다. 기본적으로 GET입니다. POST와 GET의 차이는 특별히 크지 않습니다. 단지 GET 요청의 경우 데이터가 헤더로 전송되고 POST로 본문으로 전송된다는 점만 다를 뿐입니다. 요청에 따라 POST를 사용하면 더 많은 양의 정보를 전송할 수 있습니다.
- url:'save.php' — 실행 파일 경로;
- data:'email='+$("#email").val() - 서버로 전송되는 데이터입니다. CSS 선택자 #email을 사용하여 id="email"로 요소에 액세스하고 value 속성의 내용, 즉 사용자가 입력한 이메일을 가져옵니다. 그리고 이 내용을 save.php 파일에서 사용할 email 변수에 할당할 것입니다.
- 성공: function())( $('#completeform').before('모든 것이 준비되었습니다! 메일링 리스트에 추가되었습니다. ');) - ajax 요청이 성공적으로 완료되면 성공 함수가 호출됩니다. 이 함수는 다음 작업을 수행합니다. #completeform div 앞에 이메일이 메일링 리스트에 추가되었음을 사용자에게 알리는 콘텐츠를 삽입합니다.
1 | 함수 CompleteInviteForm()( |
그리고 setTimeout 메서드를 사용하면 양식을 숨기고 Ajax 요청을 실행하는 작업이 1100밀리초의 지연 시간을 두고 비동기적으로 발생합니다.
양식 처리페이지 요소에 더 쉽게 액세스할 수 있도록 #error 및 #btnwrap 선택기를 사용하여 몇 가지 변수를 만들어 보겠습니다.
var erdiv = $("#error" ) ; |
라이브 이벤트 핸들러를 사용하여 id=”sendbtn” 으로 “구독” 버튼 클릭을 추적합니다. e.preventDefault() 메소드;
작업(버튼 클릭)에 대한 브라우저의 표준 동작을 취소합니다. 즉, 페이지 새로 고침 및 URL 변경을 취소합니다. 입력된 이메일을 emailval 변수에 할당하고 이 변수 처리를 시작할 수 있습니다.
첫 번째 if(!isEmail(emailval))은 isEmail 함수가 false를 반환했는지 확인합니다. 이는 사용자가 입력한 이메일 주소가 정규 표현식과 일치하지 않는다는 의미입니다. 즉, 올바르지 않습니다. 오류 블록에서 이에 대해 사용자에게 알립니다. 메시지를 표시합니다(이메일 주소를 올바르게 입력하지 않았습니다).
이제 두 번째 if는 사용자가 유효한 이메일 주소를 입력한 경우에만 실행됩니다. 그런 다음 주소 저장 프로세스를 시작할 수 있습니다.
1 | 프로세스를 명확하게 하려면 오류 블록에 적절한 텍스트를 삽입하고 "구독" 버튼이 있던 블록에 GIF 이미지를 배치하세요. 그리고 위에서 설명한 CompleteInviteForm() 함수를 호출합니다. |
데이터 베이스
입력한 주소를 데이터베이스에 저장하는 방법을 선택했기 때문에 데이터베이스와 테이블 자체를 생성하는 방법에 대해 간략하게 설명하고 약속대로 MySql 데이터베이스와 연동되는 save.php 파일의 코드에 대해서도 설명하겠습니다. 
이를 위해서는 로컬 서버가 필요합니다. 저는 Denwer를 사용합니다. 확실히 많은 분들이 사용하고 계시기 때문에 자세한 내용은 다루지 않겠습니다. phpMyAdmin으로 이동하여 이메일 데이터베이스를 만듭니다.
구독자의 주소를 저장하려면 두 개의 필드가 있는 하나의 테이블이 필요합니다. 이를 주소라고 하겠습니다.
- 필드는 다음과 같습니다.
- id — 이메일 주소 식별자(기본 키라고도 함)
파일 save.php
1 |
|
먼저, 전역 POST 배열에 email 변수가 있는지 확인합니다. 그렇다면 해당 값을 로컬 변수 $email 에 할당합니다. 다음으로, 비밀번호 없이 mysql_connect() 사용자 루트 서버에 대한 연결을 설정합니다. 이메일 데이터베이스를 선택하고 데이터베이스에 대한 쿼리를 실행하고 주소 테이블에 새 레코드를 삽입합니다. 여기서 $email 변수의 값이 주소 필드에 삽입됩니다. 그게 다야!
이것으로 수업을 마칩니다. 이 구독은 서버에서만 작동한다는 점을 상기시키고 싶습니다(우리는 데이터베이스 및 를 사용하기 때문에).
안녕하세요 여러분. 버튼을 클릭하면 모달 창에 나타나는 양식을 구현하는 방법에 대한 질문이 쏟아졌고, 제출 후에는 성공 또는 실패에 대한 메시지가 표시됩니다.
인터넷에 비슷한 것들이 많이 있는 것 같은데, 물어보시는 분들이 많아서 하기로 했어요. 또한 콜백 버튼을 구현하려면 거의 모든 랜딩 페이지에 이러한 기능이 있어야 합니다. 그리고 실제로 열린 양식이 모달 창에 숨겨져 있고 버튼을 클릭한 후 열리는 것보다 더 나쁘게 작동한다는 것을 보여주는 AB 테스트 결과가 점점 더 많아지고 있습니다.
일부 사람들은 이것이 사람들이 천천히 "면역력을 개발"하고 있으며 공개 형태가 공격적인 판매라는 사실 때문이라고 주장합니다. 아마도 지금은 사용자가 열린 양식을 보고 자신에게 무언가를 "판매"하려고 한다고 믿을 때입니다. 나는 이 이론에 전적으로 동의하지는 않지만 어느 정도 진실이 있습니다. 이는 일부 유형의 비즈니스에 해당될 수 있습니다. 이제 양식 구현을 시작해 보겠습니다.
메모! 각 작업을 자세히 설명하지는 않지만 소스 코드에서 미리 만들어진 버전을 제공합니다. 질문이 있으시면 댓글에 적어주세요. 우리는 그것을 알아낼 것입니다 :)
오늘은 jQuery가 아닌 버튼과 폼의 레이아웃부터 시작해보겠습니다. 페이지 끝에 모든 스크립트가 포함됩니다.
클릭하면 모달 창이 열리는 버튼:
요청을 남겨주세요
모든 클래스를 설정할 수 있지만 href에 #modal을 작성하세요. 이는 음영 처리 및 문의 양식이 포함된 컨테이너의 ID가 됩니다.
이제 양식의 코드와 양식이 위치할 블록을 제공하겠습니다.
귀하의 연락처 정보를 남겨주시면 컨설턴트가 귀하에게 연락할 것입니다. 내 웹사이트에 이 양식을 원합니다.
스타일을 추가한 후의 모습은 다음과 같습니다.
모달 창을 생성하기 위해 Remodal 라이브러리가 사용되었습니다. 이것은 애니메이션 모달 창을 만들기 위한 CSS 및 js 파일 세트입니다. 링크에서 다운로드하거나 기사 끝 부분에 있는 편집 내용을 통해 다운로드할 수 있습니다.
head 태그 사이에 스타일을 추가합니다.
그리고 닫는 body 태그 앞에 스크립트를 추가하세요.
Script.js는 양식을 처리하기 위한 스크립트입니다. 페이지를 다시 로드하지 않고도 전체 절차를 수행할 수 있게 해주는 동일한 Ajax:
$(document).ready(function () ( $("form").submit(function () ( // 양식 ID 가져오기 var formID = $(this).attr("id"); // 해시 추가 이름 ID var formNm = $("#" + formID); $.ajax(( type: "POST", url: "mail.php", data: formNm.serialize(), Success: function (data) ( // 전송 결과 텍스트 출력 $(formNm).html(data); error: function (jqXHR, text, error) ( // 전송 오류 텍스트 표시 $(formNm).html(error); ) ) ); ));
모달 창과 양식을 담당하는 파일의 CSS 및 js 소스 코드는 상당히 크기 때문에 제공하지 않겠습니다. 그렇다면 소스를 살펴보세요. 그러나 PHP 핸들러는 대체로 표준입니다.
이메일 주소를 자신의 이메일 주소로 변경하는 것을 잊지 마세요.
이것이 우리가 얻은 ajax 형식입니다. 각 요소가 어떻게 만들어졌는지 자세히 설명하지 못해 죄송합니다. 그냥 완성된 결과물을 내고 싶었을 뿐인데, 애니메이션이나 등장인물을 모두 설명하는 것은 의미가 없습니다. 소스를 다운로드하여 웹사이트에 구현해 보세요. 오늘은 그게 전부입니다. 모두들 행운을 빌어요!
여러분, 실제 서버나 가상 서버(호스팅)에서 양식을 테스트해 보시기 바랍니다. 서버가 PHP를 지원하는지, 평가판 기간이 아닌 유료 요금제인지 확인하세요. 그렇지 않으면 90%의 경우 양식이 작동하지 않습니다.
방금 브라우저에서 색인 파일을 열고 "보내기" 버튼을 클릭했다면 받은 편지함에 편지가 있을 것이라고 기대하지 마세요. PHP는 서버측 언어입니다!
스스로 알아 내고 양식을 만들기에는 너무 게으른 경우주의를 기울이는 것이 좋습니다.
기사의 업데이트된 버전이 있습니다.
우리 모두는 사용자 피드백을 위해 특별히 제작된 별도의 페이지에서 연락처 정보를 보는 데 익숙합니다. 일반적으로 이러한 페이지에는 연락처 양식 외에도 상호 작용 및 의사 소통을 위한 기타 많은 정보가 게시됩니다. 메커니즘은 잘 확립되어 있으며 수년에 걸쳐 테스트되었으며 완벽하게 작동합니다. 하지만 어떤 경우에는 사용자를 다른 페이지로 리디렉션하지 않고 별도의 문의 양식을 팝업 창으로 표시해야 할 필요가 있습니다.
한때 우리는 jQuery로 구동되는 것을 살펴보았습니다. 오늘은 사이트에 대해 원래 디자인된 별도의 팝업 문의 양식을 만드는 흥미로운 솔루션을 소개하고 싶습니다.
제 생각에는 사용자 상호작용 도구의 훌륭한 예입니다.
우리는 그 예를 살펴보았습니다. 이제 HTML로 전체 구조를 생성하는 것부터 CSS를 사용하여 레이아웃의 모양을 생성하는 것까지 이 양식을 구성 요소로 분해해 보겠습니다.
양식의 HTML 코드특별한 식별자와 클래스가 있는 블록 div 요소에 배치된 일반 연락처 양식의 가장 간단한 가능한 프레임워크는 CSS에서 양식의 모양을 추가로 형성하고 약간의 자바스크립트와 상호 작용합니다. 이를 활성화하고 팝업 양식을 닫으세요.
| 닫다메시지 보내기 |
닫다메시지 보내기 여기에 메시지를 입력하세요..
또한, 팝업창 활성화 시 일반 배경에 어두워지는 레이어를 생성해야 합니다. 이 작업은 다양한 방법으로 수행할 수 있지만 너무 영리하지 않고 다른 div를 추가하여 식별자를 할당합니다: id="fade" 및 클래스: class="black-overlay" . 필요한 경우 오랫동안 검색하지 않아도 되도록 양식 옆에 배치할 수 있습니다.
피드백
닫기 버튼이 연락처 양식 블록의 헤더 바로 앞에 새겨져 있다는 것을 눈치챘을 것입니다. 이것은 논리적이지만, 다른 곳에 있어야 하는 경우에는 버튼이 양식과 함께 나타나고 사라져야 합니다. 나중에 CSS에서 닫기 버튼의 모양과 위치를 만들겠습니다.
그게 전부입니다. 이제 팝업 피드백 양식이 포함된 페이지의 전체 HTML 코드를 살펴보겠습니다.
| 팝업 문의 양식 피드백닫다메시지 보내기 여기에 메시지를 입력하세요.. |
팝업 문의 양식 피드백닫다메시지 보내기 여기에 메시지를 입력하세요..
CSS를 사용하여 연락처 양식의 스타일을 지정하는 재미있는 부분으로 넘어가기 전에 잠시 되돌아가겠습니다. 가장 세심한 사람들은 아마도 양식을 열고 닫는 버튼이 "재머" href="javascript:void(0)" 가 있는 링크 형태로 구현되어 있음을 알아차렸을 것입니다. 이것이 좋든 나쁘든, 나는 이 방법을 습관적으로 사용한다. onclick 이벤트가 스크립트에 의해 처리되는 요소의 경우에는 또는 를 사용하는 것이 더 논리적이고 정확하다고 생각합니다. 원한다면 언제든지 이 예제의 버튼을 사용하여 이 작업을 수행할 수 있습니다.
CSS의 마법이 피드백 양식은 일부 디자인을 수정한 원래 스타일로 만들어졌기 때문에 최신 CSS3 표준만 사용하는 레이아웃 옵션은 상당히 문제가 많습니다.
전체 디자인의 기초, 연락처 양식의 배경은 봉투의 간단한 그림이 될 것입니다. 이 그림은 사용자가 자신 앞에 열린 내용에 대해 어떤 의심도 남기지 않을 것입니다.)))) 닫기 버튼에서 우리는 또한 마우스를 올리면 변경되도록 두 개의 작은 그림을 사용하십시오. 이 모든 그림을 자신만의 것으로 쉽게 변경할 수 있으며, 일반적으로 버튼도 용기가 있으면 CSS3를 사용해 놀 수 있습니다.
다음은 명확성을 높이고 불필요한 질문을 피하기 위해 몇 가지 설명이 포함된 멋진 형식의 CSS 코드 자체입니다.
/* 배경 어두워지는 레이어 설정, ** 어두워지는 위치, 색상 및 강도 정의 */ .black-overlay( display: none; position:absolute; top: 0%; left: 0%; width: 100%; 높이: 100% ; 배경색: 검정; -moz-opacity: .70; 필터: 알파(불투명도=70); / .envelope ( 표시: 없음; 위치: 절대; 너비: 600px height: 340px; background: url(images/envelope.png) center no-repeat; z-index:1002; position:relative; margin: 10% auto ) /* 닫기 버튼 형성, ** 크기 form */ .close-btn ( 폭: 31px; 높이: 31px; 디스플레이: 블록; 커서: 포인터;/* 이외의 용도로 사용하는 경우) 태그 */ 배경: url(images/close.png); 5) 삽입 0px 1px 2px 0px rgba(0,0,0,0.2); 5) 삽입 0px 1px 3px rgb(97,108,122);
코드는 상당히 방대했지만 무엇을 할 수 있습니까? 물론 CSS3 표준의 새로운 속성과 기능을 실험하고 실행하는 것이 허용되고 정당화되는 즐거움을 부인할 수 없습니다. 덕분에 흥미롭고 신선한 레이아웃 솔루션이 등장합니다. 실수와 의심이 없는 것은 아니지만 이것은 실제적인 움직임이자 동시에 유용한 연습입니다.
모두! 여러분과 함께 우리는 사용자와 상호 작용하기 위한 훌륭한 도구인 사이트의 팝업 문의 양식을 만들었습니다. 여러분이 해야 할 일은 실제 예제를 보고, 원할 경우 소스를 다운로드하고, PHP 처리기를 양식에 첨부하는 것뿐입니다.
소스가 포함된 아카이브에서 필요한 모든 항목과 양식의 배경 이미지에 대한 몇 가지 추가 옵션을 찾을 수 있습니다.
2017년 5월 21일부터 업데이트
소스 아카이브에 "mail" 폴더를 추가했는데, 여기에서 양식에 대한 간단한 PHP 핸들러와 구성을 위한 구성 파일을 찾을 수 있습니다. 핸들러는 이 양식에 연결되어 있으며 핸들러 파일의 코드에 직접 작성된 작은 지침과 설명이 무엇을, 어디서, 왜 알아내는 데 도움이 되기를 바랍니다.
감사합니다, 안드레이
사이트에 한 번, 일정 시간 후에 표시되는 팝업 창을 만드는 방법에 대해 집중했습니다. 따라서 옵션으로 이 창에 양식을 삽입할 수 있습니다. 일반적으로 구독 양식이나 문의 양식 등 무엇이든 될 수 있습니다. 페이지를 다시 로드하지 않고도 데이터가 전송되도록 팝업 창에 Ajax 양식을 표시하는 것이 더 좋습니다.
기사 구조
예를 들어 Joomla 또는 WordPress와 같은 엔진에서 웹 사이트를 만드는 경우 디자이너를 포함하여 다양한 기성 양식 솔루션을 사용할 수 있습니다. 그러나 단순히 순수 HTML로 디자인하고 있는데 고객이 양식이 제대로 작동하도록 "재생"해 달라고 요청한 경우에는 어떻게 될까요? 이 양식이 유용한 곳입니다.
UPD. 2018년 8월 2일
해당 양식이 GitHub에 게시된 점을 고려하여 기사를 다시 작성했습니다.
이제 시작하겠습니다. 우선, 내 GitHub 저장소에서 양식 소스를 다운로드하세요.
Gulp 작업 관리자를 사용하여 이 어셈블리를 조립했습니다. 나는 그와 함께 일하는 방법에 대해 썼습니다. 꼭 읽어보세요.
양식을 사이트에 연결하기양식과 함께 아카이브의 압축을 풉니다. 그런 다음 dist 폴더의 모든 콘텐츠를 사이트 템플릿의 form 폴더(예: ajax-form)에 복사합니다. 다음으로 스타일과 스크립트 등 리소스를 연결합니다. CSS 및 js 폴더에는 압축 버전과 일반 버전의 두 가지 버전이 있습니다. 나중에 코드를 변경할 계획이라면 압축되지 않은 버전을 연결하는 것이 좋습니다.
사이트에 이미 jQuery 라이브러리가 활성화되어 있으면 연결할 필요가 없습니다. 주의하시기 바랍니다.
양식 초기화필드 유효성 검사는 HTML5를 사용하여 구성된다는 점을 즉시 알아두겠습니다.
양식은 .simpleSendForm() 메소드에 의해 호출됩니다. 예를 들면 다음과 같습니다.
$("#idForm").simpleSendForm();
#idForm 대신 양식 식별자를 지정합니다. 일반적으로 scripts.js 파일에서 양식 초기화 코드를 찾을 수 있습니다. 플러그인 호출 코드는 거기에서 잘라내어 . jQuery.(document).ready() 를 잊지 마세요.
양식에는 몇 가지 옵션이 포함될 수 있습니다.
옵션- SuccessTitle(문자열) — 양식 제출 시 감사 메시지 제목입니다. 기본값은 “저희를 선택해 주셔서 감사합니다!”입니다.
- 성공텍스트(문자열) - 감사 메시지 제목 아래의 텍스트입니다. 기본값은 "곧 연락드리겠습니다."입니다.
- errorTitle(문자열) — 양식 제출 오류 메시지의 제목입니다. 기본값은 "메시지가 전송되지 않았습니다!"입니다.
- errorSubmit(문자열) — 양식 제출 오류 메시지의 텍스트입니다. 기본값은 "양식 제출 중에 오류가 발생했습니다!"입니다.
- errorNocaptcha(문자열) — 보안 문자가 채워지지 않은 경우 오류 텍스트입니다.
- errorCaptcha(문자열) — 검사가 실패한 경우 오류 텍스트입니다.
- mailUrl(문자열) — 핸들러 파일의 경로입니다. 기본값은 "../form-submit/submit.php"입니다. "form-submit" 폴더가 사이트 루트에 없으면 전체 경로를 변경하고 지정해야 합니다.
- autoClose(부울) - 성공적인 양식 제출 후 창을 자동으로 닫습니다(모달 창의 양식의 경우). 양식 창이 닫히고 5초 후에 감사 메시지가 표시됩니다. 이 시간은 재정의될 수 있습니다.
- autoCloseDelay(숫자) - 감사 메시지를 표시한 후 닫히는 기간(밀리초)입니다. 기본값은 5000(5초)입니다.
- 디버그(부울) - 기본적으로 false입니다. 양식에 문제가 있는 경우 디버깅을 활성화합니다. 콘솔에서 오류 메시지를 확인하세요.
- 보안 문자(부울) - 기본값은 false입니다. Recaptcha 2.0을 활성화 또는 비활성화합니다.
- captchaPublicKey(문자열) — recaptcha 공개 키입니다.
우리의 양식은 모달 창에도 표시될 수 있습니다. 모달은 라이브러리에 표시됩니다.
HTML 코드버튼 코드
전화를 요청하세요양식 코드
모달 창과 폼을 초기화합니다. 3초 후에 창이 자동으로 닫히도록 만들어 보겠습니다. 양식을 성공적으로 제출한 후. Magnific Popup 호출 코드는 scripts.js 파일에서도 찾을 수 있습니다.
모달 창을 사용하여 양식 호출 // ======= Magnific Popup 초기화 ======= $(".modal-popup").magnificPopup(( type: "inline",fixedContentPos: false,fixedBgPos : true ,overflowY: "auto", closeBtnInside: true, preloader: false, midClick: true, RemovalDelay: 300, mainClass: "mfp-top-up" )); // ===== 모달 양식 초기화 ==== $("#idForm").simpleSendForm (( SuccessTitle: "귀하의 지원서가 승인되었습니다!", SuccessText: "저희 직원이 최대한 빨리 연락드릴 것입니다." , autoClose : true, autoCloseDelay: 3000 )); Recaptcha를 활성화하는 방법은 무엇입니까?양식에서 recaptcha를 활성화하려면 양식을 표시하려는 위치에 양식의 html 코드에 recaptcha 클래스가 있는 빈 블록을 추가해야 합니다. 다음으로, 양식 플러그인을 호출하는 코드에서 값이 true인 captcha 옵션을 전달하고 recaptcha 공개 키를 captchaPublicKey 옵션에 전달합니다. 공개키와 개인키를 얻을 수 있습니다.
// ===== 형식으로 보안문자 초기화 ==== $("#idForm").simpleSendForm(( SuccessTitle: "귀하의 지원서가 승인되었습니다!", SuccessText: "저희 직원이 최대한 빨리 연락드릴 것입니다. ." , autoClose: true, autoCloseDelay: 3000, captcha: true, captchaPublicKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" ));다음으로, form-submit 디렉터리에서 양식 핸들러 파일 submit.php를 엽니다. recaptchaOn 변수(7번째 줄 정도)를 찾아 true 로 설정합니다. 다음으로 $secret 변수(대략 89행)를 찾아 개인 키를 자신의 것으로 변경합니다.
기본적으로 모든 것. 이러한 조작 후에는 보안 문자가 표시되어야 합니다.
Google의 테스트 키가 표시되어 있으므로 데모 사이트에서는 보안 문자가 테스트 모드에서 작동합니다.
이제 양식 핸들러 파일(submit.php)을 살펴보고 주요 코드 부분을 살펴보겠습니다. 핸들러는 PHP에서 작동하므로 양식을 테스트하려면 .
가능한 오류 양식의 메시지가 전송되지 않고 프리로더가 실행만 됩니다. 무엇이 문제인가요?양식 초기화에서 처리기 파일의 경로가 올바르게 지정되었는지 확인하세요.
mailUrl: — 처리기 파일의 경로
또한 recaptcha가 올바르게 활성화되어 있는지 확인하십시오. 즉, 비활성화된 경우 초기화 코드의 recaptcha 옵션과 핸들러 파일의 $recptchaOn을 false로 설정하거나 recaptcha가 활성화된 경우 true로 설정해야 합니다.
Google Recaptcha가 양식에 표시되지 않습니다.recaptcha(recaptcha 호출), $recaptchaOn(핸들러 파일) 값이 전송되었는지 확인 - 진실. 또한 공개 키와 비공개 키를 올바르게 지정했는지 확인하세요.
지침에 따라 모든 작업을 수행했지만 양식이 작동하지 않습니다. 오류는 어디서 찾을 수 있나요?우선, 브라우저 콘솔을 살펴보고 오류가 있는지 확인하는 것이 좋습니다. 또한 jQuery 라이브러리가 활성화되어 있는지 확인하십시오. scripts.js 파일이 올바르게 포함되어 있는지 확인하세요. 모든 것이 괜찮다면 debug: true 옵션을 사용하여 디버깅을 활성화해 보십시오. 전원을 켠 후 콘솔에서 오류를 확인하세요.
이것이 형태입니다. 귀하의 웹사이트에서 이를 사용하십시오. 귀하에게 도움이 되기를 바랍니다. 내가 또 무슨 말을 할 수 있나요? 지금 이야기합시다-댓글에서. 불분명한 것이 있는지 물어보세요. 또한, 오류를 발견하시면 즉시 알려주시면 수정하도록 하겠습니다...
그게 다야. 관심을 가져주셔서 감사합니다. 다음 게시물에서 만나요!