React에서 Netlify 문의 양식을 추가하는 방법

14975 단어 reactwebdevnetlify
저는 최근에 Netlify를 사용하여 제 포트폴리오 웹사이트에 대한 문의 양식을 만들었는데 설정하는 데 시간이 좀 걸렸습니다. 같은 일을 하려는 다른 불쌍한 영혼들을 돕기 위해 이 게시물을 썼습니다.

다음과 같이 표시됩니다.



참고: this one 및 this 이라는 매우 유용한 두 기사를 사용하여 안내했습니다.

1단계: Netlify 속성이 있는 양식 추가


  • 간단한 문의 양식 만들기(여기서는 Material-UI 사용)
  • 중요: Netlify 내장 기능을 추가하여 양식 제출을 처리하십시오. name 요소
    • 내부의 method , data-netlify 및 form 속성을 살펴보십시오.
  • 또한 Netlify는 양식 내부에 숨겨진 입력을 추가할 것을 권장합니다. 여기서 중요한 속성은 value 이며 양식의 이름인 연락처와 동일해야 합니다.

    • <Container maxWidth='sm'>
 <h2>CONTACT</h2>
   <Card>
     <form 
       name="contact" 
       method="POST" 
       data-netlify="true" 
      >
     <input type="hidden" name="form-name" value="contact" />
        <TextField id="standard-basic" label="name" name="name" />
        <TextField id="standard-basic" label="email" name="email" />
        <TextField multiline id="standard-basic" label="message" name="message" />
        <Button type="submit">Send</Button>
       </form>
      </Card>
   </Container>


    2단계: index.html 파일에 다른 양식 추가


  • Netlify는 Netlify가 양식을 처리할 수 있도록 다음 코드 블록을 index.html 파일의 여는 태그<body> 바로 뒤에 추가할 것을 권장합니다.
  • 여기서 action 속성은 리디렉션에 사용됩니다. 다음 단계에서 이에 대해 자세히 알아보세요.

    • <!-- A little help for the Netlify post-processing bots -->
<form name="contact" netlify netlify-honeypot="bot-field" action='/' hidden>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <textarea name="message"></textarea>
</form>


    3단계: 성공 메시지 추가 및 리디렉션 방지


  • 여기서 목표는 무엇입니까? 사람들이 귀하의 웹사이트에 머물 수 있도록 돕기 위해.
  • useEffect 및 useState와 <h2> 태그 아래의 메시지
    • 를 포함하여 다음 코드를 추가합니다.
  • 중요: action 요소 내부의 form 속성이 사용자를 올바른 경로로 안내하는지 확인하십시오. 내 경우에는 "/contact/?success=true" 연락처가 내 경로와 내 구성 요소의 이름입니다.

    • 참고: 이 코드의 대부분은 소개에서 언급한 기사 중 하나에서 가져왔습니다.

    //Final code 
export default function Contact() {
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    if ( window.location.search.includes('success=true') ) {
      setSuccess(true);
    }
  }, []);

  return (
    <Container maxWidth="sm">
      <h2>CONTACT</h2>
      {success && (
          <p style={{ color: "green" }}>Thanks for your message! </p>
        )}
      <Card>
        <form 
            name="contact" 
            method="POST" 
            action="/contact/?success=true"
            data-netlify="true" 
            >
        <input type="hidden" name="form-name" value="contact" />
          <TextField id="standard-basic" label="name" name="name" /> <br />
          <TextField id="standard-basic" label="email" name="email" /> <br />
          <TextField
            multiline
            id="standard-multiline-static"
            label="message"
            name="message"
          />
          <br />
          <div>
            <Button type="submit">Send</Button>
          </div>
        </form>
      </Card>
    </Container>
  );
}


    4단계: 마지막으로 양식 제출 확인


  • 사이트를 이미 배포했다고 가정하고 Netlify 프로젝트 대시보드에서 양식 제출을 확인하십시오
    • .
  • 다음과 같아야 합니다.



    • 그게 다야. 잘만되면 예상대로 작동했습니다. 그렇지 않은 경우 알려주시면 방법을 찾아보겠습니다 😉
    Python 개발자 및 미니 물고기 앱으로 Ruby 선택
    AWS 미디어 서비스 정보

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage