NetLifyフォームとNetLify関数を使用して、電子メールサインアップウィジェットを作成する

個人のウェブサイトの構築と維持は、プラットフォームの所有権やWebテクノロジーを探索する機会など、多くの利点を提供します。最近、私は自分のサイトから始めて、サーバーレス関数を掘り下げました。この記事では、私の経験と学習を共有し、独自の体験をすることができます！

サーバーレス関数の簡単な紹介

サーバーレス関数（ラムダ関数またはクラウド関数とも呼ばれます）は、ウェブサイト、アプリケーション、またはその他のコードとは無関係に書き込み、ホスト、実行できる自己完結型のコードスニペットです。サーバーで実行されている間、サーバーインフラストラクチャを管理しません。これにより、強力でスケーラブルなアプリケーションの開発が簡素化されます。

より詳細な理解のために、CSS-Tricksのガイド「The Power of Serverless Front-Endeversers」は優れたリソースです。

プロジェクトの目標：簡単な電子メールサインアップフォーム

私のプロジェクトは、特定の制約を備えた電子メールサインアップフォームの作成に焦点を合わせました。

• JavaScriptを含まない機能：フォームは、CSSとHTMLのみで機能し、進行性の強化を可能にします。
• 外部依存関係はありません：目標は、すべてのコードを自分で記述することでした。
• サーバーレス関数統合：電子メールデータ処理は、クライアント側ではなくサーバー側に発生します。

テクノロジースタック：11ty、netlify、およびbuttondown

私のウェブサイトでは、静的サイトジェネレーターである11tyを使用して、HTMLテンプレートの作成を可能にします。 Netlifyは展開を処理し、サーバーレス機能に不可欠であり、次のことを提供します。

• 自動化されたGitHub展開：開発ワークフローの簡素化。
• Netlifyフォーム：カスタムコードなしでフォーム送信を管理します。
• Netlify機能：フォームデータに基づいてサーバー側のアクションを有効にします。

Buttondownは、メーリングリスト管理サービスとして機能します。重要なことに、個人サイトの場合、3つのサービスはすべて無料の層を提供しています。

フォームのHTML

電子メールサブスクリプションフォームのHTMLは簡潔で、Netlifyフォームの属性を活用しています。

あなたのメールアドレス 購読する

data-netlify="true"フォームを処理するようにnetlifyに指示します。 bot-field入力は、ユーザーから自動的に隠されたボットを検出するためのハニーポットとして機能します。 NetlifyのAkismet Integrationは、スパムからさらに保護します。 email入力は、ユーザーエクスペリエンスを拡大するためにブラウザの検証を使用します。

JavaScriptによるプログレッシブエンハンスメント

Netlify Formsは自動リダイレクトを提供しますが、ユーザーをページに維持することを好みました。 JavaScript関数は、フォームの機能を強化します。

 const processform = form => {
  // ...（リダイレクトなしでフォームを送信するAPIコードを取得）...
};

送信イベントリスナーによってトリガーされるこの関数は、フォームを徐々に強化し、JavaScriptが無効になっても機能性を確保します。

サーバーレス機能

functions/submission-created.jsにあるnetlify関数は、プロセスをフォーム送信します。

 // ...（node.jsコードnode-fetchおよび環境変数を使用してボタウンにデータを送信します）...

この関数は、電子メールアドレスを取得し、 node-fetchを使用してAPIを介してボタンタウンに送信し、デバッグの結果を記録します。環境変数は、Butontown APIキーを安全に保存します。

展開とローカルテスト

関数を作成し、 netlify.toml構成、および環境変数の設定を設定した後、deploymentはnetlifyのgithub統合を介して簡単です。 Netlify Dev（ npm i netlify -g 、 netlify dev ）を使用してローカルテストが可能ですが、フォームの提出テストにはプレビュービルドが必要です。

将来の改善

将来の拡張機能には、ユーザーにリアルタイムのフィードバックを提供するなど、メールアドレスが既にサブスクライブされているかどうかを示すなどです。

結論

約50行のコードを使用して、完全に機能する電子メールサインアップフォームを作成しました。 HTML、CSS、JavaScript、およびNetlifyのサーバーレス機能の組み合わせにより、JavaScriptの可用性に関係なく機能するスパム耐性のユーザーフレンドリーなフォームが生まれました。

以上がNetLifyフォームとNetLify関数を使用して、電子メールサインアップウィジェットを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。