Next.js 및 NetLify와의 연락처 양식을 만드는 방법-CSS 튜토리얼-php.cn

Next.js 및 NetLify를 사용하여 효율적인 접촉 양식을 작성하고 강력한 스팸 탐지를 통합하십시오! 이 기사에서는 확인 페이지로 연락 양식을 작성하고 NetLify의 내장 기능을 사용하여 스팸 방지 기능을 향상시킵니다.

Next.js 및 NetLify와의 연락처 양식을 만드는 방법

Next.js는 고성능의 확장 가능한 반응 응용 프로그램을 구축 할 수있는 강력한 반응 프레임 워크입니다. NetLify와 결합하여 서버 측 코드를 작성하지 않고도 연락처 양식을 신속하게 구축 할 수 있습니다.

NetLify 양식은 설정하기 편리하고 무료 버전을 사용할 수 있습니다 (각 NetLify 사이트는 최대 100 번의 무료 시간까지 양식을 제출할 수 있음). 제출 된 양식은 NetLify의 내장 스팸 필터 (AKISMET 사용)를 통해 자동으로 전달되며 스팸 탐지를 향상시키기위한 다양한 구성 옵션을 제공합니다.

연락처 양식을 만듭니다

다음.js 응용 프로그램에서 연락처 페이지에서 양식을 렌더링 할 ContactForm 구성 요소를 작성하십시오. /contact 경로에서 양식을 렌더링하려면 태그 및 입력 필드를 포함하여 pages/contact.js 파일에서 다음 ContactForm 구성 요소를 사용해야합니다.

 const contactform = (/ * 코드 참조 */ 아래);

로그인 후 복사

다음 코드 스 니펫은 이름, 회사, 이메일 및 메시지 필드 및 제출 버튼이있는 양식을 만듭니다. 양식을 제출 한 후 양식의 action 속성 값에 따라 /contact/?success=true 로 리디렉션됩니다. 현재, success 쿼리 매개 변수와 함께 제공 될 때 페이지가 어떻게 보이는지에는 차이가 없으며 나중에 업데이트 할 것입니다.

현재 Contact.js 파일은 다음과 같습니다.

 "React"에서 React React;
const contactPage = () => {
 const contactform = (/* 위의 코드 스 니펫*/)

 반품 (
   <div>
     <h1>저희에게 연락하십시오</h1>
     {contactform}
   </div>
 );
};

내보내기 기본 연락처;

로그인 후 복사

기본 양식 설정을 마친 후에는 NetLify가 향후 사이트 배포에서 양식을 자동으로 인식 할 수 있도록 정보를 추가해야합니다. 이렇게하려면 양식을 업데이트하고 data-netlify="true" 속성 및 양식 이름을 포함하는 숨겨진 입력 필드를 추가해야합니다. NetLify 대시 보드에서 사이트로 이동하여 양식 탭을 클릭하여 숨겨진 필드에 설정된 이름을 기반으로 양식 응답을보십시오. 중요한 것은 사이트에 여러 양식이있는 경우 각 양식에 대해 고유 한 이름을 설정하여 NetLify가 올바르게 레코드 할 수 있도록해야합니다.

 {/* 코드는 아래를 참조하십시오*/}

로그인 후 복사

사이트를 NetLify에 성공적으로 배포하고 data-netlify 속성 및 form-name 필드를 추가 한 후 배포 된 사이트에 액세스하고 양식을 작성할 수 있습니다. 양식을 제출 한 후 https://app.netlify.com/sites/site-name/forms ( site-name 사이트 이름 인 곳)로 이동하고 양식이 성공적으로 설정되면 최신 양식 제출 기록을 표시해야합니다.

확인 페이지로 리디렉션합니다

