GatsbyサイトのNetlifyダッシュボードにフォームが表示されない

オレグ

Netlifyフォーム+ギャツビーに問題があります。Netlifyダッシュボードにフォームが表示されません。

私のフォームは、デフォルトでは表示されないが、クリックするだけで開くドロワーコンポーネントにあります。

初期化に必要なすべてのフィールドをすでに追加しましたが、何も起こりません

<form name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field">...</form>

私の現在の送信機能:

const onSubmitHandler = e => {
    e.preventDefault()

    const form = e.target

    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({
        "form-name": form.getAttribute("name"),
        ...formData,
      }),
    })
      .then(() => {
        dispatch(clearCart())
        setFormData(initialFormData)
        dispatch(setCartStage("complete"))
      })
      .catch(error => console.log(error))
  }
フェラン・ブイリュー

フォームをダッシュ​​ボードに表示するのと同じhidden入力を提供する必要があります。name="form-name"value

<form name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field">
  {/* You still need to add the hidden input with the form name to your JSX form */}
  <input type="hidden" name="form-name" value="contact" />
  ...
</form>

hidden form-nameフィールドを繰り返すことは絶対に必要です。このフィールドを省略したり、名前を誤って入力したりすると、Netlifyがこのリクエストをフォームと照合する方法を知らないため、エントリはエラーをスローするか、失われます。

さらに、POSTリクエストにはこのフィールドを本文に含める必要があります。理想的な送信は次のようになります。

  const handleSubmit = (e) => {
    e.preventDefault()
    const form = e.target
    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({
        'form-name': form.getAttribute('name'), 
        ...state, // your fields paired with key: name
      }),
    })
      .then(() => navigate(form.getAttribute('action')))
      .catch((error) => alert(error))
  }

詳細情報はこの記事(Netlifyが提供)にあり、ライブの例とソースコードはこのGitHubリポジトリにあります。


送信時に404を受け取ります

あなたの原点経路は間違っていると思います。フォームは見栄えが良くなりましたが、NetlifyはリクエストされたURLを見つけることができません。

ここに画像の説明を入力してください

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

GatsbyサイトのNetlifyダッシュボードにフォームが表示されない

分類Dev

「成功した」Netlifyフォームの送信がダッシュボードに表示されない

分類Dev

Firebaseカスタムイベントがダッシュボードに表示されない

分類Dev

FacebookAndroidアプリのインストールがアプリダッシュボードに表示されない

分類Dev

ブートストラップ4ダッシュボードのアクティブアイテムがFirefoxに表示されない

分類Dev

JMeterHTMLダッシュボードレポートがJenkinsに表示されない

分類Dev

HangFireダッシュボードがPRODに表示されない

分類Dev

Dockerダッシュボードにファイル共有オプションが表示されない

分類Dev

Rフレックスダッシュボードにアイコンがまったく表示されない

分類Dev

FirebaseダッシュボードにAdMobの収益が表示されない

分類Dev

いくつかの時点で、メトリックがGrafanaダッシュボードに表示されない

分類Dev

DrupalサイトにWebフォームが表示されない

分類Dev

Angular-ログインには表示されないがダッシュボードに表示されるサイドバー-AngularRouting

分類Dev

Tumblrのフォロー/ダッシュボードボタンが表示されていますか?

分類Dev

ダッシュボードに表示されない果樹園のコンテンツアイテム

分類Dev

MacOSのSpringTool Suiteダッシュボードでフォントが正しく表示されないのはなぜですか?

分類Dev

内和ダッシュボードにクライアントが表示されない(Sensu Monitoring)

分類Dev

Firebaseダッシュボードにサーバーキー全体が表示されない

分類Dev

ライブラリ/ドキュメントのショートカットに、すべてのサブフォルダーのすべてのファイルが1つのフラットリストに表示されるのはなぜですか?

分類Dev

Firefoxファイルダイアログにcryptomatorボリューム(ボールト)が表示されない

分類Dev

Answersダッシュボードに表示されないカスタム属性

分類Dev

Xaringanスライドにスマートクォートと全角ダッシュが表示されないのはなぜですか?

分類Dev

サンフランシスコのフォントがAppleWatchシミュレーターに表示されない

分類Dev

ペイパルがユーザーダッシュボードに表示されない注文

分類Dev

Xamarin.FormsPCLベースのソリューションのiOSプラットフォームにContextActionMenuItemアイコンが表示されない

分類Dev

画面名がFirebaseAnalyticsダッシュボードに表示されない

分類Dev

Java Profiler JMCUIダッシュボードがMacOSに表示されない

分類Dev

jenkinsダッシュボードに資格情報が表示されない

分類Dev

Firebaseダッシュボードに価格値が表示されない

Related 関連記事

  1. 1

    GatsbyサイトのNetlifyダッシュボードにフォームが表示されない

  2. 2

    「成功した」Netlifyフォームの送信がダッシュボードに表示されない

  3. 3

    Firebaseカスタムイベントがダッシュボードに表示されない

  4. 4

    FacebookAndroidアプリのインストールがアプリダッシュボードに表示されない

  5. 5

    ブートストラップ4ダッシュボードのアクティブアイテムがFirefoxに表示されない

  6. 6

    JMeterHTMLダッシュボードレポートがJenkinsに表示されない

  7. 7

    HangFireダッシュボードがPRODに表示されない

  8. 8

    Dockerダッシュボードにファイル共有オプションが表示されない

  9. 9

    Rフレックスダッシュボードにアイコンがまったく表示されない

  10. 10

    FirebaseダッシュボードにAdMobの収益が表示されない

  11. 11

    いくつかの時点で、メトリックがGrafanaダッシュボードに表示されない

  12. 12

    DrupalサイトにWebフォームが表示されない

  13. 13

    Angular-ログインには表示されないがダッシュボードに表示されるサイドバー-AngularRouting

  14. 14

    Tumblrのフォロー/ダッシュボードボタンが表示されていますか?

  15. 15

    ダッシュボードに表示されない果樹園のコンテンツアイテム

  16. 16

    MacOSのSpringTool Suiteダッシュボードでフォントが正しく表示されないのはなぜですか?

  17. 17

    内和ダッシュボードにクライアントが表示されない(Sensu Monitoring)

  18. 18

    Firebaseダッシュボードにサーバーキー全体が表示されない

  19. 19

    ライブラリ/ドキュメントのショートカットに、すべてのサブフォルダーのすべてのファイルが1つのフラットリストに表示されるのはなぜですか?

  20. 20

    Firefoxファイルダイアログにcryptomatorボリューム(ボールト)が表示されない

  21. 21

    Answersダッシュボードに表示されないカスタム属性

  22. 22

    Xaringanスライドにスマートクォートと全角ダッシュが表示されないのはなぜですか?

  23. 23

    サンフランシスコのフォントがAppleWatchシミュレーターに表示されない

  24. 24

    ペイパルがユーザーダッシュボードに表示されない注文

  25. 25

    Xamarin.FormsPCLベースのソリューションのiOSプラットフォームにContextActionMenuItemアイコンが表示されない

  26. 26

    画面名がFirebaseAnalyticsダッシュボードに表示されない

  27. 27

    Java Profiler JMCUIダッシュボードがMacOSに表示されない

  28. 28

    jenkinsダッシュボードに資格情報が表示されない

  29. 29

    Firebaseダッシュボードに価格値が表示されない

ホットタグ

アーカイブ