反応でNetlify接触フォームを加える方法

14869 ワード
react webdev netlify テキストリンク
私は最近Netlifyを使用して私のポートフォリオのウェブサイトの連絡先フォームを作成し、それを設定するいくつかの時間がかかりました.私は、同じポストをしようとしてそこに他の貧しい魂を助けるために、このポストを書きました.
以下のようになります.

注:私は、私を案内するためにこれらの2つの非常に役に立つ記事を使いました:this one and this .

ステップ1 : netlify属性でフォームを追加する

  • 簡単な連絡フォームを作成します
  • 重要:NetLify組み込み機能をフォームの提出を処理するために追加します.ルックアットname , method and 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 :別のフォームをインデックスに追加します。HTMLファイル

  • netlifyあなたのコードに次のブロックを追加することを推奨しますindex.html ファイルを開く<body> NetLifyがフォームを処理できるようにするためのタグ.
  • The 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 and useState の下のメッセージと同様に<h2> タグ
  • 重要:確認してくださいaction 内部属性form 要素はユーザを正しいパスに取ります.私の場合では"/contact/?success=true" ここで私のルートと私のコンポーネントの名前です.
    • 注:このコードのほとんどは、私が導入で言及した記事のうちの1つからとられました.
    //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プロジェクトダッシュボードでフォームの投稿を確認してください
  • 次のようになります.

    • それです.うまくいけば、それは期待通りに働きました.そうでないならば、ちょっと私に知らせてください、そして、我々は道を見つけます😉
    JS]配列を入力して、最大の要素を返します.
    回帰-工場問題