사용자 경험을 향상 시키려면 URL이 /contact/?success=true 로 변경 될 때 양식을 제출 한 후 확인 페이지로 리디렉션 할 논리를 추가해야합니다. 양식이 제출 될 때 완전히 다른 페이지로 리디렉션하도록 선택할 수도 있지만 쿼리 매개 변수를 사용하면 다음 라우터를 사용하여 유사한 효과를 얻을 수 있습니다. 쿼리 매개 변수를 기반으로 확인 페이지 또는 양식의 가시성을 결정하기 위해 새 변수를 만들 수 있습니다. import { useRouter } from "next/router"; next/router 라우터를 사용하여 현재 쿼리 매개 변수를 검색 할 수 있습니다.

 const router = userouter ();
const volictationscreenvisible = router.query? .success && router.query.success === "true";

로그인 후 복사

이 예에서는 페이지에서 볼 수 없으며 동시에 양식을 사용하여 양식이 표시되는지 여부를 결정할 수 있습니다.

 const formvisible =! chongryationscreenvisible;

로그인 후 복사

사용자에게 양식을 다시 제출할 수있는 옵션을 제공하려면 쿼리 매개 변수를 지우고 양식을 재설정하기 위해 확인 페이지에 버튼을 추가 할 수 있습니다. router.replace ( router.push 대신)를 사용하면 페이지를 업데이트 할뿐만 아니라 현재 페이지를 쿼리 매개 변수가 포함되지 않은 버전으로 대체합니다.

 router.replace ( "/contact", undefined, {shallow : true})

로그인 후 복사

그런 다음 보이는지 여부에 따라 양식을 조건부로 렌더링 할 수 있습니다.

 {formvisible? contact form : voluctationMessage}

로그인 후 복사

위의 내용을 기반으로 다음 코드를 사용하여 쿼리 매개 변수를 기반으로 양식을 조건부로 렌더링 할 수 있습니다 (양식이 제출 될 때 업데이트 됨).

 import React, {usestate} "React";
"Next/Router"에서 {userouter} 가져 오기;

const contactPage = () => {
 const [submittername, setsubmittername] = usestate ( "");
 const router = userouter ();
 const volictationscreenvisible =
   router.query? .success && router.query.success === "true";
 const formvisible =! chongryationscreenvisible;

 const quicationMessage = (
   
     양식을 제출해 주셔서 감사합니다. 24-48 시간 이내에 연락 드리겠습니다.
     
   
 );

 const contactform = (/* 코드 첫 번째 코드 예제*/);

 반품 (
   
     저희에게 연락하십시오
     {formvisible? contact form : voluctationMessage}
   
 );
};

내보내기 기본 연락처;

로그인 후 복사

숨겨진 로봇 필드를 추가하십시오

양식의 핵심 기능이 완료되었으므로 기본적으로 포함 된 Akismet 외에도 형태에 추가 스팸 탐지를 추가 할 수 있습니다. 이 기능은 data-netlify-honeypot="bot-field" 속성을 양식에 추가하여 활성화 할 수 있습니다.

 {/* 코드는 아래를 참조하십시오*/}

로그인 후 복사

또한 입력이 포함 된 bot-field 라는 태그로 새로운 숨겨진 단락을 만들어야합니다. 이 분야는 로봇에게 "보이지만"인간에게는 보이지 않습니다. 이 숨겨진 필드가 채워지면 NetLify는 봇을 감지하고 제출물을 스팸으로 표시합니다.

<p hidden>
  <label>이 항목을 작성하지 마십시오.</label>
  <input type="text" name="bot-field">
</p>

로그인 후 복사

추가 사용자 정의

NetLify가 지원하는 또 다른 스팸 보호 옵션을 탐색 할 수 있습니다. NetLify는 NetLify 양식에 recaptcha 2를 추가하는 것입니다.
양식을 업데이트하고 파일 업로드를 허용 할 수 있습니다.
양식 제출에 대한 알림을 설정할 수 있습니다. 이것은 이메일 알림에 맞춤 주제 필드 (숨겨질 수 있음)를 포함 할 수있는 https://app.netlify.com/sites/[your-site-name]/settings/forms 에서 설정할 수 있습니다.