next.jsとnetlifyを使用して連絡先フォームを作成する方法-CSSチュートリアル-php.cn

next.jsとnetlifyを使用して連絡先フォームを作成する方法

尊渡假赌尊渡假赌尊渡假赌

リリース： 2025-03-18 11:05:12

オリジナル

394 人が閲覧しました

next.jsで効率的な連絡先フォームを構築し、強力なスパム検出をネットライディングして統合します！この記事では、確認ページで連絡先フォームを作成し、Netlifyの組み込み機能を使用してスパムアンチスパム機能を改善するように導きます。

next.jsとnetlifyを使用して連絡先フォームを作成する方法

Next.jsは、高性能でスケーラブルなReactアプリケーションを構築できる強力なReactフレームワークです。 Netlifyと組み合わせることで、サーバー側のコードを作成せずに連絡先フォームをすばやく構築できます。

Netlifyフォームはセットアップに便利で、無料バージョンが利用可能です（各Netlifyサイトは最大100の無料時間からフォームを送信できます）。提出されたフォームは、Netlifyの内蔵スパムフィルター（Akismetを使用）を自動的に渡され、スパム検出を強化するためのさまざまな構成オプションを提供します。

連絡先フォームを作成します

next.jsアプリケーションで、 ContactFormコンポーネントを作成して、連絡先ページにフォームをレンダリングします。フォームを/contactパスの下でレンダリングする場合は、タグと入力フィールドを含むpages/contact.jsファイルの次のContactFormコンポーネントを使用する必要があります。

 const contactform =（/ * code see */ exlow）;

ログイン後にコピー

次のコードスニペットは、名前、会社、電子メール、メッセージフィールドを備えたフォーム、および送信ボタンを作成します。フォームを送信した後、 /contact/?success=trueにリダイレクトされますaction現在、クエリパラメータがsuccessた場合とまったく伴わないページの見た目に違いはありません。後で更新します。

現在のContact.jsファイルは次のとおりです。

 「React」からのImport React;
const contactPage =（）=> {
 const contactform =（/*上記のコードスニペットのコード*/）

 戻る （
   <div>
     <h1>お問い合わせ</h1>
     {contactform}
   </div>
 ）;
};

デフォルトの連絡先をエクスポートします。

ログイン後にコピー

基本フォームの設定が完了したら、Netlifyが将来のサイトの展開でフォームを自動的に認識するように、情報を追加する必要があります。これを行うには、フォームを更新し、 data-netlify="true"プロパティとフォーム名を含む非表示の入力フィールドを追加する必要があります。 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 cunsimationscreenvisible = router.query？.success && router.query.success === "true";

ログイン後にコピー

この例では、ページに表示されていると同時に、次のステートメントを使用して、フォームが表示されるかどうかを判断できます。

 const formvisible =！cumponationscreenvisible;

ログイン後にコピー

ユーザーにフォームを再提出するオプションを提供するには、クエリパラメーターをクリアしてフォームにボタンを追加してフォームをリセットできます。 router.replaceを使用する（ router.pushではなく）ページを更新するだけでなく、現在のページをクエリパラメーターを含まないバージョンに置き換えます。

 router.replace（ "/contact"、undefined、{shallow：true}）

ログイン後にコピー

その後、フォームが表示されるかどうかに基づいて、フォームを条件付きでレンダリングできます。

 {formvisible？contachmessage}

ログイン後にコピー

上記に基づいて、次のコードを使用して、クエリパラメーターに基づいてフォームを条件付きでレンダリングできます（フォームが送信されたときに更新されます）：

 「React」からReact、{UseState}をインポート。
"next/router"から{userouter}をインポートします。

const contactPage =（）=> {
 const [submittername、setsubmittername] = uesestate（ ""）;
 const router = userouter（）;
 const ConfirmenationScreenvisible =
   router.query？.success && router.query.success === "true";
 const formvisible =！cumponationscreenvisible;

 const commisationmessage =（
   
     フォームを提出していただきありがとうございます。 24〜48時間以内にご連絡いたします。
     
   
 ）;

 const contactform =（/*最初のコード例のコード*/）;

 戻る （
   
     お問い合わせ
     {formvisible？contachmessage}
   
 ）;
};

デフォルトの連絡先をエクスポートします。

ログイン後にコピー

非表示のロボットフィールドを追加します

フォームのコア機能が完全になったので、デフォルトに含まれるAkismetに加えて、フォームに追加のスパム検出を追加できます。この機能はdata-netlify-honeypot="bot-field"プロパティをフォームに追加することで有効にできます。

 {/*コードについては以下を参照*/}

ログイン後にコピー

また、入力を含むbot-fieldと呼ばれるタグを含む新しい非表示段落を作成する必要があります。このフィールドはロボットに「見える」が、人間には「見える」。この隠されたフィールドが入力されると、Netlifyはボットを検出し、提出物をスパムとしてマークします。

<p hidden>
  <label>このアイテムに記入しないでください：</label>
  <input type="text" name="bot-field">
</p>

ログイン後にコピー

さらなるカスタマイズ

Netlifyがサポートする別のスパム保護オプションを探索できます。これは、フォームをNetlifyに追加するためにRecaptcha 2を追加することです。
フォームを更新し、ファイルのアップロードを許可できます。
フォーム提出の通知を設定できます。これは、 https://app.netlify.com/sites/[your-site-name]/settings/forms