Ajax 기반 HTML5 / CSS3 문의 양식 작성 방법
문의 양식은 방문자의 의견이나 문의 사항을 웹 마스터에게 전달하는 메신저 역할을하기 때문에 모든 웹 사이트에 치명적인 필수 요소입니다. 웹에 수많은 문의 양식이 있지만 안타깝게도 대부분은 내부 작동 부품을 설명하지 않으므로 팝업 기술, HTML5 및 CSS3을 기반으로 처음부터 고급 연락처 양식을 작성하도록 안내하는 자세한 자습서가 제공됩니다.
웹 기반 전자 메일 문의 양식의 특성을 감안할 때 우리는 또한 풍부한 사용자 인터페이스를위한 전자 메일 및 jQuery 함수를 전송하는 PHP 백엔드 코드 인 두 개의 별도 응용 프로그램 필드로 다이빙해야합니다. 결국 우리는 나중에 맞춤 설정을 염두에두고 작성된 완전히 동적 인 기능적 연락처 양식을 남겨 둘 것입니다..
자신 만의 고급 문의 양식을 작성하십시오.!
바로 가기 :
- 데모 - 건물의 미리보기 받기
- 다운로드 - 모든 파일 다운로드 (php + css)
응용 프로그램 구성
시작하려면 작업 할 웹 서버 유형이 필요합니다. Windows 시스템을 실행중인 경우 WAMP가 가장 좋은 옵션 일 것입니다. Mac 사용자는 MAMP라는 비슷한 프로그램을 설치하기 쉽습니다..
이 패키지는 PHP에 대한 전체 액세스 권한을 가진 컴퓨터에 로컬 서버를 설치합니다. 또는 서버 공간을 소유하거나 원격 위치에 전체 서버 액세스 권한이있는 경우이를 대신 사용할 수 있습니다. 우리는 어떤 MySQL 데이터베이스도 필요로하지 않을 것입니다..
서버가 설정되면 응용 프로그램을 저장할 새 폴더 만들기. 해로운 제품이 아니거나 최종 제품과 관련이 없으므로 원하는대로 이름을 지정할 수 있습니다. 폴더 구조는 웹 브라우저에서 파일에 액세스 할 때 사용됩니다. 간단한 예제가 될 것입니다. http : //localhost/ajaxcontact/contact.php
우리의 파일을 만들자.!
우리는 2 개의 핵심 파일 내에서만 작업 할 것입니다. 먼저 코어가 필요합니다. .PHP 우리의 애플리케이션 로직뿐만 아니라 프론트 엔드 HTML 마크 업을 수용하기위한 파일. 아래는 시작 파일에서 가져온 샘플 코드입니다..
HTML5 / CSS Ajax 문의 양식 (jQuery 포함)
시작하기 위해 우리는 문서에 간단한 제목 섹션을 작성했습니다. 여기에는 일반 HTML5에 대한 Doctype 선언 일부 HTML / XML 문서 요소 이것들은 꼭 필요한 것은 아니지만 구형 브라우저 (또는 최신 브라우저)의 렌더링 프로세스를 쉽게 해줍니다. 또한 더 많은 정보를 제공하는 것이 결코 아프지 않습니다..
조금 더 아래로 우리는 우리의 닫는 제목 태그 바로 전에 2 줄을 볼 수 있습니다. 첫 번째 부분에는 온라인 Google 코드 저장소의 jQuery 스크립트. 이는 동적 페이지 오류가 작동하는 데 필요합니다. 바로 아래에 우리는 기본 CSS 문서 모든 페이지 스타일 포함.
문서 본문에는 몇 가지가 있습니다. 함유 부문 주요 연락처 양식을 보류. 여기에는 3 개의 입력 요소가 있습니다. 사용자 이름, 이메일 주소, 과 개인적 메시지. HTML 마크 업은 상당히 표준 적이며 중간 개발자의 마음을 불허해서는 안됩니다..
귀하의 이메일이 전송되었습니다. 후자!
여기 우리는 기본적인 것을 가지고있다. PHP 조건부 코드 몇 페이지 컨테이너 내에 중첩됩니다. 이것은 이름이 지정된 변수의 설정 값을 검사합니다.
$ emailSenttrue와 같으면 성공 메시지를 표시합니다..양식 HTML 내부
그만큼 그밖에 문은 처음에 보낼 내용이 없으므로 첫 페이지로드에서 실행되는 내용입니다. 여기에 우리는 양식 요소의 간단한 수집 및 제출 버튼.
양식을 제출하는 중 오류가 발생했습니다.
다른 사람이 있다는 것을 눈치 챘을 수도 있습니다. 조건부 블록 시작 양식 직후. 이것은 이름이 지정된 변수를 검사합니다. $ hasError 확인시 오류 메시지가 표시됩니다. 이 대체 방법은 다음과 같습니다. 자바 스크립트가 비활성화 된 경우에만 사용됩니다. 브라우저에서 동적 오류를 생성 할 수 없습니다..
우리가 찾을 수있는 모든 길 개별 PHP 변수 확인 중입니다. 이 선언문은 이미 부분 데이터 만 채워져 양식이 제출 된 경우 규제됩니다. 이는 이미 채워진 필드의 내용을 표시하는 또 다른 대체 시스템입니다. 적절한 사용자 경험을위한 멋진 트릭입니다.!
양식 완성 후 직접적으로 jQuery 함수 우리는 썼다. pageload의 기본 구현이므로 먼저이 부분에 대해 설명하겠습니다. 그러나 브라우저가 JavaScript를 허용하지 않으면 기본적으로 PHP 코드를 사용할 수 있습니다.
jQuery로 열기
이 주제에 관해 이야기하는 가장 쉬운 방법은 바로 들어가기입니다. 각 블록을 한 줄씩 나눠서 스크립트가 실제로 무엇을 확인하는지 확인할 수 있습니다..
그러나 만약 당신이 단지 길을 잃으면 프로젝트 코드 파일을 검토한다.. 모든 전체 블록은 jQuery 웹 사이트에 미리 작성되어 문서화되어 있습니다. 시작하려면 다른 코드와 비슷한 코드를 엽니 다.
당신이 익숙하다면 콜백 당신은 우편() 함수에는 내장 된 매개 변수 집합이 있습니다. 콜백은 호출되는 더 작은 함수입니다. 다른 함수의 데이터 응답시.
예를 들어, 우리가 jQuery.post () 함수가 전자 메일을 성공적으로 촬영하면 자체 내부 함수를 호출하여 슬라이딩 애니메이션을 표시합니다. 이 코드는 모두 자체 블록으로 작성하고 다른 곳으로 이동할 수 있습니다. 그러나이 튜토리얼에서는 콜백을 인라인 함수로 작성하는 것이 훨씬 쉽습니다..
우리의 PHP를 깨고
언급해야 할 마지막 장애물은 논리 우리의 PHP 프로세서 뒤에. 이것은 실제로 사용할 백엔드 시스템입니다. 메일 기능 호출 과 메시지를 보내라.. 아래 예제에서 사용 된 모든 코드는 메인의 맨 위에 직접 있습니다. .PHP 파일, HTML 출력 전에.
또한 페이지를 새로 고치는 몇 가지 내부 스타일이 있습니다. 여기서 특별히 새로운 것은 없습니다. 그래서 우리는 세부 사항에 들어 가지 않을 것입니다. 그러나, 그 styles.css 문서는 프로젝트 코드에 포함되어 있으며 기초적인 CSS3 기술을 포함합니다..
시작하려면 PHP 절을 열고 확인하십시오. 양식이 제출 된 경우. 그만큼 우편 변하기 쉬운 “제출 된” 실제로 우리 양식의 끝에 추가 된 숨겨진 입력 필드였습니다. 그것은 유용한 방법입니다. 사용자가 아무것도 제출하지 않았는지 확인 아직 우리는 서버 리소스를 낭비하지 않습니다..
이 후에 우리는 3 개의 분리 된 다른 경우라면 보고 확인하는 진술 각 입력 필드가 채워진 경우. 나는 그들이 본질적으로 모두 매우 반복적이기 때문에 여기에 논리의 각 비트를 포함하지 않을 것이다. 그러나 간단한 예제를 제공하기 위해 아래에 전자 메일 확인 절을 포함 시켰습니다.
// 유효한 전자 메일이 필요한 경우 if (trim ($ _ POST [ 'email']) === ") $ emailError = '전자 메일 주소를 입력하는 것을 잊어 버렸습니다.'; $ hasError = true; else if (! preg_match ( "/^[[::num:]][a-z0-9_.-]*@[a-z0-9.-]+\.[az]2,4$/i", trim ($ $ emailError = '잘못된 이메일 주소를 입력했습니다.'; $ hasError = true; else $ email = trim ($ _ POST [ 'email']);PHP는 값에서 모든 공백을 없애고 남은 것이 있는지 확인합니다. 그렇다면 우리는 상세한 정규 표현식 (Regex) 사용자의 입력 문자열이 전자 메일 패턴과 일치하는지 확인.
당신은 확실히 어떻게 이해할 필요가 없습니다.
preg_match ()이 스크립트를 작성합니다. 그것은 유용한 기능이다. 성공적인 데이터 유형에 대한 규칙 및 요구 사항 결정, 그러나 진짜로 파악하기 위하여 진보 된 프로그래밍 지식을 명령한다. 이 시나리오에서는 사용자가 선택한 몇 개의 문자 만 입력하도록하고 있습니다. @ 기호 다음에 2 ~ 4 자 ~을 대표하는 최상위 도메인.우리의 모든 논리가 통과하고 아무런 오류도 반환하지 않으면 메시지를 보낼 시간입니다! 이 코드는 개별 변수를 설정하여 전자 메일 메시지를 사용자 정의하고 일부를 설정합니다. 메일 헤더 그 과정을 위해.
// 오류가 없으면 오류를 이메일에 보내십시오! if (! isset ($ hasError)) $ emailTo = '[email protected]'; $ 제목 = '보낸 사람의 메시지'. $ name; $ sendCopy = trim ($ _ POST [ 'sendCopy']); $ body = "Name : $ name \ n \ nEmail : $ email \ n \ n 코멘트 : $ comments"; $ headers = '보낸 사람 :'. ' <'.$emailTo.'>'. "\ r \ n". '답장하다: ' . $ email; mail ($ emailTo, $ subject, $ body, $ headers); // 부울 완료 값을 TRUE로 설정합니다. $ emailSent = true;코드가 전자 메일 주소를 알아내는 방법을 궁금해했다면,이 부분을 채울 부분입니다. 우리 집합의 첫 번째 변수는 제목이 붙었습니다
$ emailTo어느 것이 든 포함해야한다. 메시지를받을 전자 메일 주소.우리 내부
$ body변수 우리는\엔메시지에 줄 바꿈 문자를 추가하십시오. 이렇게하면 보낸 사람의 이름, 이메일 주소, 그들의 휴식을 위해 메시지 내용. 당연히 디스플레이를 멋지게 꾸밀 수 있지만이 구조는 잘 작동합니다..결론
이것은 고급 문의 양식에 대한 자습서를 닫습니다. 내 요소와 관련된 요소의 스타일을 지정하려면 예제를 확인하십시오. styles.css 프로젝트 코드 내에서. 그러나이 페이지는 자신 만의 룩앤필을 쉽게 디자인 할 수 있도록 충분히 구조화되어 있습니다..
소스 코드를 다운로드하고 조금 더 가까이서 무엇을했는지 살펴보십시오. 튜토리얼을 따르는 것이 좋지만 프로젝트 소스에 직접 액세스하는 것은 매우 중요합니다. 또한 사용자 정의를 손쉽게 만들 수있는 간단한 스타일 시트를 포함 시켰습니다.보기에 감사드립니다.!
